HTML引入CSS样式的方式详解

1.1内联属性（Inline style attribute）
直接修改HTML元素的style属性，将CSS代码直接写在style属性里。
例：
<h1 style="font-size: 12px;">我的字号被修改了</h1>
1.2直接写在style标签里
通过选择器选择HTML元素，将CSS样式放在<style>标签中，<style>标签一般要求写放在<head>标签里。如果不写在<head>标签里有些浏览器会报错。
例：

<style>
h1{
    font-size:12px;
}
</style>

1.3外部链接调用
1.3.1链接方式——<link>标签
定义：
        <link>标签定义文档与外部资源的关系。
语法：
        <link rel="stylesheet" href="styles.css" />
注意：<link>标签一般写在<head>标签里。
常用属性：
rel属性，规定当前文档与被链接文档之间的关系。如："stylesheet"表示文档的外部样式表。
href属性，设置引用CSS文件的路径。
tyle属性，规定链接文档文件类型。
media属性，规定应用的设备。如："screen"是默认值，说明应用在计算机屏幕上。
1.3.2导入方式——CSS@规则（@import）
定义：
        @import是CSS@规则，用于加载外部层叠样式表。
语法：
<style [type="text/css"]>
    @import url(../CSS/style.css);
</style>
注意：<style>标签一般写在<head>标签里。
1.3.3链接方式和导入方式的比较
相同点：
        两者的目的相同，都是将一个独立的CSS文件引入到HTML文件中。
不同点：
        语法不同，链接式使用HTML的标记引入外部CSS文件，而导入式则是使用CSS的规则引入。
        CSS文件加载顺序不同，当HTML文件被加载时，链接式引用的文件会同时被加载，而导入式引用的文件则会等页面全部下载完毕再被加载。
        兼容性不同，由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而<link>标签无兼容性问题。
        功能多样性不同，<link>除了调用CSS外还可以有其他作用，譬如声明页面链接属性，声明目录等，而@import就只能调用CSS。
<link>标签支持使用JS控制DOM去改变样式；而@import不支持。
        引入多个CSS文件的方式不同。链接式引入多个CSS文件，使用多个<link>标签，而导入式除了使用多个@import，还可以在css文件中嵌套CSS文件。
1.4总结
        没有特殊要求下，应尽量使用<link>标签导入外部CSS文件，避免或者少用使用其他方式。
1.5实例详解——引入多个CSS文件
例1-1：

<!DOCTYPE html>
<html>
<head>
    <title> 链接式</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="../CSS/PublicStyles.css"/>
    <link rel="stylesheet" href="../CSS/styles.css"/>
</head>
<body></body>
</html>

PublicStyles.css文件代码
div {
    background:black;
}
style.css文件代码
#box {
    color:red;
}

例1-2：

<!DOCTYPE html>
<html>
<head>
    <title> 导入式</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        @import url(../CSS/ PublicStyles.css);
        @import url(../CSS/style.css);
    </style>
</head>
<body></body>
</html>

PublicStyles.css文件代码
div {
    background:black;
}
style.css文件代码
#box {
    color:red;
}

例1-3：

<!DOCTYPE html>
<html>
<head>
    <title> 导入式</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        @import url(../CSS/style.css);
    </style>
</head>
<body></body>
</html>

PublicStyles.css文件代码
div {
    background:black;
}
style.css文件代码
@import url(../CSS/ PublicStyles.css);
#box {
    color:red;
}

注意：此方法有一个缺点，会对网站服务器产生过多的HTTP请求。以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。
1.6三种方式的CSS样式执行优先级
内联式>内嵌式>外部引用式。

HTML引入CSS样式的方式详解

猜你喜欢