css三种样式表的创建和区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
        @import url("../css/index.css");
        /* 
        说明：@和import之间没有空格 url和小括号之间也没有空格；
        括号内部加引号，必须结尾以分号结束；必须放在style标签的最开始
        */
        /* 选择符｛属性:属性值;｝ */
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        
    </style>
    <!-- rel的作用：表示你要引入的外部文件问样式表（css文件） -->
    <!-- <link rel="stylesheet" href="../css/index.css"> -->
</head>
<body>
    <!-- 
        1、内部样式表
        在head的表签里面创建style标签，在style标签里面写css语法

        2、外部样式表
        先创建一css文件,在css里面写css语法，然后在head里面link标签引入外部样式

        *link和import导入外部样式的区别：
        差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
        差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
        差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
        差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

        3、内联样式表
        在html标签中添加style属性，他的属性值为css语法
     -->
     <div style="background: green;">我不物质，我只是想要一些物质</div>
    
</body>
</html>
css三种样式表的创建和区别

猜你喜欢
