CSS引用方法

一、行内样式表

<body>
    <div style="background-color: pink;width:200px;height:200px"></div>
</body>

二、内部样式表

<head>
    <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
    </style>
</head>

三、外部样式表

通过创建外部.css样式表文件,然后再html文件中引用,引用的.css文件的方式有两种,分别是链接引入css和导入css。

下面是外部的css样式文件index.css

div{
        width: 200px;
        height: 200px;
        background-color: pink;
}

html文件中的head标签下链接引入css样式表:

<head>
  <
link rel="stylesheet" type="text/css" href="index.css">
</head>

html文件中的head标签下导入css样式表:

<head>
  <
style type="text/css"> @import 'index.css'//css样式表的路径   </style>
</head>

两种引入css表方式的区别:
1.链接引入:
属于html中的标签语法,在加载页面时,就会同时加载css样式表
2.导入css样式:@import
属于css中的语法,加载页面完成之后才会加载css样式表

CSS样式引入的优先级

将三种引入样式表写入同一个html文件中,分别给div定义不同颜色的background-color,查看样式表引入优先级。
优先级如下:
行内样式>外部样式表=内部样式表
行内样式表优先级最高,最先显示其样式,外部样式和内部样式优先级无法比较,根据就近原则显示样式。

posted @ 2021-02-05 15:42  清语堂  阅读(524)  评论(0编辑  收藏  举报