CSS入门教程.docx

1、CSS入门教程第8章 CSS入门CSS，层叠样式表(Cascading Style Sheets)，是指通过定义样式，规定了页面如何显示HTML元素。这些CSS描述往往脱离与HTML文档的内容，从而达到内容与形式的分离。样式表定义如何显示HTML元素，而且通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。从某些角度来讲，CSS实际上是一门博大精深的学问。和Java语言不一样，CSS更偏重与设计，一些专业的WEB开发人员除了掌握CSS的基本知识外，还需要有一定的艺术功底，甚至心理学知识，因为他们不仅仅要让页面漂亮，更重要的是

2、要让用户拥有更好的体验。由于篇幅的关系，在本章只能让大家对CSS有一个大致的了解，仅仅是一个入门，对CSS感兴趣的读者，可以参考一些专业的CSS书籍。本章主要讲解： CSS的简单介绍 如何使用CSS控制页面显示 使用CSS的注意点和技巧 CSS应用实例8.1 认识和使用CSSHTML标签原本被设计为用于定义文档内容。通过使用 、 这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息，而文档的布局由浏览器来完成。但是现实中，由于很多的程序员（这些程序员通常不是专门的页面设计师，而是后台Java或是.NET程序员）对这点理解得不够，让HTML做了太多不应该让它来完成的

3、工作。比如很多开发者会使用一个表格嵌套表格的方式来进行页面布局。当文档比较简单的时候，或许这种方法不存在太大的问题，但是当文档复杂超过一定程度之后，这种使用表格布局的方法愈发显示出弊端：调整起来十分困难，无用的标签越来越多等等。另外，很多人在标签内部控制页面元素的表现形式，比如字体、颜色、对齐方式等等。同样的，当页面复杂到一定程度，或者页面个数多到一定的程度之后，你想修改任意一个样式，都要花很多的时间和精力，而且还容易漏改或者改错。以上是两种常见的不科学的WEB客户端编程方式，这样的做法使得创建文档内容与文档表现形式分离的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的

4、标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出层叠样式表CSS。8.1.1 如何引入样式表当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：1、外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。2、内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过 标签定义内部样式表。body background-color: redp margin-left: 20px3、内联样式当特殊的样式需要应用到个别元素时，就可以使用内联

5、样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。This is a paragraph8.1.2 如何使用CSSCSS语法由三部分构成：选择器、属性和值：selector property: value选择器 (selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值（value）。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body color: blue上面这行代码的作用是将body元素内的

6、文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，不过建议每条声明的末尾都加上分号，好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：p text-align:center; color:red;建议每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：p text-align: center; color: black; font-fa

7、mily: arial;8.1.3 选择器我们想要通过CSS来控制HTML元素，首先我们要通过一定的方法找到这个元素。在CSS中通过选择器（selector）来定位元素。1、类型选择器类型选择器用来寻找特定类型的元素，比如段落、锚或是标题，只需要指定希望应用样式的元素的名称，类型选择器有时候也被称为元素选择器或简单选择器。pcolor:red;atext-decoration:underline;h1font-weight:bold;2、派生选择器派生选择器可以用来寻找特定元素的后代元素。比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：li s

8、trong font-style: italic; font-weight: normal; 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用我是斜体字。这是因为 strong 元素位于 li 元素内。我是正常的字体。在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。3、id 选择器id选择器可以选择标有特定id的HTML元素，id 选择器以#来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:gre

9、en;下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。这个段落是红色。这个段落是绿色。注意：id属性一般只能在每个HTML文档中出现一次。id就像人的名字，如果一个屋子里面有两个都叫李三的人，有人喊“李三”，你就不知道喊的是哪个了。同样道理在一个页面里，如果两个不同的元素拥有相同的id，也很容易混淆。虽然有可能在很大部分浏览器中多次使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能在某些浏览器中引发问题。id选择器也可以用于建立派生选择器，请看下面示例：#sidebar p font-style: italic; text-

10、align: right; margin-top: 0.5em;上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元。虽然被标注为sidebar的元素只能在文档中出现一次，但是这个id选择器作为派生选择器却可以被使用很多次：#sidebar p font-style: italic; text-align: right; margin-top: 0.5em;#sidebar h2 font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5;

11、 text-align: right;在这里，与页面中的其他p、h2元素明显不同的是，sidebar 内的p、h2元素得到了特殊的处理。4、类选择器在CSS 中，类选择器以一个点号显示：.center text-align: center在上面的例子中，所有class属性为center的HTML元素均为居中。在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守.center选择器中的规则。注意：类名的第一个字符不能使用数字！它无法在 Mozilla或Firefox中起作用。This heading will be center-alignedThis paragraph

12、 will also be center-aligned.和id选择器一样，类选择器也可被用作派生选择器：.fancy td color: #f60; background: #666;在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个div）元素也可以基于它们的类而被选择：td.fancy color: #f60; background: #666;在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会

13、是带有灰色背景的橙色。当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。注意：和id不一样，每个HTML文档中允许有多个元素的class属性是一样的，也就是说class可以反复使用。8.2 使用CSS的注意点通过前面的学习，你已经会使用简单的CSS来控制HTML文档的样式了，本节主要讲解CSS使用过程中的一些注意点，另外再探讨一下CSS的继承和层叠的特性。8.2.1 CSS单位CSS中很多属性的值是有单位的，CSS的单位包括长度单位和颜色单位。1、长度单位在CSS中，

14、长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。长度可以是绝对长度，也可以是相对长度。 CSS常用的绝对长度值有厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等等。绝对长度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。也就是说，绝对长度值最好用于打印机输出设备，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。相对长度就是需要定义尺寸的元素按照系统和浏览器默认大小为标准，相应地按比例缩放。这样就不会产生难以辨认的情况。百分比单位以及某些HTML标签

15、(如至等)就是一种相对长度。另外，CSS还支持下列三种长度的相对单位：em（当前字体中字母M的宽度）、ex（当前字体中字母X的高度）、px（一个象素的大小）。 使用em和ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大，在显示时，可通过比较当前字体中的M和X来确定。字体越大，所对应的em和ex也就越大。 以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度经常是以象素给出的。象素测量法通常也不是个好方法。首先，象素的大小依分辩率变化较大，大多数用户都会将显示器设置成尽可能高的分辩率，从而导致象素太小，而无法阅读。 2、颜色单位 适当地在不同的部

16、位使用不同的颜色，能使HTML页面充满生气，还可以通过颜色把读者的注意力吸引到关键的部分。 定义颜色值可以使用百分比值。在这种情况下，红、绿、蓝颜色值的等级用百分比数来确定。格式是：color:rgb(R%,G%,B%)。指定颜色的另一种方法是使用范围在0255之间的整数来设置。格式是color:rgb(128,128，128)。定义颜色的第三种方法是使用十六进制数组定义颜色。这种定义的方法对于经常进行程序设计的人来说比较熟悉。定义颜色时使用三个前后按顺序排列的十六进制数组表示，例如“#FC0EA8”。这种定义的方式就是形如#RRGGBB的格式。即在红、绿、蓝的位置上添上需要的十六进制值。定义

17、颜色最后一种方法也最简单的方法是指定颜色的名称，CSS有17个预先确定的颜色，它们是：aqua（水绿色）、black（黑色）、blue（蓝色）、fuchsia（紫红色）、gray（灰色）、green（绿色）、lime（柠檬绿色）、maroon（褐红色）、navy（藏青色）、olive（橄榄色）、orange（橙色）、purple（紫色）、red（红色）、silver（银色）、teal（青色）、white（白色）、yellow（黄色）8.2.2 CSS的继承及其问题根据CSS的规定，子元素从父元素继承属性。看看下面这条规则：body font-family: Verdana, sans-seri

18、f; 根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。通过 CSS 继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p、td、ul、ol、ul和li等），所有body的子元素，不需要再自行定义，都应该显示Verdana字体，子元素的子元素也一样。这在大部分的新版浏览器中，确实是这样的。但是在浏览器混战年代里，有时候未必如我们所愿。浏览器提供商（Microsoft、Netscape等）为了自身的利益，都没有遵守当时的一些标准。比方说，Netscape4就不支持继承；微软的IE直到IE6还存在部分不支持继承的问题。我们

19、又该如何面对这些问题呢？你可以通过使用一些冗余法则来处理旧式浏览器无法理解继承的问题。body font-family: Verdana, sans-serif;p, td, ul, ol, li, dl, dt, dd font-family: Verdana, sans-serif; 上面这么做虽然会有些浪费，但是如果需要使老的浏览器访问我们的网页不至于显示得很糟糕，就不得不这么做。如果你不希望从父元素中得到继承，比方说，你希望段落的字体是Times，而不是从body继承Verdana。你可以创建一个针对p的样式，来摆脱父元素的样式：body font-family: Verdana, s

20、ans-serif;td, ul, ol, ul, li, dl, dt, dd font-family: Verdana, sans-serif;p font-family: Times, Times New Roman, serif;8.2.3 层叠（Cascading）的意义对于CSS，一个重要的特性就是层叠Cascading。这个特性通过一定规则将多重样式将层叠为一个。记住，这和继承不是同一个概念。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。那么，当同一个HTML元素被不止一个样式定义时，会

21、使用哪个样式呢？一般而言，所有页面设计者的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中越往下优先级越低。 内联样式（在HTML元素内部） 外部样式表（通过链接导入）和内部样式表（位于标签内部） 浏览器缺省设置可以看出，内联样式（在HTML元素内部）拥有最高的优先权。另外，可以使用!important来提高优先级，加了!important的外部样式表比不加!important的内联样式优先级要高，但是比加了!important的内联样式优先级要低关于CSS的层叠性，还有一个需要注意的是：使用浏览器查看网页的用户，他们可以在浏览器中设置自己的样式表，比如IE可以通过“工具”“interne

22、t选项”“常规” “外观”“辅助功能”“用户样式表”来设置自定义样式表。当网页设计者和用户的样式表发生冲突，网页设计者的样式表的优先级会高于用户自定义的样式表。为了让我们的用户具有更大的自由度，可以通过!important来提高自定义的样式表的优先级，如果考虑用户和设计者的，那么层叠顺序还有以下顺序，越往下越低： 标记为!important的用户样式 标记为!important的页面设计者样式 设计者样式 用户样式 浏览器缺省样式当使用了多个样式表之后，样式表之间可能会争夺某个特定元素的控制权。在这些情况下，会根据选择器的特殊性，运用一定的算法规则，来决定该元素最终按照那个样式显示。这个算法通

23、过选择器的不同，算出一个值，值大的样式具有高的优先级。这个算法看起来有些复杂也比较难记，一般来说有这样的规则，越往下优先级越低： 元素的style属性，即内联样式，例如： 具有ID选择器的样式，例如：#content color:red; 具有类选择器的样式，例如：.content color:red; 具有类型选择器的样式，例如：p color:red;另外，如果两个样式的优先级相同，后定义的样式优先。这一点也很重要，比如在head部内标签中定义的样式在标签链接的外部样式之后，那么真正起作用的是标签内的样式。反过来head部内标签中定义的样式在标签链接的外部样式之前，最后起作用的是通过标签引

24、入的外部样式。8.2.4 绝对地址和相对地址CSS中有些属性的值是一个URL，比如背景图像。URL的写法有两种：绝对路径和相对路径。绝对路径时含服务器协议（在网页上通常是http:/或ftp:/）的完全路径。绝对路径包含的是精确位置而不用考虑当前文档的位置，但是如果目标文档被移动，则链接将无效。创建对当前站点以外文件的链接时必须使用绝对路径。 与绝对路径不同，相对路径自身并不包含完整的路径信息（例如不包含服务器协议），相对路径描述的是被引用文档和当前文档之间的相对位置关系（文档相对路径）或被引用文档和网站根目录之间的相对位置关系（根相对路径）。当在浏览器中点击某个使用相对路径的链接时，浏览器会

25、自动获取当前文档的服务器协议、地址和端口等信息，并将该信息和相对路径发送到服务器上，而服务器则根据当前文档位置和相对路径，计算出被引用文档的绝对位置并获取文档，最终将结果返回给浏览器。根相对路径以“/”开头（请注意，不是“”），是从当前站点的根目录到被引用文档的完整路径。例如，某个网站的根目录为/home/wwwroot，其下有一个gif图像/home/wwwroot/a/b/1.gif，则该图像的根相对路径为“/a/b/1.gif”。文档相对路径是指从当前文档所在目录访问被引用文档的路径。也就是说，相对路径描述的是当前文档所在目录和被引用文档所在目录的相对位置关系。例如，当前文档的物理路径是

26、/home/wwwroot/a/1.htm，而被引用文档的物理路径是/home/wwwroot/b/2.htm，第二个文档相对于第一个文档的相对路径就是“./b/2.htm”。在使用相对路径时，我们需要知道如何描述当前文档所在目录以及如何描述当前文档的上一级目录（父目录）。通常我们使用“./”或空描述当前文档所在目录，例如，当前文档为/home/wwwroot/a/1.htm，则“./2.htm”和“2.htm”都是一个指向“/home/wwwroot/a/2.htm”的相对路径。 在描述当前文档所在目录的上一级目录时，我们使用前缀“./”。还是上面的例子，如果相对路径为“./b/2.htm”

27、，则我们请求的是物理路径为“/home/wwwroot/b/2.htm”的文档。 “./”和“./”可以任意组合，例如，“././”代表当前目录的上一级目录的上一级目录。 在明白绝对路径和相对路径的概念和区别之后，我们还要了解什么时候使用它们的时机。一般来说，如果需要引用当前网站外部的文档和素材，我们应该使用绝对路径；而在引用当前网站内部的文档和素材时，我们应该使用相对路径。由于相对路径中不包含网站地址等信息，从而使得网站更容易移植（例如，更换网站域名）。一般来说，在制作内部链接时，我们应该尽量使用文档相对路径，而不是根相对路径，这样做的原因是在本地预览网站时，浏览器并不承认当前站点的根目录为

28、服务器，因此会导致链接错误的情况，使用文档相对路径则没有这样的问题。在CSS文件中书写相对路径：CSS文件是指在页面中引用的外部样式定义文件，该文件通常用于定义页面中各种html标记的显示效果。浏览器认为CSS文件是一个独立的文档，因此，在CSS中对素材的引用可以通过计算素材文件和该CSS文件之间的相对路径来实现，而与引用该CSS文件的页面所在的位置无关。例如，文档“/home/wwwroot/a/index.htm”中引用了CSS文件“/home/wwwroot/a/css/main.css”，而在该CSS中引用了素材“/home/wwwroot/a/images/1.jpg”，则在CSS中

29、对于该素材引用的相对路径应该是“./images/1.jpg”，而不能是“./images/1.jpg”或“images/1.jpg”。 8.2.5 其他注意点和技巧1、记得写引号提示：如果属性的值为若干单词，则要给值加引号：p font-family: sans serif;2、空格和大小写敏感大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被阅读和编辑：body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif;是否包含空格不会影响CSS在浏览器的工作效果，从这个角度来说CSS对大小写不敏感。但是存在一个例外：选择器中class和id名称对大小写是敏感的。3、选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h2,h3,h5,h6 color: green;4、同时使用两个class通常我们只能为元素指定一个class属性,但这并不等于你只能指定一个，你想指定多少就可以指定多少，例如：内容内容内容内容内容内容通过