HTML文档连接CSS样式的三种方法

内嵌式

内嵌式是直接将CSS样式插入在HTML标签内,小洪不建议直接使用内嵌式CSS,不方便管理且会增加HTML文档的内存,拖慢网页加载速度

<!--内嵌式CSS示例-->
<p style="color:red;text-align:center;">这段文字的颜色是红颜色并且是水平居中的</p>

 内联式

内联式是将CSS样式放在HTML文档的头部<head >标签内容内,然后在<body >标签内容引用,这种方式比内嵌式方便,样式可以多个内容一起使用,也比较方便管理,但是毕竟CSS样式和HTML标签都是放在同一个文档里,样式多了同样会增加网页的负担,影响网页加载速度

<!--内联式CSS示例-->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
<!--下面是头部的css样式-->
<style type="text/css">
.a{
color:blue;
text-align:center;
font-size:28px;
}
</style>
</head>
<body>
<p class="a">这段蓝色文字大小为28px像素,并且水平居中</p>
</body>
</html>

 外联式

外联式是将CSS样式单独写入文档,后缀名为.css ,在HTML文档的头部<head >标签内用<link >标签引用,就可以在<body >的内容当中使用css样式,推荐使用外联式,不仅方便管理,还可以极大缩减HTML文档的大小,加快网页访问速度

/*取名为1.css的样式表*/
.a{
color:red;
font-family:"宋体";
}
.b{
color:yellow;
text-align:center;
font-size:25px;
}
<!--外联式css示例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
<!--此处引入外部css样式表-->
<link rel="stylesheet" type="text/css" href="/1.css"/>
</head>
<body>
<h1 class="a">这个标题是红颜色并且是宋体</h1>
<p class="b">这段黄颜色文字大小为25px像素,并且水平居中</p>
</body>
</html>

 样式表优先级

内嵌式>内联式>外联式 ,比如同样为一个段落设置了三种css样式,段落优先选择内嵌式,其次是内联式,最后才是外联式。当你想要修改网站的某个装饰效果,但你又找不到它对应的css样式的时候就可以直接采用内嵌式css对内容装饰,如果一个css样式装饰了多个内容,你有只想修改一个地方的内容同样可以使用优先级较高的方法进行装饰

总结

文中的三种代码都可以自行复制到本地文档运行查看效果,新建一个后缀名为.html 的文件用编辑文本方式打开然后把文中代码复制文档保存即可点击运行查看效果,第三种外联式的css样式需要保存为后缀名.css 的文件,引用路径也要根据css样式文件的路径做出改变才能引用成功

版权声明:
作者:HONG
链接:https://www.honglog.com/150.html
来源:小洪博客
本站遵循cc共享许可协议:BY-NC-SA 4.0 转载请注明出处
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录