一.引入css的三种方式
1.行间式
<div style="width: 100px; height: 100px; background-color: red"></div>
2.内联式
<head> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head>
3.外联式
file: zero.css
div { width: 100px; height: 100px; background-color: red; }
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
二 样式
# 样式与长度颜色
#### 1、基本样式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 2、长度
* px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
* mm：毫米
* cm：厘米
* in：英寸
* pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
* em：相当长度，通常1em=16px，应用于流式布局
#### 3、颜色
* rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
* rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
* hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
* hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
* #AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
三 常用样式
#### 1、字体样式
* font-family：字体族科，多值用于备用，以,隔开
```css
font-family: "STSong", "Arial";
```
* font-size：字体大小
* font-style： 字体风格 normal \| italic \| oblique
* font-weight：字体重量 normal \| bold \| lighter \| 100~900
* line-height：行高
* font：字重 风格 大小/行高 字族
#### 2、文本样式
* color：文本颜色
* text-align：横向排列
```css
left 居左 | center 居中 | right 居右
```
* vertical-align：纵向排列
```css
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象顶端对齐
```
* text-indent：字体缩减
* text-decoration：字划线
* letter-spacing：字间距
* word-spacing：词间距
* word-break：自动换行
```css
normal：默认换行规则
break-all：允许在单词内换行
```
#### 3、背景样式
* background-color：颜色
* background-image：图片
```css
background-image: url(bg.png);
```
* background-repeat：重复
```css
repeat | no-repeat | repeat-x | repeat-y
```
* background-position：定位
```css
top | bottom | left | right | center
```
###### v_hint：定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center
* background-attachment：滚动模式
```css
scroll | fixed
```
###### v_eg：父级设置属性，子集内容超出父级范围
###### v_hint：掌握基本属性
五 css选择器
# CSS选择器
## 一、基础选择器
#### 1、通配选择器
```css
* {
border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签
```
#### 2、标签选择器
```css
div {
background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span
```
#### 3、类选择器
```css
.red {
color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配
```
#### 4、id选择器
```css
#div {
text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配
```
## 二、基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
###### v_hint：id选择器必须保证单文档的唯一性
## 三、组合选择器
#### 1、群组选择器
```css
div, span, .red, #div {
color: red;
}
```
- 一次性控制多个选择器
- 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合
#### 2、子代(后代)选择器
```css
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
#### 3、相邻(兄弟)选择器
```css
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
#### 4、交集选择器
```css
<div class="d" id="dd"></div>
div.d#dd {
color: red;
}
<div class="d1 d2 d3"></div>
.d1.d2.d3 {
color: red;
}
```
## 四、组合选择器优先级
- 组合选择器优先级与权值相关，权值为权重和
- 权重对应关系
| 选择器 | 权重 |
| :--------: | :---: |
| 通配 | 1 |
| 标签 | 10 |
| 类、属性 | 100 |
| id | 1000 |
| !important | 10000 |
- 选择器权值比较，只关心权重和，不更新选择器位置
- 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合
## 五、属性选择器
- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签
###### v_hint：属性选择器权重等价于类
###### v_test：掌握所有选择器，并熟知选择器优先级
## 六、css选择器
1.组合选择器
群组选择器
#每个选择为可以位三种基础选择器任意一个，用逗号隔开，控制多个。
div,#div,.div{
color:red
}
后代（子代）选择器
.sup .sub{
后代
}
.sup .sub{
后代
}
.sup > .sub{
子代
}
兄弟（相邻）选择器
.up~.down{
兄弟
}
.up + .down{
相邻
}
交集选择器
section.ss#s{
标签类名id名综合修饰
}
2.复杂选择器的优先级
1.与修饰符位置无关
2.属性选择器与类选择器权重相同
3.id 无限大于 类[属性] 无限大于 标签
4.权重只与个数相关，个数（类型）均相同时，最后由位置决定
3.伪类选择器
链接标签四大伪类
：hover(悬浮）| ：active(点击）
：link | visited
位置相关
：nth-child() | :last-child 先确定位置再匹配类型
：nth-of-type() 先匹配类型再确定位置
取反
选择器：not(修饰词) | div:not(:nth-child(2))
4.盒类型
margin + border + padding +content(width x height)
都具有自身区域
marigin参与布局，不参与盒子显示，其他都参与盒子显示
border颜色自身定义，padding和content颜色都由背景色填充
#整体设置
padding:上 右 下 左（无边取值对边）
#分开设置
padding-top: 10px;
padding-right: 10px;
padding-bottom： 10px;
padding-left: 10px;
#整体设置
border: 10px solid black;
# 分开设置
border-top: 10px solid black;
border-reght: 10px solid black;
border-bottom: 10px solid black;
border-left: 10px solid black;
如何要保证显示区域大小不变，增加padding和border，可以相应减小content的区别域
5.盒模型布局
完成自身布局：margin-left | margin-top
下移|右移： top取正值|left取正值
上移|左移： top取负值|left取负值
作为兄弟，上盒子的垂直布局会影响下盒子的垂直方位，上盒子的结数为为下盒子的开始位置。
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
