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>

 

 

posted on 2021-01-11 22:07  QiKa  阅读(315)  评论(0)  编辑  收藏  举报