CSS深入讲解

前言
我们在前面简单讲了一下CSS的知识，这章我们将一起深入学习和了解CSS的各种方法功能。

一、基础选择器

选择器，规范了页面中哪些元素能够使用当前设置的样式
就是一个条件，符合这个条件的元素都可以使用这个样式

1.通用选择器

{样式声明} （匹配所有元素，但是的效率非常低，不建议使用）
例：*{margin:0；padding:0}

2.元素选择器

标签关键字{样式声明;}

div{} p{}

3.ID选择器

<元素 id=“id值”>

#id值{样式声明}

id在一个页面中不能重复，所有id选择器只被一个元素应用

4.类选择器

使用.定义样式，哪个元素想用，用class都能调用
<元素 class=“类名”>

.类名{样式声明}

类选择器的其它用法
①.多类选择器

<元素 class="类名1 类名2 类名3.......">

②.分类选择器

元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}

③.类名的定义规范
①必须有.
②不能以数字开头
③只能包含- 或者_
v④尽量见名知意

5.群组选择器

选择器1,选择器2,选择器3…{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}

6.后代选择器

通过元素的后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代

选择器1 选择器2 选择器3{样式声明}

7.子代选择器

通过元素子代关系，来匹配元素
子代关系，一层嵌套为子代

选择器1>选择器2>选择器3{样式声明}

子代和后代选择器可以混合使用

#d1>p span{color:red;}

8.伪类选择器

匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态（input button）

9. 选择器权值

选择器权值，代表选择器的重要程度
重要程度高，优先显示
!import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无
权值的特点

当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示
有多个选择器的权值一样大，按照就近原则
添加了!important当前css样式直接获取最高优先级
群组选择器，不相加，个算个的
选择器权值的计算，不会超过本选择器权值的最大数量级
（部分内容参考ZeFei-Yin）

二、尺寸

1.尺寸

width: 
height: 
取值：1.px为单位的数字，rem 
	 2.% 但是如果设置高度，当前元素的父元素是body，%失效 
min-width 
max-width 
min-height 
max-height 

2.溢出处理

overflow:visible; 溢出部分显示，默认值 
overflow:hidden;溢出部分隐藏 
overflow:scroll; 带滚动条，不管是否溢出，都添加x/y轴的滚动条 
overflow:auto; 自动， 不溢出就没有滚动条，溢出自动在溢出方向添加滚动条 
overflow-x:scroll; 单独让x轴出现滚动条 
overflow-y:scroll; 单独让y轴出现滚动条

3.边框

3.1 边框的简写形式

同时设置4个方向的边框 
border: width style color; 
width- - - - 边框的粗细 
style - - - -边框样式 solid 实线 
					dotted 小圆点虚线 
					dashed 短线虚线 
					doubel 双实线 
color - - - -合法颜色，transparent 
取消边框 border:none / 0 ; 
最简方式 border: style; border:solid;

3.2单边的设置

border-top: 20px solid #f00; 
border-right: 20px dotted #00f; 
border-bottom: 20px dashed #0ff; 
border-left: 20px double #f0f; 
取消某个边框 
border-top: 0; 
border-right: 0; 
border-bottom: 0; 
border-left:0;

3.3单属性设置

border-width: 100px; 
border-style: solid; 
border-color: #CCFF00;

3.4单边单属性

border-top-width:  上边框宽度
border-top-style:  上边框样式
border-top-color:  上边框颜色
border-right-width: 
border-right-style: 
border-right-color: 
border-bottom-width: 
border-bottom-style: 
border-bottom-color: 
border-left-width: 
border-left-style: 
border-left-color:

4.边框的倒角（圆角）

把直角倒成圆角 
border-radius:圆角的半径 
取值：1.px为单位的数字 
	 2.% 50%就是圆 
单角的定义，圆角之间会相互影响 
border-top-right-radius: 值; 
border-bottom-right-radius: 值; 
border-top-left-radius: 值; 
border-bottom-left-radius: 值;

5.元素的额阴影

box-shadow: h-shadow v-shadow blur spread color; 
h-shadow x轴偏移量 
v-shadow y轴偏移量 
blur 阴影模糊程度 
spread 阴影大小 
color 阴影颜色 
inset 内部阴影

7.轮廓

多用于修饰文本框和按钮
绘制于边框外部一圈线条，不占页面空间
一般我们会把轮廓清除掉

outline:width style color; 
outline:0;