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=" 100px; height: 100px; background-color: red"></div>
2、内联式
<head>
<style>
div {
100px;
height: 100px;
background-color: red;
}
</style>
</head>
3、外联式
file: zero.css
div {
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="100px;height: 100px;background-color: red"></div>
<!-- 内联式 -->
<!-- 1.在style标签内（style标签一般为head的子标签 -->
<!-- 2.属性值满足的是 css语法 -->
<!-- 3. 属性值用key:value 形式赋值，value 具有单位 -->
<!-- 4. 属性值之间用；隔开 -->
<style type="text/css">
div{
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{ 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>