CSS3+DIV网页样式与布局案例课堂（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.4 在HTML中调用CSS的方法

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

2.4.1 案例3——行内样式

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

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

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

【例2.3】（案例文件：ch02\2.3.html）

<!DOCTYPE html>
<html>
<head>
<title>行内样式</title>
</head>
<body>
<p style="color:red;font-size:20px;text-decoration:underline;text-
align:center">此段落使用行内样式修饰</p>
<p style="color:blue;font-style:italic">群山万壑赴荆门，生长明妃尚有村。一去紫台连
朔漠，独留青冢向黄昏。画图省识春风面，环佩空归夜月魂。千载琵琶作胡语，分明怨恨曲中论。
</p>
</body>
</html>

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

图2-9 行内样式显示

注意

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

2.4.2 案例4——内嵌样式

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

其格式如下。

技巧

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

【例2.4】（案例文件：ch02\2.4.html）

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

图2-10 内嵌样式显示

注意

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

2.4.3 案例5——链接样式

链接样式是CSS中使用频率最高，也是最实用的方法。它很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML代码和CSS代码的完全分离，使前期制作和后期维护都十分方便。

链接样式是指在外部定义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样式表没有在同一路径下，则需要指定样式表的绝对路径或引用位置。

【例2.5】（案例文件：ch02\2.5.html）

<!DOCTYPE html>
<html>
<head>
<title>链接样式</title>
<link rel="stylesheet" type="text/css" href="2.5.css" />
</head><body>
<h1>CSS的链接样式</h1>
<p>荆溪白石出，天寒红叶稀。山路元无雨，空翠湿人衣。</p>
</body>
</html>

【例2.5】（案例文件：ch02\2.5.css）

h1{text-align:center;}
p{font-weight:29px;text-align:center;font-style:italic;}

在IE 11.0浏览器中浏览效果如图2-11所示，可以设置标题和段落以不同样式显示，标题居中显示，段落以斜体居中显示。

图2-11 链接样式显示

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

提示

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

2.4.4 案例6——导入样式

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

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

导入外部样式表相当于将样式表导入到内部样式表中，其方式更有优势。导入外部样式表必须在样式表的开始部分、其他内部样式表上面。

【例2.6】（案例文件：ch02\2.6.html）

<!DOCTYPE html>
<html>
<head>
<title>导入样式</title>
<style>
@import "2.6.css"
</style>
</head>
<body>
<h1>江雪</h1>
<p>千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。</p>
</body>
</html>

【例2.6】（案例文件：ch02\2.6.css）

h1{text-align:center;color:#0000ff}
p{font-weight:bolder;text-decoration:underline;font-size:20px;}

在IE 11.0浏览器中浏览效果如图2-12所示，可以设置标题和段落以不同样式显示，标题居中显示，颜色为蓝色，段落以字号大小20px并加粗显示。

图2-12 导入样式显示

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

<style>
@import "2.6.css"
@import "test.css"
</style>
上一章目录下一章