css三种引入方式以及其优先级的说法

it2022-05-07  29

css 三种引入方式

方式一:行间式

​ 1.在标签头部的style属性内

​ 2.属性值满足css语法

​ 3.属性值用key:value形式赋值,value具有单位

​ 4.属性值之间用 分号 ; 隔开

方式二:内联式

在style标签内(style标签一般为head的子标签属性值满足的是css语法属性值用key:value形式赋值,value具有单位属性值之间用 分号 ; 隔开

方式三:外联式

​ 1.在外部的css文件中

​ 2.属性值满足css语法

​ 3.属性值用key:value形式赋值,value具有单位

​ 4.属性值之间用 分号 ; 隔开 一般独行分开赋值

​ 5.格式 div{样式块}

​ 6.将html 与css文件建立联系:html 通过link标签链接外部css(一般我们在head中链接)

一、三种方式的书写规范

1、行间式

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

2、内联式

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

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> <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>css三种引入方式</title> <!-- 三种 行间式|内联式|外联式 --> <link rel="stylesheet" type = "text/css"href="01.css"> </head> <body> <!-- 行间式: --> <!-- 1. 在标签头部的style属性内 --> <!-- 2.属性值满足的是 css语法 --> <!-- 3. 属性值用key:value 形式赋值,value 具有单位 --> <!-- 4. 属性值之间用;隔开 --> <div style="width:100px;height: 100px;background-color: red"></div> <!-- 内联式 --> <!-- 1.在style标签内(style标签一般为head的子标签 --> <!-- 2.属性值满足的是 css语法 --> <!-- 3. 属性值用key:value 形式赋值,value 具有单位 --> <!-- 4. 属性值之间用;隔开 --> <style type="text/css"> div{ width: 200px; height:200PX; background-color: brown; } </style> <!-- 外联式 --> <!-- 1.在外部css文件中 --> <!-- 2.属性值满足的是css语法 --> <!-- 3.属性值用key:value 形式赋值,value具有单位 --> <!-- 4.属性值之间用;隔开(一般独行分开赋值) --> <!-- 5.格式: div{样式块} --> <!-- 将html 与 css文件建立联系:html通过link标签链接外部css (一般在head中链接)--> <!-- <div></div> --> <!-- <link rel="stylesheet" type = "text/css"href="01.css"> --> </body> </html>

css三种引入方式的优先级

三种引入方式本没有优先级一说。

三种方式协调布局:不重复的属性一定为唯一位置的唯一值。

重复的属性采取覆盖赋值,保留最后位置的属性值

行间式(

)一定是运行逻辑上最后被解析的位置(js的正常操作就是行间式)

加上 ! important 会影响优先级顺序

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>三种引入方式优先级</title> <!-- 注: 三种方式间没有优先级之说--> <!-- 三种方式协调布局:不重复的属性一定为唯一位置的唯一值 --> <!-- 重复的属性采取覆盖赋值,保留最后位置的属性值 --> <!-- 行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) --> <style type="text/css"> div{ width: 100px; height: 100px; color: black; /*加上 !important 会影响优先级*/ background-color: blue!important; } </style> <link rel="stylesheet" type="text/css"href="02.css"> </head> <body> <div style="background-color: yellowgreen"></div> </body> </html>

转载于:https://www.cnblogs.com/qianzhengkai/p/10870654.html


最新回复(0)