css引用方法介绍

Css

 

Css称为层叠样式表,

作用:

用来控制网页数据的表现,可以使网页的表现与数据内容分离

 

Css四种引入方式:

1、行内式 在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用(原因:太死板)
放在
<body>里面, <p style="background-color: rebeccapurple">hello world</p> //这是设置背景颜色
2、嵌入式 如:将CSS样式集中写在网页的
<head></head>标签对的<style></style>标签中 (不推荐使用,原因:因为这样只能控制当前的HTML中这一个标签的样式)
<head>     <meta charset="UTF-8">     <title>Title</title>     <style>         标签名div{             属性名background-color: 颜色值#2b99ff; //格式要记住(不推荐使用)         }     </style> </head> 3、链接式--推荐!!! 划重点:将一个.css文件引入HTML文件中-------推荐使用!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<style>--> <!--div{--> <!--color: red;--> <!--background: green;--> <!--}--> <!--</style>--> <link type="text/css" rel="stylesheet" href="css.css"> //rel表示指明这是使用css,href表示引用的css文件链接路径 </head> <body> <div>helloworld</div> </body> </html> 注意:上面的href 是指的引入的css.css这个文件; css.css文件,内容: div{ color: red; background: green; }
总结:
这样的方式就相当于将css文件样式变成了一个变量,要使用时就引入使用。 然后HTML 文件的
<body>里面的标签,就会自己去找css.css这个文件里面对应设置好的标签的css样式并使用。
(并且:使用这种链接的方式,在网页展示之前就将css文件加载好,最后和网页一起直接展示出来。)



4、导入式 将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件
--->>不推荐使用;
原因:这种@import是css语法,而上面的link这种引入变量的形式用链接的形式引入,是符合HTML语法的,更加契合。
否则使用@import导入会导致页面大量css文件存在时,页面会全部展示不可预览状。等待加载完全后再展示出来。体验很不好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "css.css"; //注意,这是一个css语法,导入一个外部的css文件。 </style> </head> <body> <div>helloworld</div> </body> </html>

 

原文地址:https://www.cnblogs.com/QiKa/p/14264672.html