搜索
CSS简介 CSS样式的定义及使用 CSS选择器分类 样式表的注释及继承 CSS样式的优先级 CSS属性详解 CSS滤镜CSS层叠样式表第章CSS是CascadingStyleSheets英文单词的缩写，中文意思就是层叠样式表。CSS是由W3C组织指定的一种非常实用的网页元素定义规则。CSS能让网页制作者有效地指定和改善网页的显示效果。CSS是对HTML的补充，利用CSS可以节省许多重复性的格式设定。CSS除了可以轻松地获知网页元素的显示位置和格式外，还能产生滤镜、图像淡化、网页淡入淡出的渐变效果。JavaScript从入门到精通·52·3.1CSS简介在样式表出现之前，Web页面设计者只能使用各个HTML标签提供的标准格式，对于文本、段落以及其他一些元素的展示没有多少变化性和灵活性。样式表的出现改变了这种状况，使Web设计者能够控制颜色、字体、边界以及各个HTML对象的多个方面。这种强大的功能使Web页面的创建更丰富、更亲切。样式表可以看作是一个显示样本，用来配合标记语言达到在浏览器中显示文件的效果。当浏览器读取到标记语言内指定的样式表后，浏览器将按照样式表中的规则来显示标记语言文件。3.1.1CSS的简介在HTML文档中，尽管可以通过一些文本格式标签来达到控制文本显示效果的作用，但它们的功能有限。例如，在一个HTML文档中有几十张图片，设计者需要将所有图片的边距都修改为10像素，那么通常的做法只能是手工逐个修改img标签的属性，耗费了大量的重复劳动。这个弊端可以用CSS样式表来解决，通过将显示和结构分开的方法，在修改样式时甚至可以不用打开文档本身。当浏览器读取到HTML文档内所指定的样式表后，浏览器将按照样式表中定义的规则来显示该文档。为了更好地体会CSS的工作方式，首先举一个简单的例子，其中包含了一个CSS规则的定义。示例代码如下：htmlheadtitle使用CSS/title/headbodystyle=font-size:32px;color:red;font-family:宋体;background-color:gray;text-decoration:underlinehelloword!!!/body/html代码运行结果如图3-1所示。图3-1使用CSS显示文本从图3-1的设计代码中可以看出，在body标签中对要显示的文本进行了显示格式的设置，如字第3章CSS层叠样式表·53·体、颜色、背景等。除了style关键字外，文档中的其他部分和普通的HTML文档一样。只要修改style中设置的具体规则，即可方便地改变整个文档的样式和显示效果。3.1.2CSS的特点在HTML文档中使用CSS样式表具有如下几方面的优点。简化HTML文件的建立：将HTML文档与样式表分别建立。在建立HTML文档时就不需要考虑文件的显示方式，而专心于其内容的组织，多注意文档的结构而不是显示效果。这样在建立HTML文档时自然简单得多。独立性与灵活性：将HTML文档与样式表分开建立，这样两者之间具有独立性。要改变内容时，只需要修改HTML文档，而要改变显示效果时，只需要改变样式表即可。样式表的重复利用：由于HTML文档与样式表分开建立，这样一个HTML文档可以使用不同的样式表，从而使外观很方便地变化。同样，多份HTML文档也可以使用同一份样式表，从而使这些文档都能呈现相似的效果与风格。3.2CSS样式的定义及使用无论用何种方式定义CSS样式，都必须首先设置样式表默认语言。设计者需要使用meta标签定义文档的默认样式表语言，meta标签放置在head标签中，语法格式如下：metahttp-equiv=Content-Style-Typecontent=text/cssmeta标签通常应用于文档的开头部分，其中的http-equiv属性用来在HTML文档中模拟HTTP协议的响应消息头，当浏览器读取到的网页文件具有http-equiv属性的meta标签时，会用处理服务器发送的响应消息头一样的方式来对待它。content属性值是对http-equiv的设置进行补充说明的信息。从本章3.1节的实例代码中可以看到，CSS样式在网页文档中通过style标签来定义，但在实际应用中，根据CSS规则在文档中所处的位置不同，CSS样式表的定义方法也有多种，主要有以下4种常用的定义方式。3.2.1内联样式表方式内联样式表方式的定义很简单，只需要在每个相关的HTML标签后书写CSS属性即可，这种方式很直接，例如，规定一个表格中的字为红色，字体大小为10像素，则可以直接在table标签后书写CSS属性：tablestyle=color:red;font-size:10pt其中，style表示CSS样式的规则，引号内部的是相应的属性设置。使用内联样式表的方式，可以直接将定义的规则应用到包含它的HTML标签上。图3-1的代码实例，就是利用内联式样式表来控制JavaScript从入门到精通·54·文本的显示效果。但使用内联样式表仍有一些明显的不足，如果要将同样的样式风格设置到网页中所有的表格中，就需要对每个table标签都进行重复的设置，所以这种方式主要用于对某个具体标签进行具体调整。3.2.2嵌入样式表方式嵌入样式表方式是在网页文档的头部（head和/head标签对之间）定义一个style和/style标签对，在其中间进行CSS样式规则的定义。示例代码如下：headstyletype=text/cssmedia=screen,projection!--p(font-size:20pt;color:blue;font-family:宋体;list-style-type:circle;text-decoration:underline)--/style/head上述代码中，style标签定义了CSS样式规则，其中type属性给出了目标资源的MIME类型，例如，HTML文档的MIME类型是text/html，CSS样式表文件的MIME类型是text/css，JavaScript文件的MIME类型是text/javascript。media属性用于指定目标资源被接受的介质或媒体，即网页文档的输出方式，其中默认的属性值是screen，表示提交到计算机屏幕，projection则表示提交到投影仪。上述代码中，在style和/style标签对中定义的样式规则将应用到网页中所有的p标签，网页编写人员无须再对具有相同样式风格的每个段落标签都进行重复设置，这是嵌入样式表一个很大的优点。3.2.3外部样式表方式熟悉JavaScript样式表后，对于以前多次使用的CSS样式表，使用外部样式表方式，不需要再重新输入样式表的定义即可重复使用。这样就能做到一次定义样式表，然后多次重复使用，还可以只修改一个样式表文件即可改变多个文档的样式。上面讲的嵌入样式表中的style和/style标签之间的CSS样式规则语句，可以放置在一个单独的外部文件中，这个外部文件被称为外部样式表文件，其扩展名为.css。一个外部样式表文件可以通过HTML的link标签链接到HTML文档中，链接进HTML文档的.css文件中的样式规则定义语句，按照和嵌入样式表中的样式规则定义语句一样的方式对HTML文档发挥作用。如果要将上面的嵌入样式表修改为外部样式表的方式实现，首先应编写一个test.css文件，文件的代码如下：p{font-size:20pt;color:blue;font-family:宋体;list-style-type:circle;text-decoration:underline}接着编写一个要使用这个样式表文件的网页文件，假设网页文件与test.css文件放置在相同的目录下，网页文件中的内容如下：第3章CSS层叠样式表·55·htmlheadlinkrel=stylesheethref=test.csstype=text/cssmedia=screen/headbodypthisisacsstest./p/body/html上述代码中，link标签中的rel属性定义了link所链接的两个资源之间的关系类型，属性href包含着第二个资源的URL，其中rel表示链接源在当前文档中定义，href属性定义了链接目标。如果要为整个网站定义通用的样式风格，也就是同样的样式风格设置要被应用到很多的网页时，使用外部样式表是昀好的办法。网页设计者仅需要改变一个文件即可改变整个网页的外观。大多数浏览器会将外部样式表文件保存在缓冲区中，从而加快网站的浏览速度。因此，相比前面的两种样式表而言，外部样式表还能够减小每个网页的大小，让网页瘦身。3.2.4局部特定样式表方式对于一段定义好样式的文本，如果只想改变其中一小部分，而不希望改变其他逻辑和物理格式标志，可以利用span标签来解决。span…/span标签对用来包围要采用特殊样式的局部文本，在不影响整体效果的嵌套下，把局部凸现出来。通过下面的实例代码，可以看出span标签与前面的嵌入样式表方式相结合来控制文本的显示效果，具体代码如下：htmlheadtitle样式表应用/titlestyletype=text/css!--p{font-size:12pt;background-color:pink;color:blue;font-family:宋体;list-style-type:circle;text-decoration:underline;};.highlight{color:red;};--/style/headbodyp利用样式规则p来控制段落（利用span标签控制局部文本）/pp利用样式规则p来控制段落SPANclass=highlight（利用span标签控制局部文本）/SPAN/pp利用样式规则p来控制段落（利用span标签控制SPANclass=highlight局部文本/SPAN）/p/body/html/body代码运行结果如图3-2所示。通过分析上述代码可以看出，在文档头部，利用嵌入样式表方式定义了两个CSS规则，第一个属于HTML标签选择器，第二个属于类选择器（选择器的用法在下面会详细介绍）。在body标签内，p标签即可利用定义好的第一条规则来控制所有的段落文本的显示，如果这时希望改变局部某些文字的格式，可以引入span…/span标签对，对局部文本进行“包围”，并通过span标签的class属性，引用已经定义好的第二条规则（属于类选择器），完成局部文本的格式变化，具体如图3-2所示。JavaScript从入门到精通·56·图3-2样式表应用3.3CSS选择器分类通过对CSS样式表几种定义方式的了解，可以看出，在定义的每条CSS规则时基本格式如下：selector{property:value;property:value;……}当定义一条样式规则时，必须指定接受这条样式规则作用的网页标签，在一条规则中定义的网页标签就是选择器（selector）；property是指那些将要被修改的样式风格名称，即CSS属性，如color、font-size等；value表示property的值，即CSS属性值。下面主要介绍以下3种主要类型的选择器（selector）。3.3.1HTML标签选择器HTML标签，如p、td等，如果在CSS中将某个HTML标签定义成了选择器，那么在CSS所应用的网页中，所有的这个HTML标签都会按照相应的样式规则定义来进行显示。图3-2的代码实例中，在头部标签对head…head之间，就定义了一条HTML标签选择器类型的规则，具体代码如下：p{font-size:12pt;backgr