css三种引入方式

时间：2022-07-11 20:26:15

CSS三种引入方式

一、三种方式的书写规范

1、行间式

<div style="width: 100px; height: 100px; background-color: red"></div>

行间式

 1.在标签头部的style属性内 
2.属性值满足的是css语法 
 3.属性值用key: value形式赋值,value具有单位 
 4.属性值之间用;隔开

2、内联式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

内联式

 1.在style标签内(style标签一般作为head的子标签) 
2.属性值满足的是css语法 
 3.属性值用key: value形式赋值,value具有单位
 4.属性值之间用;隔开(一般独行分开赋值) 
 5.格式: 选择器{样式块} 
<div></div>

3、外联式

file: zero.css
div {
    width: 100px;
    height: 100px;
    background-color: red;
}

file: zero.html
<head>
    <\link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>

外联式

 1.在外部css文件中 
 2.属性值满足的是css语法 
 3.属性值用key: value形式赋值,value具有单位 
 4.属性值之间用;隔开(一般独行分开赋值) 
 5.格式: 选择器{样式块} 
 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接)

二、三种方式间的"优先级"

  • 与样式表的解析顺序有关

注:三种方式间没有优先级

 1.三种方式协同布局: 
 2.不重复的属性一定为唯一位置的唯一值 
 3.重复的属性采用覆盖赋值,保留最后位置的属性值 
 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) 
 5.!important会影响优先级
标签：

相关文章