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"属性定义了这两个子元素的类名为div1div2,然后在<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标记”方法。