css——css的三种导入方式

css——css的三种导入方式

行内样式

内部样式

外部样式

三种导入方式的测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--2.内部样式-->
    <style>
        h1{
     
     
        color:green;
        }
    </style>

<!--3.外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--1.行内样式;在标签元素中加一个style属性,然后编写样式即可-->
<!--<h1 style="color:red">标题党</h1>-->

<h1>标题</h1>

</body>
</html>
/*外部样式*/
 h1{
    
    
        color:blue;
        }

三种样式的优先级:就近原则(离元素近的样式优先被实现)

拓展:实现外部样式的两种方式

1.链接式(任何情况推荐使用)

  •  <link rel="stylesheet" href="css/style.css">
    

2.导入式 (css2.1特有,网页元素太多时不推荐使用)

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <!--导入式-->
        <style>
            @import url("css/style.css")
    
        </style>
    
    
    </head>
    <body>
    
    <h1>标题党</h1>
    
    </body>
    </html>
    

猜你喜欢

转载自blog.csdn.net/wpc2018/article/details/109518398