← 返回首页
CSS3基础教程(六)
发表时间：2020-03-09 13:15:55
CSS3样式的三种引入方式

1.内部样式表

在style标签中书写CSS代码。style标签一般写在head标签中。

实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式表的三种引入方式</title>
    <style>
        /*标签选择器,使用html的标签标签*/
        p, div {
            color: blue;
        }
        img {
            border: 1px solid black;
            cursor: pointer;
            width: 200px;
            height: 140px;
        }
        .poet1 {
            color: red;
        }
        li {
            font-weight: bold;
        }
        #shanghai {
            font-style: italic;
        }
        .city {
            font-family: 楷体;
        }
        .city#shenzhen {
            color: green;
        }

        p b {
            font-family: 黑体;
            color: red;
            font-style: italic;
        }
        a {
            text-decoration: none;
        }
        a:link {
            color: blue;
        }
        a:visited {
            color: darkred;
        }
        a:hover {
            color: orange;
        }
        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
<h1>三种样式表的引入方式</h1>
<hr>
<h3>静夜思</h3>
<p class="poet1">
    床前明月光<br>
    疑是地上霜<br>
    举头望明月<br>
    我是郭德纲<br>
</p>

<h3>登鹳雀楼</h3>
<p class="poet2">
    白日依山尽<br>
    黄河入海流<br>
    欲穷千里目<br>
    更上一层楼<br>
</p>
<br>
<img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/>&nbsp;
<img src="http://img.simoniu.com/html5%E7%AE%80%E4%BB%8B001.jpg"/>&nbsp;
<img src="http://img.simoniu.com/java_logo3.jpg"/>&nbsp;
<ul>
    <li>北京</li>
    <li id="shanghai">上海</li>
    <li class="city">广州</li>
    <li class="city" id="shenzhen">深圳</li>
</ul>
<p>P标签<b>HTML</b>段落样式</p>
<a href="https://www.taobao.com">淘宝网</a>
</body>
</html>

运行效果：

2.外部样式表

CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。 链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

导入式

<style type="text/css">
  @import url("css文件路径");
</style>

link与import方式区别： - link属于HTML标签，而@import完全是CSS提供的一种方式。 - 当一个页面被加载时（或者被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会很明显。 - @import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 - 当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

实例：上例使用外部样式表方式实现，首先在css目录下新建style.css文件，代码如下：

/*指定css文件的字符集*/
@charset "utf-8";

p, div {
    color: blue;
}
img {
    border: 1px solid black;
    cursor: pointer;
    width: 200px;
    height: 140px;
}
.poet1 {
    color: red;
}
li {
    font-weight: bold;
}
#shanghai {
    font-style: italic;
}
.city {
    font-family: 楷体;
}
.city#shenzhen {
    color: green;
}

p b {
    font-family: 黑体;
    color: red;
    font-style: italic;
}
a {
    text-decoration: none;
}
a:link {
    color: blue;
}
a:visited {
    color: darkred;
}
a:hover {
    color: orange;
}
a:active {
    color: yellow;
}

html页面代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式表的三种引入方式</title>
    <!--链接方式-->
    <link type="text/css" rel="stylesheet"  href="css/style.css" />
    <!--导入式-->
    <!--
    <style type="text/css">
        @import url(css/style.css);
    </style>
    -->

</head>
<body>
<h1>三种样式表的引入方式</h1>
<hr>
<h3>静夜思</h3>
<p class="poet1">
    床前明月光<br>
    疑是地上霜<br>
    举头望明月<br>
    我是郭德纲<br>
</p>

<h3>登鹳雀楼</h3>
<p class="poet2">
    白日依山尽<br>
    黄河入海流<br>
    欲穷千里目<br>
    更上一层楼<br>
</p>
<br>
<img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/>&nbsp;
<img src="http://img.simoniu.com/html5%E7%AE%80%E4%BB%8B001.jpg"/>&nbsp;
<img src="http://img.simoniu.com/java_logo3.jpg"/>&nbsp;
<ul>
    <li>北京</li>
    <li id="shanghai">上海</li>
    <li class="city">广州</li>
    <li class="city" id="shenzhen">深圳</li>
</ul>
<p>P标签<b>HTML</b>段落样式</p>
<a href="https://www.taobao.com">淘宝网</a>
</body>
</html>

运行效果与上例完全相同。

3.行内样式表

使用style属性引入CSS样式。 实例：上例中给第三个图片添加内部样式表，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式表的三种引入方式</title>
    <!--链接方式-->
    <link type="text/css" rel="styleSheet"  href="css/style.css" />
    <!--
    <style type="text/css">
        @import url(css/style.css);
    </style>
    -->
</head>
<body>
<h1>三种样式表的引入方式</h1>
<hr>
<h3>静夜思</h3>
<p class="poet1">
    床前明月光<br>
    疑是地上霜<br>
    举头望明月<br>
    我是郭德纲<br>
</p>

<h3>登鹳雀楼</h3>
<p class="poet2">
    白日依山尽<br>
    黄河入海流<br>
    欲穷千里目<br>
    更上一层楼<br>
</p>
<br>
<img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/>&nbsp;
<img src="http://img.simoniu.com/html5%E7%AE%80%E4%BB%8B001.jpg"/>&nbsp;
<img src="http://img.simoniu.com/java_logo3.jpg" style="border: 5px dashed orangered"/>&nbsp;
<ul>
    <li>北京</li>
    <li id="shanghai">上海</li>
    <li class="city">广州</li>
    <li class="city" id="shenzhen">深圳</li>
</ul>
<p>P标签<b>HTML</b>段落样式</p>
<a href="https://www.taobao.com">淘宝网</a>
</body>
</html>

运行效果：

4.三种引入方式的优先级

1.就近原则

2.理论上的优先级别：行内>内部>链接>导入

3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高（页面多种方式使用css样式引入）