HTML引入CSS样式的方式详解

最新推荐文章于 2023-04-06 15:55:13 发布

iteye_16353

最新推荐文章于 2023-04-06 15:55:13 发布

阅读量209

点赞数

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/iteye_16353/article/details/82654886

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[align=center][size=xx-small]HTML引入CSS样式的方式详解[/size][/align]

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

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

[b]1.3外部链接调用[/b]
[b]1.3.1链接方式——<link>标签[/b]
定义：
<link>标签定义文档与外部资源的关系。
语法：
<link rel="stylesheet" href="styles.css" />
[color=red]注意：<link>标签一般写在<head>标签里。[/color]
常用属性：
rel属性，规定当前文档与被链接文档之间的关系。如："stylesheet"表示文档的外部样式表。
href属性，设置引用CSS文件的路径。
tyle属性，规定链接文档文件类型。
media属性，规定应用的设备。如："screen"是默认值，说明应用在计算机屏幕上。
[b]1.3.2导入方式——CSS@规则（@import）[/b]
定义：
@import是CSS@规则，用于加载外部层叠样式表。
语法：
<style [type="text/css"]>
@import url(../CSS/style.css);
</style>
[color=red]注意：<style>标签一般写在<head>标签里。[/color]
[b]1.3.3链接方式和导入方式的比较[/b]
相同点：
两者的目的相同，都是将一个独立的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文件。
[b]1.4总结[/b]
没有特殊要求下，应尽量使用<link>标签导入外部CSS文件，避免或者少用使用其他方式。
[b]1.5实例详解——引入多个CSS文件[/b]
例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;
}

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

iteye_16353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML引入CSS样式的方式详解

[align=center][size=xx-small]HTML引入CSS样式的方式详解[/size][/align][b]1.1内联属性（Inline style attribute）[/b] 直接修改HTML元素的style属性，将CSS代码直接写在style属性里。例：我的字号被修改了[b]1.2直接写在style标签里[/b] 通过...
复制链接

扫一扫

专栏目录