6.3 在HTML5中使用CSS3的方法

CSS样式表能很好地控制页面显示、分离网页内容和样式代码。它控制HTML5页面效果的方式通常包括行内样式、内嵌样式、链接样式和导入样式。

6.3.1 行内样式

行内样式是所有样式中比较简单、直观的方法，它直接把CSS代码添加到HTML文件中，是作为HTML的标记属性存在的。通过这种方法，可以很简单地对某个元素单独定义样式。

使用行内样式方法直接在HTML标记中使用style属性，该属性的内容就是CSS的属性和值，例如：

     <p style="color:red">段落样式</p>

【例6.3】（实例文件：ch06\6.3.html）

在IE 11.0中的浏览效果如图6-9所示，可以看到2个p标记中都使用了style属性，并且设置了CSS样式，各个样式之间互不影响，分别显示自己的样式效果。第一个段落为红色字体，居中显示且带有下画线。第二个段落为蓝色字体，并以斜体显示。

图6-9 行内样式显示

尽管行内样式简单，但这种方法并不常用，因为这样添加无法完全发挥样式表“内容结构和样式控制代码分离”的优势，而且这种方式也不利于样式的重用。如果为每一个标记都设置style属性，那么后期维护成本会过高，网页也容易过胖，故不推荐使用。

6.3.2 内嵌样式

内嵌样式就是将CSS样式代码添加到<head>与</head>之间，并且用<style>和</style>标记进行声明。这种写法虽然没有完全实现页面内容和样式控制代码完全分离，但是可以用于设置一些比较简单且需要样式统一的页面，其格式如下所示。

     <head>
     <style type="text/css">
     p{color:red;font-size:12px;}
     </style>
     </head>

有些较低版本的浏览器不识别<style>标记，不能将样式正确地应用到页面显示上，而是直接将标记中的内容以文本的形式显示。为了解决此类问题，可以使用HMTL注释将标记中的内容隐藏。如果浏览器能够识别<style>标记，则标记内被注释的CSS样式定义代码依旧能够发挥作用。


【例6.4】（实例文件：ch06\6.4.html）

在IE 11.0中的浏览效果如图6-10所示，可以看到2个段落都被CSS样式修饰且样式保持一致，均为段落居中、加粗并以橙色字体显示。

图6-10 内嵌样式显示

在上面的例子中，所有CSS编码都在style标记中，方便了后期维护，页面与行内样式相比较也大大瘦身了。如果一个网站拥有很多页面，且对于不同页面段落都希望采用同样的风格时，内嵌方式就显示有点麻烦。此种方法只适用于特殊页面设置单独的样式风格。

6.3.3 链接样式

链接样式是CSS中使用频率最高，也是最实用的方法。它可以很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML代码和CSS代码的完全分离。使前期制作和后期维护都十分方便。同一个CSS文件，根据需要可以链接到网站中所有的HTML页面上，使得网站整体风格统一并且后期维护的工作量也大大减少。

链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过<link>标记链接到页面中。该链接语句必须放在页面的<head>标记区，代码如下所示。

     <link rel="stylesheet" type="text/css" href="1.css" />

（1）rel表示链接到样式表，其值为stylesheet。

（2）type表示样式表类型为CSS样式表。

（3）href指定了CSS样式表文件的路径，此处表示当前路径下名称为1.css文件。


这里使用的是相对路径。如果HTML文档与CSS样式表没有在同一路径下，就需要指定样式表的绝对路径或引用位置。


【例6.5】（实例文件：ch06\6.5.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>链接样式</title>
     <link rel="stylesheet" type="text/css" href="6.5.css"/>
     </head>
     <body>
     <h1>CSS学习</h1>
     <p>此段落使用链接样式修饰</p>
     </body>
     </html>

（实例文件：ch06\6.5.css）

     h1{
     text-align:center; /*设置标题居中显示*/
     }
     p{
     font-weight:29px;  /*设置字体的粗细*/
     text-align:center; /*设置段落居中显示*/
     font-style:italic; /*设置字体样式为斜体*/
     }

在IE 11.0中的浏览效果如图6-11所示，其中标题和段落以不同样式显示，标题居中显示，段落以斜体居中显示。

图6-11 链接样式显示

链接样式的最大优势就是将CSS代码和HTML代码完全分离，并且同一个CSS文件能被不同的HTML文件链接使用。

技巧提示

在设计整个网站时，为了实现相同的样式风格，可以将同一个CSS文件链接到所有的页面中去。如果整个网站需要修改样式，只修改CSS文件即可。

6.3.4 导入样式

导入样式和链接样式基本相同，都需要创建一个单独的CSS文件，然后将其引入到HTML文件中，只不过语法和运作方式有所差别。采用导入样式是在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌效果。链接样式则是在HTML标记需要样式风格时才以链接方式引入。

导入外部样式表是指在内嵌样式表的<style>标记中，使用@import导入一个外部的CSS文件，例如：

     <head>
     <style type="text/css">
     <!--
       @import "1.css"
     -->
     </style>
     </head>

导入外部样式表相当于将样式表导入到内嵌样式表中，其中@import必须在样式表的开始部分（位于其他样式表代码的上面）。


【例6.6】（实例文件：ch06\6.6.html）

（实例文件：ch06\6.6.css）

在IE 11.0中的浏览效果如图6-12所示，其中标题和段落以不同样式显示，标题居中显示、颜色为蓝色，段落的字体设置为加粗、下画线，大小为20px。

图6-12 导入样式显示

导入样式与链接样式比较，最大的优势就是可以一次导入多个CSS文件，其格式如下所示。

     <style>
     @import "6.6.css"
     @import "test.css"
     </style>

6.3.5 优先级问题

如果同一个页面采用了多种CSS样式表方式（例如同时使用行内样式、链接样式和内嵌样式），且这几种方式共同作用于同一属性，就会出现优先级问题。例如，使用内嵌样式设置字体为宋体，使用链接样式设置字体为红色，那么二者会同时生效，但如果都设置字体颜色且颜色不同，那么哪种样式的设置才有效呢？

1．行内样式和内嵌样式比较

例如，有这样一种情况：

     <style>
     p{color:red}
     </style>
     <p style="color:blue">段落应用样式</p>

在样式定义中，段落标记<p>匹配了两种样式规则，一种使用内嵌样式定义颜色为红色，一种使用p行内样式定义颜色为蓝色，而在页面代码中，该标记使用了类选择符。这时，标记内容最终会以哪一种样式显示呢？


【例6.7】（实例文件：ch06\6.7.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>优先级比较</title>
     <style>
     p{color:red}
     </style>
     </head>
     <body>
     <p style="color:blue">优先级测试</p>
     </body>
     </html>

在IE 11.0中的浏览效果如图6-13所示，段落以蓝色字体显示，可以看出行内样式优先级大于内嵌样式。

图6-13 优先级显示

2．内嵌样式和链接样式比较

以相同例子测试内嵌样式和链接样式优先级。将相应的颜色样式代码单独放在一个CSS文件中，以供链接样式引用。


【例6.8】（实例文件：ch06\6.8.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>优先级比较</title>
     <link href="6.8.css" type="text/css" rel="stylesheet">
     <style>p{color:red}
     </style></head>
     <body>
     <p>优先级测试</p>
     </body>
     </html>

（实例文件：ch06\6.8.css）

     p{color:yellow}

在IE 11.0中的浏览效果如图6-14所示，段落以红色字体显示，可以看出内嵌样式优先级大于链接样式。

图6-14 优先级测试

3．链接样式和导入样式

现在进行链接样式和导入样式的优先级比较。分别创建两个CSS文件，一个作为链接，一个作为导入。


【例6.9】（实例文件：ch06\6.9.html）

（实例文件：ch06\6.9_1.css）

     p{color:green}

（实例文件：ch06\6.9_2.css）

     p{color:purple}

在IE 11.0中的浏览效果如图6-15所示，段落以绿色显示。可以看出链接样式优先级大于导入样式。

图6-15 优先级比较

通过比较，CSS样式表方式的优先级顺序由大到小依次为行内样式、内嵌样式、链接样式、导入样式。

上一章目录下一章