css三种引入方式
一 概念
# CSS三种引入方式
## 一、三种方式的书写规范
#### 1、行间式
```html
<div style="width: 100px; height: 100px; background-color: red"></div>
```
#### 2、内联式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 3、外联式
```css
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red;
}
```
```css
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```
## 二、三种方式间的"优先级"
* 与样式表的解析顺序有关
###### v_test：掌握三种CSS引入方式方式
二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<!-- 三种: 行间式 | 内联式 | 外联式 -->
<!-- <style type="text/css">
div {
width: 200px;
height: 200px;
background-color: brown;
}
</style> -->
<link rel="stylesheet" type="text/css" href="01.css">
<!-- 下面的这是01.css里面的内容格式 href导入的是文件名 -->
<!-- div {
width: 200px;
height: 200px;
background: yellow;
}
</head> -->
<body>
<!-- 行间式 -->
<!-- 1.在标签头部的style属性内 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<!-- <div style="width: 100px; height: 100px; background-color: red"></div> -->
<!-- <hr style="" /> -->
<!-- 内联式 -->
<!-- 1.在style标签内(style标签一般作为head的子标签) -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<!-- <div></div> -->
<!-- 外联式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
<div></div>
</body>
</html>
三种引入的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入优先级</title>
<!-- 注:三种方式间没有优先级 -->
<!-- 1.三种方式协同布局: -->
<!-- 2.不重复的属性一定为唯一位置的唯一值 -->
<!-- 3.重复的属性采用覆盖赋值,保留最后位置的属性值 -->
<!-- 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) -->
<!-- 5.!important会影响优先级 -->
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: yellow!important;
}
</style>
<link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
<div style="background-color: yellowgreen"></div>
<!-- <div></div> -->
</body>
</html>
