标签：区别 打开网页 ecc lin 网页 bsp none ati 文件
第一种直接在属性标签后添加CSS代码,可读性差,不推荐使用.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--第一种引入方式--> <div style="color: red;background-color: beige">Hello Yuan</div> </body> </html>
第二种引入方式,在<head>部分以<style></style>方式想要修改的标签名加大括号,设置属性.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color: rebeccapurple; font-size: 40px; } a{ text-decoration: none; } </style> </head> <body> <!--第二种引入方式--> <div>Hello Yuan</div> <p>Hello p</p> <a href="">点我</a> </body> </html>
第三种引入方式,通过自闭和标签<link hrel=" 文件名.css" rel="stylesheet">引入(css代码写到单独的文件中然后引入).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--链接式--> <link href="test1.css" rel="stylesheet"> </head> <body> <!--第三种引入方式--> <div>Hello Yuan</div> <p>Hello p</p> <a href="">点我</a> </body> </html>
css文件
p{ color: rebeccapurple; font-size: 40px; } a{ text-decoration: none; }
第四种方式通过<style>标签,用途@import导入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入式--> <style>@import "test1.css"; </style> </head> <body> <!--第三种引入方式--> <div>Hello Yuan</div> <p>Hello p</p> <a href="">点我</a> </body> </html>
第三种和第四种方式类似,它们的区别在
1.第三种是HTML语言式引入,第四种是CSS引入
2.第三种方式没有次数限制,想引入多少次都可以,第四种有次数限制
3.第三种在用户体验上比第四种要好,因为第四种引入是@import CSS代码,在打开网页时先加载HTML代码后加载CSS,有可能第一次不会加载成功.
标签：区别 打开网页 ecc lin 网页 bsp none ati 文件
原文地址：https://www.cnblogs.com/425500828zjy/p/9038671.html
