CSS入门教程共44页.docx

1、CSS入门教程共44页CSS入门教程1、CSS简介在了解了HTML或者XHTML之后，我们可以学习CSS。什么是CSS呢？让我们先来一点感性体验吧。看看这个没有添加CSS的HTML文件(http:/csszengarden/zengarden-sample.html)，是一个普普通通的网页。然而通过给这个文件添加的CSS规则，我们可以得到十分美观的网页(http:/csszengarden/?cssfile=/208/208.css&page=0)。我们不改动HTML，只是通过添加不同的CSS规则，我们就可以得到各种不同样式的网页。好了，下面我们再来回答什么是CSS这个问题。CSS是Casca

2、dingStyleSheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。同学习XHTML一样，在学习CSS的过程中您只需要使用Windows自带的记事本(Notepad.exe)就可以了。在实际制作网页的时候您可能需要用到FontPage、Dreamweaver等专业的网页设计软件，它们将使得为网页添加CSS的工作变得异常简单。但是再次强调，在学习CSS的过程中，您不需要这些强大的软件。本教程只使用visual studio 2008，目的在于练习手写CSS代码的能力，也是为了方便那些还没有Dr

3、eamweaver之类软件的读者。2、样式表的基本语法本节着重介绍样式表的基本语法，这是学好CSS的基础。2.1 插入样式表前后的网页。为了更好地理解样式表的作用，我们先看一个CSS的应用实例。在本例子中，你很容易对比出使用CSS前后两个网页的区别，当然了，现在你可能读不懂CSS部分的代码。别担心，这些代码将在少后的教程中介绍。我们首先来看一下未加入CSS的页面。网页里只有一段话：“菜鸟吧的站长是大傻瓜！傻瓜爱吃大西瓜！”。而且由于分别是标题1、2、3、4，页面内字体大小也不相同，还有标题的自动换行。它的源代码如下： 我真惨!被用来演示CSS! 菜鸟吧 的站长 是大傻瓜！傻瓜 爱吃大西瓜！ 下

4、面我们简单的为它加上一点CSS，来让我不再傻按如下提示修改网页的代码： 我真惨!被用来演示CSS! h1 font-size: 12px; h2,h4 font-size: 12px; display:inline; 菜鸟吧 的站长 是大傻瓜！傻瓜 爱吃大西瓜！ 让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。2.2 CSS语法简介加在head部分的和分别被浏览器识别为CSS的开始和结束。而注释标签则是避免不支

5、持CSS的浏览器将CSS内容作为网页正文显示在页面上。上面的内容并没有定义任何样式，它的任务只是告诉浏览器CSS代码的位置。下面的内容是重点，正是下面这一部分的内容使得页面的外观发生了明显的变化，它也就是CSS的描述部分(定义部分)：h1 font-size: 12px;h2,h4 font-size: 12px; display:inline; 是大傻瓜！傻瓜 (1) 选择器通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：选择器 属性: 属性值; 例如：h1 font-size: 12px;本例中选择器也就是你想要描述的HTML标签，其它选择器将在后面的教

6、程中讲解。上面例子的选择器就是h1标签。属性和属性值则是说明你想要描述h1的哪一个属性，该属性的值为多少，例如上面例子中将h1字体大小属性为12像素，写成font-size: 12px。属性和属性值之间用一个冒号“:”分开，以一个分号“;”结束，最后别忘记用一对大括号“”括起来。我们也可以为一个选择器同时定义多个样式，样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式，标签之间用逗号“,”隔开。也许这两句话比较绕嘴，不过事实上上面例子的第二行代码就用到了CSS的这个特性。语句“h2,h4 font-size: 12px; display:inline; ”同时为h2和,h4两个标签

7、定义了两个样式。当然了，为了使你的CSS代码更容易阅读和维护，你可以分行书写这些属性：h2,h4 font-size: 12px; display:inline;注意1：现在讲解上面代码的最后一行，在中，我们没有看到选择器，这是因为插入CSS的位置不同，它将直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。注意2：CSS的书写方式请大家根据自己的喜好决定，不过最终的目的都很明确，提高维护CSS代码的效率。2.3 CSS注释 我们以一个例子介绍在CSS中插入注释的方法： h1 font-size: 12px; /* 把标题的大小都定义为12个像素 */ h2,h4 fo

8、nt-size: 12px; display:inline;- 在CSS中，注释以“/*”开始，以“*/”结束，注释里面的内容对于浏览器来说是没有意义的。2.4 class(类)和idclass和id是CSS中非常重要的内容。在上一节中我们了解了如何为特定的标签定义样式，例如我们利用 “h1font-size: 12px;”将页面内所有的标题1的字体大小改为了12像素。那么如果我不希望所有的标题1样式都被修改该怎么做呢？这时class和id就可以帮你的忙。为了了解class和id，我们先来看两个网页。红色字体的是我们本节将要学习的部分。没有加入CSS时的页面 我真惨!被用来演示CSS! 我是页

9、面最上端的标题1 我是页面左侧的标题1，用来导航 我是页面右侧新闻的标题1 我是新闻的内容。 加入CSS之后的页面 我真惨!被用来演示CSS! h1.dabiaoti font-weight: bolder; text-align: center; h1#daohang font-size: 12px; font-weight: bolder; text-align: left; h1.xinwen font-size: 16px; font-weight:bold; text-align: center; color:green; 我是页面最上端的标题1 我是页面左侧的标题1，用来导航 我是

10、页面新闻的标题1 我是新闻的内容。 上面的例子应用class和id实现了3种不同的标题1。下面我们就来讲讲class和id的具体应用规则。（1）指定标签的class和id首先我们要在部分定义class(类)或id。class的定义方法： 指定标签. 类名 样式id的定义方法：指定标签#id名 样式然后我们在想要应用类的标签上加上class(类)或者id属性：class的应用方法：id的应用方法：这种方式定义的class(类)和id只能作用于指定标签。在上面的例子中我们定义了三个类，类名分别为dabiaoti、daohang和xinwen，它们均作用于h1标签。当我们试图将其中“xinwen”的

11、样式应用于一个标签的时候(我是新闻的内容。)，您会看到它的样式没有发生任何改变。这是一种错误的CSS应用，因为类xinwen是给标签h1定义的，而没有给标签p定义。注意：类名和id名不可以用数字开头。（2）不指定标签的类或id在网页设计的过程中，你可能不希望你定义的类只局限于一个标签。就拿上面的例子来说，你可能希望xinwen类可以应用于段落标签。那么你只需要将定义部分的h1.xinwen改为.xinwen，即去掉h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。修改代码中的样式，在浏览器中看看修改之后的网页，“新闻的内容”也应用了xinwen类的样式。（3）class(类)与id

12、的区别到这里你也许要问了，class和id看起来除了一个.和#的区别之外，无论在定义上还是在应用上似乎都是一模一样啊？然而事实上并不如此，同一id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的身份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，是一类。如果你试图在一个页面内多次使用同一个id，页面通常是可以正常显示的。但是这会给后期的维护带来不便，还可能造成其它的问题。所以我们一定要区分开id和class，并且合理的应用它们。（4）包含选择符包含选择符是指：标记1里包含标记2，如果只想定义标记2的样式，并且这

13、种样式只对在标记1里的标记2中有效，对单独的标记1或标记2无定义，例如： Table a font-size: 12px在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。3、样式表加入网页方式本节以实例的形式讲解如何为一个网页添加CSS样式。在上两节中我们已经为网页添加过简单的样式表了，我们也了解了样式表的语法基础。本节将介绍将样式表加入到页面中的几种不同方法。3.1内部样式表其实我们在前两节已经应用了内部样式表。内部样式表需要在网页的部分定义，格式如下： /*符合CSS语法结构的CSS语句，例如*/ body background-color: blue; 3.

14、2行内样式表(内嵌样式表)它的使用方法我们在前两节也已经使用过了。行内样式表直接在标签内部定义，使用style属性，写法如下：例如：段落内容3.3外部样式表使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的部分插入以下内容： /*文件位置就是所处在的文件夹相对与当前网页的相对路径*/ 下面我们以一个实例来看看如何使用外部样式表：请看下面这个网页文件，红色部分的内容为网页链入了一个CSS样式表文件“waibu.css”，网页和CSS文件的源代码分别如下： 我真惨!被用来演示CSS! 我是页面最上端的标题1 我是页面左侧的标题1，用

15、来导航 我是页面新闻的标题1 我是新闻的内容。 h1.dabiaoti font-weight: bolder; text-align: center; h1#daohang font-size: 12px; font-weight: bolder; text-align: left; .xinwen font-size: 16px; font-weight:bold; text-align: center; color:green; p text-align: center;3.4层叠的意义当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样

16、式表中为p定义了如下样式：p text-align: left; 而在内部样式表中又定义了如下样式：p text-indent: 24px;那么最终网页内p标签的样式将为： p text-align: left;text-indent: 24px;。3.5几种样式表的优先级上面的两个样式表的层叠比较好理解，两个样式表分别定义了一个标签的不同属性。但是如果外部样式表与内部样式表同时定义了一个属性呢？看下面的例子。外部样式表的内容：p text-align: center; 内部样式表的内容：p text-align: left; 最终页面中的段落将是左对齐，也就是说如果你试图对同一标签的同一属性

17、多次定义，那么内部样式表的定义将要覆盖外部样式表的定义。这是因为内部样式表的优先级高于外部样式表。三种样式表的优先级由高到低排列如下：1. 行内样式表(内嵌样式表) 2. 内部样式表 3. 外部样式表 4. 补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。 5. 其他高级规则：CSS中的important!是比较实用的技巧，这里就不多说了。将在后续的CSS技巧中讨论。 4、文字属性(font)与文本属性(text)4.1 CSS文字属性(font属性)文字是一个网页的核心部分。CSS可以定义文字的字体、大小和粗细等许多外观。font属性在CSS中的使用频率是相当高的。下面我们就来看

18、看font属性都可以做什么。4.1.1.定义字体(font-family) 我真惨!被用来演示CSS! p.song font-family: 宋体; p.hei font-family: 黑体; p.eng font-family: Arial; 我的字体是宋体 我的字体是黑体 My font family is Arial. 上面的网页分别为三个段落定义了三种不同的字体。请注意中文的字体要使用引号，而英文字体则不需要。而且在实际应用中你可能遇到这样的问题：网站浏览者的电脑并没有你设置的字体。为了避免这种情况我们可以定义备用字体，方法如下：p font-family: 黑体, 宋体, 新宋体

19、; 这样，当客户的计算机中不存在黑体的时候，它就会以后面的备用字体显示文字。4.1.2.定义文字大小(font-size) p.f12 font-size: 12px; p.f16 font-size: 16px; p.f20 font-size: 20px; 我12像素 我16像素 我20像素注意不要忘记写上大小的单位，我们这里使用了像素(px)。通常中文网站的文字都定义为12px大，使用像素定义字体大小有明显的优点：精确，方便；不过使用像素定义字体大小也有一个缺陷：用IE浏览器无法调整字体大小选项。4.1.3.定义文字样式(font-style) p.ita font-style: ita

20、lic; 我是正常样式 我是斜体4.1.4.定义文字粗细(font-weigh) p.b font-weight: bold; 我是正常的字体。 我是粗体4.2文本属性(text)文本属性主要用于控制页面内文本的属性，例如颜色、间距和首行缩进等等合理的应用CSS文本属性不只可以改变你页面文本的风格，还可以在一定程度上帮你省去不必要的劳动。比如你试图为每一个段落的首行打两个空格，在CSS中你只需要一小段代码就可以让你站点之内所有的段落都自动缩进两个字符。我们就以首行缩进开始介绍一些常用的文本属性。4.2.1.首行缩进(text-indent)p text-indent: 24px; 加入上面CS

21、S语句的页面，所有的段落首行都将自动缩进24个像素。4.2.2.文本颜色(color) p.lv color: green; p.hong color: red; 我是绿色的我是红色的4.2.3.文本对齐属性(text-align) p.zhong text-align: center; p.zuo text-align: left; p.you text-align: right;我的对齐方式是居中我的对齐方式是左对齐我的对齐方式是右对齐4.2.4.文本修饰(text-decoration) p.shang text-decoration: overline; p.xia text-decoration: underline; p.zhong text-decoration: line-through; a.no