1.3 CSS技术
随着网页制作技术的不断发展，单调的 HTML属性样式已经无法满足网页设计的需求。开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS 可以在不改变原有 HTML 结构的情况下，增加丰富的样式效果，极大地满足了开发者需求。本节将详细讲解CSS技术的相关知识。
1.3.1 初识CSS
使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为将所有的样式都写在标签中，这样既不利于代码阅读，又使将来的代码维护非常困难。如果希望页面美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。
CSS（Cascading Style Sheets，层叠样式表）是一种用于（增强）控制网页样式并允许将样式信息与网页内容分离的标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本格式（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）和版面的布局等外观显示样式。
CSS定义的规则具体如下：
选择器{属性1：属性值1； 属性2：属性值2； 属性3：属性值3;……}
在上述样式规则中，选择器用于指定CSS样式作用的HTML对象，大括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性：属性值”形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个键值对之间用“;”（英文分号）进行分隔。
下面通过CSS样式对<div>标签进行设置，具体示例如下：
div{ border:1px solid red; width:600px; height:400px;}
在上述代码中，div为选择器，表示CSS样式作用的HTML对象；border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值，分别表示该边框为1像素、实心边框线、红色。
在CSS中，通常使用像素（px）作为计量文本、边框等元素的标准量，px 是相对于显示器屏幕分辨率而言的，而百分比（%）是相对于父对象而言的。例如，一个元素呈现的宽度是400px，子元素设置为50%，那么子元素所呈现的宽度为200px。
在CSS中颜色的取值方式有以下3种。
● 预定义的颜色值，例如red、green、blue等。
● 十六进制形式的值，例如#FF0000、#FF6600、#29D794等。实际工作中，十六进制形式的值是常用的定义颜色的方式。
● RGB代码，例如红色可以用rgb(255,0,0)或rgb(100%,0%,0%)来表示。如果使用RGB代码百分比方式取颜色值，即使值为0，也不能省略百分号，必须写为0%。
1.3.2 CSS样式的引用方式
要想使用CSS修饰网页，就需要在HTML文档中引入CSS。CSS提供了4种引用方式，分别为行内式、内嵌式、外链式和导入式。下面分别对这4种引用方式进行介绍。
1． 行内式
行内式也被称为内联式，可通过标签的style属性设置标签的样式。行内式基本语法格式如下：
<标签名 style=＂属性1：属性值1；属性2：属性值2；属性3：属性值3;＂>内容</ 标签名>
在上述语法中，style是标签的属性，实际上任何HTML标签都拥有style属性，用于设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式CSS只对其所在的标签及嵌套在其中的子标签起作用。
通常CSS位于<head>头部标签中，但是行内式CSS位于<html>根标签中。例如，下面的示例代码即为行内式CSS样式的写法。
<h1 style=＂font-size:20px; color:blue; ＂>使用行内式CSS修饰一级标题的字体大小和颜色</h1>
在上述代码中，使用<h1>标签的style属性设置行内式CSS样式，用于修饰一级标题的字体和颜色。行内式CSS展示效果如图1-16所示。
图1-16 行内式CSS展示效果
需要注意的是，行内式 CSS 是通过标签的属性来控制样式的，这样并没有做到结构与样式分离，所以不推荐使用。
2． 内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并用<style>标签定义，其基本语法格式如下：
<head>
<style type=＂text/css＂>
选择器 {属性1：属性值1; 属性2：属性值2; 属性3：属性值3;}
</style>
</head>
在上述语法中，<style>标签一般位于<head>标签中的<title>标签之后，因为浏览器是从上到下解析代码的，为便于 CSS 代码提前被加载和解析应把其放在头部，以避免网页内容加载后没有样式修饰的问题。在<style>标签中，只有设置type的属性值为“text/css”，浏览器才知道<style>标签包含的是CSS代码。下面通过一个案例学习如何在HTML文件中使用内嵌式CSS。
在chapter01文件夹中创建一个名称为cssDemo01的HTML文件，其关键代码如文件1-11所示。
文件1-11 cssDemo01.html
1 <head>
2 <title>使用内嵌式CSS</title>
3 <style type=＂text/css＂>
4 /＊定义标题标签居中对齐＊/
5 h2{ text-align:center;}
6 /＊定义div标签样式＊/
7 div{ border:1px solid #CCC; width:300px; height:80px; color:purple;
8 text-align:center;}
9 </style>
10 </head>
11 <body>
12 <h2>内嵌式CSS样式</h2>
13 <div>
14 使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，
15 title标签之后。
16 </div>
17 </body>
在文件1-11中，HTML文档的头部使用style标签定义内嵌式CSS样式，第5行代码使用了标题标签<h2>设置标题，第7行和第8行代码定义了<div>标签的样式。使用浏览器打开文件1-11，显示效果如图1-17所示。
图1-17 文件1-11的运行结果
内嵌式CSS只对其所在的HTML页面有效，因此仅设计一个页面时，使用内嵌式CSS 是个不错的选择。但在设计网站时，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。
3． 外链式
外链式也叫链入式，是将所有的样式放在一个或多个以．css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文件中。外链式CSS的基本语法格式如下：
<head>
<link href=＂CSS文件的路径＂ type=＂text/css＂ rel=＂stylesheet＂ />
</head>
在上述语法中，<link>标签需要放在<head>头部标签中，并且必须指定<link>标签的3个属性，具体如下。
● href：定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。
● type：定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。
● rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
下面通过修改文件1-11演示外链式CSS的引用方式，具体步骤如下。
（1）创建样式表
在chapter01文件夹中创建一个名称为style的CSS文件，使用记事本打开后，在文件中编写如下代码：
<style type=＂text/css＂>
/＊定义标题标签居中对齐＊/
h2{ text-align:center;}
/＊定义div标签样式＊/
div{ border: 1px solid #CCC; width: 300px; height: 80px; color:purple;
text-align:center;}
</style>
（2）创建HTML文档
在chapter01文件夹中创建一个名称为cssDemo02的HTML文件，其关键代码如文件1-12所示。
文件1-12 cssDemo02.html
1 <head> 2 <title>使用外链式CSS</title> 3 <link href=＂style.css＂ type=＂text/css＂ rel=＂stylesheet＂ /> 4 </head> 5 <body> 6 <h2>外链式CSS样式</h2> 7 <div> 8 外链式也叫链入式，是将所有的样式放在一个或多个以．css为扩展名的外部样式 9 表文件中。 10 </div> 11 </body>
在上述代码中，第3行代码使用<link>标签链入了style.css文件，代替了内嵌式的<style>标签。使用浏览器打开文件cssDemo02.html，显示结果如图1-18所示。
图1-18 文件1-12的运行结果
从图1-18中可以看到，使用外链式与内嵌式引入CSS文件的显示效果是一样的。在实际开发中，外链式是使用频率最高、最实用的引入方式，它将HTML代码与CSS代码分离为两个或多个文件，实现了结构与表现的完全分离，同一个CSS文件可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link>标签链接多个CSS样式表，极大提高了网页开发的工作效率。
4． 导入式
导入式与外链式相同，都是通过引入外部样式表文件来实现的。导入式CSS对HTML头部文档应用<style>标签，并在<style>标签内的开头处使用@import语句。导入式CSS的基本语法格式如下：
<style type=＂text/css＂ > @import url(CSS文件路径)；或@import ＂CSS文件路径＂; /＊在此还可以存放其他CSS样式＊/ </sty1e>
在上述语法格式中，<style> 标签内还可以存放其他的内嵌样式；@import 语句需要位于其他内嵌样式的上面。
如果想在文件1-12中使用导入式CSS，只需把HTML文档的<link >标签代码替换成下面代码即可。
<style type=＂text/css＂> @import ＂style.css＂; </style>
或者
<style type=＂text/css＂> @import url(style.css); </style>
虽然导入式CSS与外链式CSS功能基本相同，但是大多数网站采用外链式CSS引入外部样式表，主要原因是两者的加载时间和顺序不同。当一个页面被加载时，<link>标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等页面全部下载完才被加载。因此，当用户的网速较慢时，会先显示没有CSS修饰的网页，这样会造成不好的用户体验，所以大多数网站采用外链式CSS。
1.3.3 CSS选择器和常用属性
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一样式任务的部分被称为选择器。下面将对CSS选择器进行介绍。
1． 标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的样式。标签选择器的基本语法格式如下：
标签名{属性1：属性值1； 属性2：属性值2； 属性3：属性值3; }
在上述语法中，所有的HTML标签都可以作为标签选择器的标签名，例如<body>标签、<h1>标签、<p>标签等。用标签选择器定义的样式对页面中该类型的所有标签都有效，这是它的优点，但同时也是其缺点，因为这样不能设计差异化样式。
2． 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1：属性值1； 属性2：属性值2； 属性3：属性值3; }
在上述语法中，类名即为HTML页面中元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
3. id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1：属性值1； 属性2：属性值2； 属性3：属性值3; }
在上述语法中，id名即为HTML页面中元素的id属性值，大多数HTML元素都可以定义id属性。元素的id值是唯一的，只能对应文档中某一个具体的元素。
4． 通配符选择器
通配符选择器用“＊”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。通配符选择器的基本语法格式如下：
＊{属性1：属性值1； 属性2：属性值2； 属性3：属性值3; }
例如下面使用通配符选择器定义的样式能够清除所有HTML标签的默认边距。通配符选择器用法的示例代码如下：
＊ {
margin: 0; /＊ 定义外边距＊/
padding: 0; /＊ 定义内边距＊/
}
在实际网页开发中，不建议使用通配符选择器，因为它设置的样式对所有的HTML标签都生效，这是其优点也是其缺点，因为这样不能设计差异化样式。
了解了几种选择器的语法结构后，下面通过一个案例学习这几种选择器的使用。在chapter01文件夹中创建一个名称为cssDemo03的HTML文件，其主要代码如文件1-13所示。
文件1-13 cssDemo03.html
1 <html>
2 <head>
3 <title>选择器</title>
4 <style type=＂text/css＂>
5 /＊ 1．类选择器的定义＊/
6 .red {
7 color: red;
8 }
9 .green {
10 color: green;
11 }
12 .font18 {
13 font-size: 18px;
14 }
15 /＊ 2.id选择器的定义＊/
16 #bold {
17 font-weight: bold;
18 }
19 #font24 {
20 font-size: 24px;
21 }
22 </style>
23 </head>
24 <body>
25 <!--类选择器的使用-->
26 <h1 class=＂red＂>标题一：class=＂red＂，设置文字为红色。</h1>
27 <p class=＂green font18＂>
28 段落一： class=＂green font18＂，设置文字为绿色，字号为18px。
29 </p>
30 <p class=＂red font18＂>
31 段落二： class=＂red font18＂，设置文字为红色，字号为18px。
32 </p>
33 <!--id选择器的使用-->
34 <p id=＂bold＂>段落1:id=＂bold＂，设置粗体文字。</p>
35 <p id=＂font24＂>段落2:id=＂font24＂，设置字号为24px。</p>
36 <p id=＂font24＂>段落3:id=＂font24＂，设置字号为24px。</p>
37 <p id=＂bold font24＂>段落4:id=＂bold font24＂，同时设置粗体和字号24px。</p>
38 </body>
39 </html>
文件1-13中，第4～22行代码在<style>标签内分别定义了类选择器和id选择器。第6～14行代码使用了3个类选择器，第6～8行代码用“.red”选择器将页面中class属性值为red的文字颜色设置为红色，第9～11行代码用“.green”选择器将页面中class属性值为green的文字颜色设置为绿色，第12～14行代码用“.font18”选择器将页面中class属性值为font18的文本字号设置为18像素。第16～21行代码使用了2个id选择器，第16～18行代码使用“#bold”选择器将页面中id属性值为bold的文本字体变为粗体文字，第19～21行代码使用“#font24”选择器将页面中id属性值为font24的文本字号设置为24像素。
使用浏览器打开文件1-13，显示结果如图1-19所示。
图1-19 文件1-13的运行结果
在图1-19中，“标题一⋯⋯”和“段落二⋯⋯”的文本内容均显示为红色，这是因为第26行代码和第30行代码都调用了名为red的类选择器，由此可见同一个类选择器可以被多个标签引用。
图1-19中，“段落2⋯⋯”和“段落3⋯⋯”的字号均为24像素，这是由于它们引用了相同的id选择器，虽然浏览器并没有报错，但是这种做法是不被允许的，因为在JavaScript等脚本语言中id值是唯一的。
图1-19中，“段落4⋯⋯”没有显示任何CSS样式，这意味着同一个标签对象不能同时引用多个id选择器，例如id="bold font24"的引用方式是无效的，HTML标签不会显示任何样式。如果一个标签想要使用多个样式，可以使用类选择器。
除了选择器，CSS还提供了很多属性来丰富HTML标签的样式。CSS常用属性如表1-1所示。
表1-1 CSS常用属性
