css三种引⼊⽅式以及其优先级的说法css 三种引⼊⽅式
⽅式⼀：⾏间式
1.在标签头部的style属性内
2.属性值满⾜css语法
3.属性值⽤key:value形式赋值，value具有单位
4.属性值之间⽤分号；隔开
⽅式⼆：内联式
1. 在style标签内（style标签⼀般为head的⼦标签
2. 属性值满⾜的是css语法
3. 属性值⽤key:value形式赋值，value具有单位
4. 属性值之间⽤分号；隔开
⽅式三：外联式
1.在外部的css⽂件中
2.属性值满⾜css语法
3.属性值⽤key:value形式赋值，value具有单位
4.属性值之间⽤分号；隔开⼀般独⾏分开赋值
5.格式 div{样式块}
6.将html 与css⽂件建⽴联系：html 通过link标签链接外部css（⼀般我们在head中链接）
⼀、三种⽅式的书写规范
1、⾏间式
<div ></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 ></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三种引⼊⽅式的优先级
1. 三种引⼊⽅式本没有优先级⼀说。
2. 三种⽅式协调布局：不重复的属性⼀定为唯⼀位置的唯⼀值。
3. 重复的属性采取覆盖赋值，保留最后位置的属性值
4. ⾏间式（
）⼀定是运⾏逻辑上最后被解析的位置（js的正常操作就是⾏间式）5. 加上 ! 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;
}css样式表优先级最高
</style>
<link rel="stylesheet" type="text/css"href="02.css">
</head>
<body>
<div ></div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。