1.2 CSS技术
1.2.1 简介
CSS 是 Cascading Style Sheet 的缩写，译作“层叠样式表单”，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在实际开发中，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS定义的规则具体如下：
选择器{属性1：属性值1； 属性2：属性值2； 属性3：属性值3;}
在上述的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。
接下来通过CSS样式对<div>标记进行设置，具体示例如下：
div{ border: 1px solid red; width: 600px; height: 400px;}
上面的代码就是一个完整的CSS样式。其中，div为选择器，表示CSS样式作用的HTML对象；border、width和height为CSS属性，分别表示边框、宽度和高度，其中，border属性有3个值“1px solid red;”分别表示该边框为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.2.2 CSS样式的引用方式
要想使用CSS修饰网页，就需要在HTML文档中引入CSS。引入CSS的方式有4种，分别为链入式、行内式（也称为内联样式）、内嵌式和导入式。下面对开发中常用的内嵌式和链入式这2种引入方式进行讲解，具体如下。
1．内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并用<style>标记定义，其基本语法格式如下。
<head>
<style type="text/css">
选择器 {属性1：属性值1； 属性2：属性值2； 属性3：属性值3;}
</style>
</head>
在上述语法中，<style>标记一般位于<head>标记中的<title>标记之后，因为浏览器是从上到下解析代码的，把 CSS 代码放在头部便于提前被加载和解析，以避免网页内容加载后没有样式修饰带来的问题。同时，必须设置type的属性值为“text/css”，这样浏览器才知道<style>标记包含的是CSS代码。接下来通过一个案例来学习如何在HTML文件中使用内嵌式加入CSS。
在chapter01文件夹中创建一个HTML文件cssDemo01，其关键代码如文件1-10所示。
文件1-10 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 red; width: 300px; height: 80px; color:blue;}
8 </style>
9 </head>
10 <body>
11 <h2>内嵌式CSS样式</h2>
12 <div>
13 使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，
14 title标记之后。
15 </div>
16 </body>
在文件1-10中，HTML文档的头部使用style标记定义内嵌式CSS样式，第5行使用了标题标记<h2>来设置标题，第7行定义了<div>标记的样式。使用浏览器打开文件1-10，显示效果如图1-15所示。
图1-15 内嵌式效果展示
内嵌式引入CSS只对其所在的HTML页面有效。因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。
2．链入式
链入式是将所有的样式放在一个或多个以．css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文件中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
在上面语法中，<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的3个属性，具体如下：
• href：定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。
• type：定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。
• rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
接下来通过修改文件1-10 来演示链入式CSS的引用方式。具体步骤如下。
（1）创建样式表，书写CSS样式
在chapter01文件夹中创建一个名称为style.css的文件，使用记事本打开后，将文件1-10中<style></style>标记之间的内容复制到style.css中并保存。
（2）创建HTML文档
在chapter01文件夹中创建一个名为cssDemo02的HTML文件，将文件1-10中的代码复制到cssDemo02中，并将<style>标记更改为链入式的形式，更改后的代码如下所示。
<head>
<title>使用链入式CSS样式表</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
在上述代码中，使用<link />标记链入了style.css文件，代替了内嵌式的<style>标记。使用浏览器打开文件cssDemo02，显示结果如图1-16所示。
图1-16 链入式效果展示
从图1-16中可以看到，使用链入式与内嵌式引入CSS文件的显示效果是一样的。在实际开发中，链入式是使用频率最高、最实用的引入方式，它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，同一个CSS文件可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link />标记链接多个CSS样式表，大大提高了网页开发的工作效率。
1.2.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-11所示。
文件1-11 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>段落1:id="bold"，设置粗体文字。</p>
35 <p>段落2:id="font24"，设置字号为24px。</p>
36 <p>段落3:id="font24"，设置字号为24px。</p>
37 <p>段落4:id="bold font24"，同时设置粗体和字号24px。</p>
38 </body>
39 </html>
文件1-11中，在<style>标记内分别定义了类选择器和id选择器。类选择器中，“.red”选择器用于将页面中class属性值为red的文字颜色设置为红色，“.green”选择器用于将页面中class属性值为green的文字颜色设置为绿色，“.font18”选择器用于将页面中class属性值为font18的文字字号设置为18像素。在id选择器中，“#bold”选择器用于将页面中id属性值为bold的文本字体变为粗体文字，“#font24” 用于将页面中id属性值为font24的文本字号设置为24像素。
使用浏览器打开文件1-11，显示结果如图1-17所示。
图1-17 选择器的使用
在图1-17中，“标题一…”和“段落二…”的文本内容均显示为红色，可见同一个类选择器可以被多个标记引用，而且一个HTML标记可以同时引用多个类选择器，例如：class="green font18"。在显示结果中，“段落2…”和“段落3…”的字号均为24像素，这是由于它们引用了相同的id选择器，虽然浏览器并没有报错，但是这种做法是不被允许的，因为在JavaScript等脚本语言中id值是唯一的。“段落4”没有显示任何CSS样式，这意味着同一个标记对象不能同时引用多个id选择器，例如“id="bold font24"”的引用方式是完全错误的，如果一个标记想要使用多个样式可以使用类选择器。
为了使读者更方便地了解网页中各种标记的样式，下面介绍一些常用的CSS属性，如表1-1所示。
表1-1 CSS常用属性
续表
