1.2 在页面中应用CSS
网页中书写CSS代码的方法有以下3种。
1.2.1 内联样式
第1种方法称为“内联样式”，它把样式属性写在HTML标签的style属性里，也是“内联”这个词的含义。
例1-1 用CSS内联样式绘制图1-1所示的字母i。
图1-1
容器<figure>中包含两个子元素：第1个<div>绘制一个橙色的圆形；第2个<div>绘制一个竖着的黄色矩形。
X:\实例代码\第1章\demo-1-01.html
<figure>
<div style="width: 50px; height: 50px; background-color: orange; border-radius: 50%;
margin-bottom: 10px;"></div>
<div style="width: 50px; height: 100px; background-color: gold; border-radius: 10px;">
</div>
</figure>
这种方法的优点是不用定义选择器（下一节会讲到），但缺点是各元素的样式分散在整个HTML文档中，不方便集中管理，每个元素的样式也不能太复杂，否则写起来就很不方便了。这种方法我们不推荐。
1.2.2 style元素
第2种方法称为“style元素”，它把网页中所有元素的样式都集中写到一个名为<style>的标签里，放在页面的DOM结构之前。因为样式不是写在元素的属性里，为了区分不同元素的样式，就要分别为各元素指定名字，然后在<style>标签里按元素的名称逐个书写样式。
例1-2 用“style元素”法绘制图1-1所示的字母i。
本例是对例1-1的重构。元素的class="div1"和class="div2"属性定义了这两个子元素的类名为div1和div2，然后在<style>中用.div1和.div2来引用它们。
X:\实例代码\第1章\demo-1-02.html
<!DOCTYPE html>
<head>
<title>Document</title>
<style>
.div1 {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-bottom: 10px;
}
.div2 {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 10px;
}
</style>
</head>
<body>
<figure>
<div class="div1"></div>
<div class="div2"></div>
</figure>
</body>
</html>
1.2.3 link标记
第3种方法称为“link标记”，它在第2种方法的基础上，把<style>标签的内容单独存放到扩展名为.css的文件中，然后在HTML文件中用<link rel="stylesheet" href="file-name.css">标记导入这个CSS文件。
例1-3 用“link标记”法绘制图1-1所示的字母i。
例1-3是对例1-2的进一步重构，从1个HTML文件又分拆出了一个CSS文件，然后用<link>标记把它们关联起来。
DOM结构如下。
X:\实例代码\第1章\demo-1-03.html
<!DOCTYPE html>
<head>
<title>Document</title>
<link rel="stylesheet" href="demo-1-03.css">
</head>
<body>
<figure>
<div class="div1"></div>
<div class="div2"></div>
</figure>
</body>
</html>
CSS结构如下。
X:\实例代码\第1章\demo-1-03.css
.div1 {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-bottom: 10px;
}
.div2 {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 10px;
}
这种方法的好处是，从物理上分离了结构和样式，HTML文件中只存储文档的DOM结构，CSS文件中只存储样式。在商业应用中多用这种方式，因为多个HTML文件可以引用同一个样式表文件，达到复用的目的，节省开发和维护成本。
本书的示例有两种：一种是伴随理论知识部分的示例，因为示例的数量较多，为了避免文件太多，这种示例均采用第2种“style元素”方法，把页面结构和样式写在一个文件中；另一种是项目实战，样式的代码量大一些，项目也更正式一些，这种示例采用第3种“link标记”方法。