# CSS层叠样式表
## CSS层叠样式表
- CSS的作用
- HTML结构和CSS样式如何关联到一起(CSS引入方式)
> CSS作用：给HTML元素添加静态或者动态（JS）的CSS样式
### CSS的引入方式 面试题
- 行内式:直接写在html标签的后面，在通过标签属性style来引入的，项目中从来不会用到
```
<div style="color: orange;">行内式</div>
```
- 内嵌式:将CSS代码单独放在style标签内，通过css选择器来选择html元素
- style标签一般放在head标签内,title标签下
```
<style>
div {
color: orangered;
}
</style>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
```
- 外链式：将CSS代码单独放的放在一个文件中，在通过link标签来进行引入的
- link标签一般放在head标签内,title标签下
```
<link rel="stylesheet" href="style.css" type="text/css">
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
rel="stylesheet"，样式表，不可缺少
href=""样式表的地址、路径
type="text/css"类型、可以省略掉
```
- 导入式：将CSS代码单独放在一个文件中，再通过style标签来引入
-
```
<style>
@impor "style.css";
</style>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
```
#### 外链式和导入式的区别 面试题
- 区别一： 外链式l是通过ink标签来引入的 导入式是@import一条语句，不是html标签，也不是css样式
- 区别二：加载的顺序不同，外链式的CSS样式表是和html标签同时加载的，而导入式是先把html标签加载完，在加载CSS样式表
### CSS选择器
> 作用：为了获取html元素，并给html元素添加css样式
语法：css选择器{css属性名：css属性值；}
> css属性名和css属性值之间用":"隔开，用分号";"结束
```
div{color: orangered;}
```
|选择器|语法|权重|
|-|-|-|
|标签选择器|div（html元素来当选择器）|1|
|类选择器|.div（通过给html元素添加class属性值，用class属性值的属性名字来当选择器）|10|
|ID选择器|#div1（通过给html元素添加id属性值，用ID属性值的属性名字来当选择器）|100|
|通配符选择器|"*"{css属性名：css属性值}|0 < * < 1|
|后代选择器|祖辈选择器 后代选择器{}|所有选择器权重相加之和|
|分组选择器|选择器1，选择器2，选择器3{css样式}|独立计算的，不会相加|
|子级选择器|父级选择器>子级选择器|所有选择器权重相加之和|
|伪类选择器||10|
|标签属性选择器|[标签属性名]{css样式}、[标签属性名=标签属性值]{css样式}|10|
|交集选择器||所有选择器权重相加之和|
#### 标签选择器
直接把html元素当作选择器来用
权重：1
> 标签选择器会选择html标签当中所有的标签
```
<style>
div{color: orchid;}
</style>
<div>1</div>
<div>2</div>
```
#### 类选择器
将html元素后面添加class标签属性，利用标签属性值（类名）当作选择器来用，在标签属性值前面加一个"."
权重：10
> 标签属性值（类名）可以重复使用
> 标签属性值（类名）可以有多个，标签属性值（类名）之间用"空格"隔开
```
<style>
div{color: red;}
.div2{color: green;}
.title{font-size: 30px;}
</style>
<div>红色</div>
<div class="div2">绿色</div>
<p class="div2 title">段落</p>
<p>11111</p>
```
#### ID选择器
将html元素后面添加ID标签属性，利用标签属性值当作选择器来使用，在标签属性值前面加一个"#"
权重：100
> ID在页面中具有唯一性，不能重名
> ID选择器是配合javascript来使用的
```
<style>
#div1 {
color: orange;
}
</style>
<div id="div1">大盒子</div>
```
#### 通配符选择器
匹配了所有的html元素
语法*{css属性名：css属性值}
权重：0 < * < 1
> 在项目中，通配符选择器不用，他比较消耗性能
> reset.min.css 清除默认样式表
```
* {
margin: 0;
padding: 0;
}
```
#### 后代选择器（派生选择器）
在一个根元素（大盒子）的范围内，去查找它的后代元素
语法：祖辈选择器 后代选择器{}
权重:所有选择器权重相加之和
> 作用：增加权重，精确查找范围
```
ul li{
color: purple;
}
ul li span{
color: red;
}
.box ul li span{
color: green;
}
ul span{
color: yellow;
}
.box ul span{
color: blue;
}
<ul>
<li>1</li>
</ul>
<ol>
<li>2</li>
</ol>
<div class="box">
<ul>
<li>
<span></span>
</li>
</ul>
<ol>
<li>
<span></span>
</li>
</ol>
</div>
```
#### 分组选择器
将同一份css样式，分给了不同的html元素，并给这个html元素添加css样式
语法：选择器1，选择器2，选择器3{css样式}
权重：独立计算的，不会相加
```
div,p,h2,span{
color: red;
}
<div class="box">大盒子</div>
<p>段落</p>
<h2>标题</h2>
<span>行内小模块</span>
```
#### 子级选择器
存在包含关系的元素选择，通过他的父级选择子级
语法：父级选择器>子级选择器
权重：所有选择器权重相加之和
```
.div>ul>li {
color: red;
}
<div class="div1">
<ul>
<li>1</li>
</ul>
<ol>
<li>2</li>
</ol>
</div>
```
#### 伪类选择器
给html元素添加某种状态
例如：鼠标经过时的状态
权重为：10
> 伪类选择器在项目中常用的状态时"hover"
```
/* hover 鼠标经过时的状态 */
.nav a:hover{
color: green;
font-weight: bold;
```
#### 标签属性选择器
利用标签属性名和标签属性值当作选择器来使用，来选择html元素
语法：[标签属性名]{css样式}
[标签属性名=标签属性值]{css样式}
权重：10
> 如果遇到HTML元素中带有class标签属性是，一般都用类选择器来选择html元素，不会使用标签属性选择器
```
[title]{
color: red;
}
[title=dhz]{}
[class]{}
[class=box]{}
<div class="box" title="dhz">大盒子</div>
```
#### 交集选择器
两种选择器选择同属一个元素时，可以用我们的交集选择器来准确选择html元素
权重:所有选择器相加之和
> 交集选择器**标签选择器和类选择器集合**标签选择器和标签属性选择器相组合、变迁选择器和id选择器相结合、类选择器和类选择器相结合、类选择器和标签属性选择器相结合
```
/* 最常用的 */
div.box{
color: red;
}
div[box]{
color: red;
}
.box[title]{
color: red;
}
<div class="box" title="dhz"></div>
```
### CSS常用的样式
```
/* 高度 */
height: 100px;
/* 宽度 */
width: 100px;
/* 背景颜色 */
green;
/* 字体颜色 */
color: white;
/* 字体大小 */
font-size: 16px;
/* 文字水平居中 left居左是默认值，right居右，center居中 */
text-align: center;
/* 行高，文字垂直居中 */
line-height: 100px;
/* 文字加粗 bold加粗，normal去掉加粗*/
font-weight: bold;
/* 首行缩进 */
text-indent: 2em;
/* 行间距 */
line-height: 26px;
font-size: 14px;
/* 去掉下划线 */
text-decoration: none;
/* 去掉小黑点/序号，去掉标签的默认样式 */
list-style: none;
```
# CSS层叠样式表
## CSS层叠样式表
- CSS的作用
- HTML结构和CSS样式如何关联到一起(CSS引入方式)
> CSS作用：给HTML元素添加静态或者动态（JS）的CSS样式
### CSS的引入方式 面试题
- 行内式:直接写在html标签的后面，在通过标签属性style来引入的，项目中从来不会用到
```
<div style="color: orange;">行内式</div>
```
- 内嵌式:将CSS代码单独放在style标签内，通过css选择器来选择html元素
- style标签一般放在head标签内,title标签下
```
<style>
div {
color: orangered;
}
</style>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
```
- 外链式：将CSS代码单独放的放在一个文件中，在通过link标签来进行引入的
- link标签一般放在head标签内,title标签下
```
<link rel="stylesheet" href="style.css" type="text/css">
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
rel="stylesheet"，样式表，不可缺少
href=""样式表的地址、路径
type="text/css"类型、可以省略掉
```
- 导入式：将CSS代码单独放在一个文件中，再通过style标签来引入
-
```
<style>
@impor "style.css";
</style>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
```
#### 外链式和导入式的区别 面试题
- 区别一： 外链式l是通过ink标签来引入的 导入式是@import一条语句，不是html标签，也不是css样式
- 区别二：加载的顺序不同，外链式的CSS样式表是和html标签同时加载的，而导入式是先把html标签加载完，在加载CSS样式表
### CSS选择器
> 作用：为了获取html元素，并给html元素添加css样式
语法：css选择器{css属性名：css属性值；}
> css属性名和css属性值之间用":"隔开，用分号";"结束
```
div{color: orangered;}
```
|选择器|语法|权重|
|-|-|-|
|标签选择器|div（html元素来当选择器）|1|
|类选择器|.div（通过给html元素添加class属性值，用class属性值的属性名字来当选择器）|10|
|ID选择器|#div1（通过给html元素添加id属性值，用ID属性值的属性名字来当选择器）|100|
|通配符选择器|"*"{css属性名：css属性值}|0 < * < 1|
|后代选择器|祖辈选择器 后代选择器{}|所有选择器权重相加之和|
|分组选择器|选择器1，选择器2，选择器3{css样式}|独立计算的，不会相加|
|子级选择器|父级选择器>子级选择器|所有选择器权重相加之和|
|伪类选择器||10|
|标签属性选择器|[标签属性名]{css样式}、[标签属性名=标签属性值]{css样式}|10|
|交集选择器||所有选择器权重相加之和|
#### 标签选择器
直接把html元素当作选择器来用
权重：1
> 标签选择器会选择html标签当中所有的标签
```
<style>
div{color: orchid;}
</style>
<div>1</div>
<div>2</div>
```
#### 类选择器
将html元素后面添加class标签属性，利用标签属性值（类名）当作选择器来用，在标签属性值前面加一个"."
权重：10
> 标签属性值（类名）可以重复使用
> 标签属性值（类名）可以有多个，标签属性值（类名）之间用"空格"隔开
```
<style>
div{color: red;}
.div2{color: green;}
.title{font-size: 30px;}
</style>
<div>红色</div>
<div class="div2">绿色</div>
<p class="div2 title">段落</p>
<p>11111</p>
```
#### ID选择器
将html元素后面添加ID标签属性，利用标签属性值当作选择器来使用，在标签属性值前面加一个"#"
权重：100
> ID在页面中具有唯一性，不能重名
> ID选择器是配合javascript来使用的
```
<style>
#div1 {
color: orange;
}
</style>
<div id="div1">大盒子</div>
```
#### 通配符选择器
匹配了所有的html元素
语法*{css属性名：css属性值}
权重：0 < * < 1
> 在项目中，通配符选择器不用，他比较消耗性能
> reset.min.css 清除默认样式表
```
* {
margin: 0;
padding: 0;
}
```
#### 后代选择器（派生选择器）
在一个根元素（大盒子）的范围内，去查找它的后代元素
语法：祖辈选择器 后代选择器{}
权重:所有选择器权重相加之和
> 作用：增加权重，精确查找范围
```
ul li{
color: purple;
}
ul li span{
color: red;
}
.box ul li span{
color: green;
}
ul span{
color: yellow;
}
.box ul span{
color: blue;
}
<ul>
<li>1</li>
</ul>
<ol>
<li>2</li>
</ol>
<div class="box">
<ul>
<li>
<span></span>
</li>
</ul>
<ol>
<li>
<span></span>
</li>
</ol>
</div>
```
#### 分组选择器
将同一份css样式，分给了不同的html元素，并给这个html元素添加css样式
语法：选择器1，选择器2，选择器3{css样式}
权重：独立计算的，不会相加
```
div,p,h2,span{
color: red;
}
<div class="box">大盒子</div>
<p>段落</p>
<h2>标题</h2>
<span>行内小模块</span>
```
#### 子级选择器
存在包含关系的元素选择，通过他的父级选择子级
语法：父级选择器>子级选择器
权重：所有选择器权重相加之和
```
.div>ul>li {
color: red;
}
<div class="div1">
<ul>
<li>1</li>
</ul>
<ol>
<li>2</li>
</ol>
</div>
```
#### 伪类选择器
给html元素添加某种状态
例如：鼠标经过时的状态
权重为：10
> 伪类选择器在项目中常用的状态时"hover"
```
/* hover 鼠标经过时的状态 */
.nav a:hover{
color: green;
font-weight: bold;
```
#### 标签属性选择器
利用标签属性名和标签属性值当作选择器来使用，来选择html元素
语法：[标签属性名]{css样式}
[标签属性名=标签属性值]{css样式}
权重：10
> 如果遇到HTML元素中带有class标签属性是，一般都用类选择器来选择html元素，不会使用标签属性选择器
```
[title]{
color: red;
}
[title=dhz]{}
[class]{}
[class=box]{}
<div class="box" title="dhz">大盒子</div>
```
#### 交集选择器
两种选择器选择同属一个元素时，可以用我们的交集选择器来准确选择html元素
权重:所有选择器相加之和
> 交集选择器**标签选择器和类选择器集合**标签选择器和标签属性选择器相组合、变迁选择器和id选择器相结合、类选择器和类选择器相结合、类选择器和标签属性选择器相结合
```
/* 最常用的 */
div.box{
color: red;
}
div[box]{
color: red;
}
.box[title]{
color: red;
}
<div class="box" title="dhz"></div>
```
### CSS常用的样式
```
/* 高度 */
height: 100px;
/* 宽度 */
width: 100px;
/* 背景颜色 */
green;
/* 字体颜色 */
color: white;
/* 字体大小 */
font-size: 16px;
/* 文字水平居中 left居左是默认值，right居右，center居中 */
text-align: center;
/* 行高，文字垂直居中 */
line-height: 100px;
/* 文字加粗 bold加粗，normal去掉加粗*/
font-weight: bold;
/* 首行缩进 */
text-indent: 2em;
/* 行间距 */
line-height: 26px;
font-size: 14px;
/* 去掉下划线 */
text-decoration: none;
/* 去掉小黑点/序号，去掉标签的默认样式 */
list-style: none;
```