❮上一节 CSS 连续选择器下一节 CSS 特性❯

CSS 引入方式

CSS样式属性根据代码位置分为3种引入方式：

1）行内样式表；

2）内嵌样式表；

3）外部样式表。

1 行内样式表

样式定义在标签的style属性，称为行内样式表。

行内样式表的内容只适用于当前标签。

示例

<p style="font-size: 20px;color:#f00;">第1段</p>

2 内嵌样式表

样式定义<head><style></style></head>里，称为内嵌样式表。

内嵌样式表的内容适用于当前文档。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css 内嵌样式表 | 关关教程</title>
    <style>
         p{
            font-size: 20px;
            color:#f00;
         }
    </style>
</head>

<body>
   <p >第1段</p>   
</body>

</html>

3 外部样式表

样式定义在独立的css文件里，称为外部样式表。

html文件通过标签引用外部样式表。

语法

<link rel="stylesheet" href="css文件路径" >

示例

文件d12-css1.css内容

p{
    font-size: 20px;
    color:#f00;
 }

 .class1{
    border:1px solid #f00 ;
 }

 #id1{
    background-color: #f00;
 }

文件 d12-position2.html 文件内容

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css 内嵌样式表 | 关关教程</title>
    <link rel="stylesheet" href="d12-css1.css">
</head>

<body>
   <p >第1段</p>   
</body>

</html>

link标签的href属性的文件名与CSS文件名一致，包括文件路径。

路径包括多种写法：绝对路径、相对当前路径、相对根路径；与图片、链接的规则一致。

4 三者比较与选择

类型	定义位置	特点
行内样式表	标签的style属性	无法重复使用
内嵌样式表	文档的<head><style>内	当前html页面内重复使用
外部样式表	单独的css文件	多个html页面重复使用

实际项目，三种类型都会使用：

多个页面公用的样式尽量放在外部样式表；

当前页面公用的样式尽量放在内嵌样式表；

仅当前标签使用的样式放在行内样式表。