# 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; ```