3.3 HTML网页应用CSS样式的方法_HTML5+CSS3+JavaScript 从入门到项目实践（超值版）-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

3.3 HTML网页应用CSS样式的方法

CSS可以控制HTML文档的显示，但在控制文档显示之前，需要在文档中引入CSS样式，HTML提供了4种引入方式，包括行内样式、内嵌样式、链接样式和导入样式。

3.3.1 使用行内样式表

行内样式是最为简单的CSS设置方式，需要给每一个标签都设置style属性。它和样式所定义的内容在同一代码行内，通常用于精确控制一个HTML元素的表现，代码如下：

      <p style="color:red">行内样式表</p>

【例3-1】（实例文件：ch03\Chap3.1.html）行内样式表。

相关的代码实例请参考Chap3.1.html文件，在IE浏览器中运行的结果如图3-2所示。

图3-2 行内样式表作用效果

这种样式表不经常用，CSS样式与HTML结构没有分离，导致代码冗余，并且不利于维护。

3.3.2 使用内部CSS

内部CSS样式表一般是将CSS写在<head></head>标签中，并使用<style></style>标签进行声明，代码如下：

      <head>
      <style>
      ...
      </style>
      </head>

【例3-2】（实例文件：ch03\Chap3.2.html）内部样式表。

相关的代码实例请参考Chap3.2.html文件，在IE浏览器中运行的结果如图3-3所示。

图3-3 内部样式表作用效果

3.3.3 引入外部样式表

引入外部样式表是使用频率最高、也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便。

引入外部样式表是指在外部定义CSS样式表并形成以“.css”为扩展名的文件，然后在页面中通过<link>引入页面中，代码如下：

      <link rel="stylesheet" href="style1"/>

● rel：指定引入样式表，其值为stylesheet。

● href指定了CSS样式表的位置，此处表示当前路径下名称为style1.css文件。

【例3-3】（实例文件：ch03\Chap3.3.html）引入外部样式表。

      <!DOCTYPE html>
      <html>
      <head>
         <meta charset="UTF-8">
         <title>Title</title>
         /*引入style1.css文件*/
         <link rel="stylesheet" href="style1.css">
      </head>
      <body>
      <p>导入外部样式表</p>
      <p>导入外部样式表</p>
      <p>导入外部样式表</p>
      </body>
      </html>

引入的外部样式表style1.css代码：