一.文本属性
1.文本水平对齐方式
水平居中 :text-align: center;
水平居左 :text-align: left;
水平居右 :text-align: right;
文本两端对齐 :text-align: justify;
2.文本装饰线
默认值 没有 :text-decoration: none;
上划线 : text-decoration: overline;
中划线 删除线 :text-decoration: line-through;
下划线 :text-decoration: underline;
3.首行缩进
text-indent: 30px;
可以设置负值 : text-indent: -30px;
em 1em=16px
text-indent: 3em;
百分比：相对于元素内容宽度进行设置
400*20% = 80px
text-indent: 20%;
text-indent: 80px;
4.color 字体颜色
color: rebeccapurple;
二.单行文本实现居中
1.水平居中 :text-align: center;
2.垂直居中
3.行高的值=盒子高度的值
line-height: 200px;
三.颜色的表现形式
1.颜色的英文单词
red blue
透明色:transparent
2.十六进制
0-9 a b c d e f
由#和六位16进制组成
#ff ff ff
如果两位一样可以简写 ff --f
#f f f
ps--设置前景色--吸哪里点哪里--复制#后面的代码
英文状态i快捷键,--吸哪里点哪里--右击--拷贝颜色的16进制代码
3.rgb
r:red 0-255
g:green 0-255
b:blue 0-255
rgb(255, 255, 255);表示白色
rgb(0,0,0);表示黑色
4.rgba(r,g,b,a)
r:red g:green b:blue
a:alpha 透明度 透明度在0-1之间表示,0表示完全透明 1表示完全不透明
四.表格的折叠边框
1.默认值：边框独立
border-collapse: separate;
2.边框合并 1px的边框
border-collapse: collapse;
3.border-spacing : 单元格之间的间距
4.注意:只有在边框独立border-collapse:separate时才能用
border-collapse: separate;
5.水平间距 垂直间距
border-spacing: 100px 200px;
border-spacing: 10px 20px;
border-spacing: 10px 10px;
一个值时 代表水平方向垂直方向的间距是一样的
border-spacing: 10px;
五.单元格的垂直对齐方式
顶端对齐 :vertical-align: top;
居中对齐 :vertical-align: middle;
底部对齐 :vertical-align: bottom;
六.常用复合选择器
1.常用复合选择器：
由两个或多个基础选择器通过用不同的方式组合而成的选择器
2. 基础选择器：
* 标签 class id
3.后代选择器
E F{
选择E元素中的所有后代元素F
}
空格隔开
A B C{
}
4. 子代选择器
E>F{
选择E元素中直系元素F
}
大于号隔开
A>B>C{
}
5.群组选择器
把具有相同样式的选择器写在一起，用逗号隔开
最后一个选择器不用加逗号
这四个标签样式一样
背景颜色、宽高一样，但是字体颜色不一样
h1,
p,
.box,
#a{
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
6.伪类选择器
用于超链接a标签
a:link{链接的默认样式}
a:visited{链接访问过后的样式}
a:hover{鼠标悬停的样式}
a:active{鼠标按下的样式}
:hover{鼠标悬停的样式}
不仅可以用于a标签,还可以用于别的标签
hover要求:父子关系才可以用
也可以用于自己滑入
7.兄弟选择器】
.相邻选择器 兄弟选择器
语法
示例:E+F{样式声明} 用加号连接
描述：【加号】连接一个或多个选择器
作用:E元素之后紧跟着的兄弟元素F
用于:兄弟之间的hover\
子代选择器
群组选择器
伪类选择器
相邻选择器
七.css盒模型
重要：要求掌握
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：外间距、边框、内填充、和实际内容。
1.content
内容：宽高
2.宽度:width
单位：
px em 百分比（按父元素计算） rem
max-width:最大宽度
min-width:最小宽度
3.高度:height
单位：
px em 百分比(按父元素计算)rem
max-height:最大高度
min-height:最小高度
八.内填充
内填充 内间距 padding
padding: 50px;
1. 单独写法
上内间距 : padding-top: 20px;
下内间距 : padding-bottom: 20px;
左边间距 : padding-left: 20px;
右内间距 : padding-right: 20px;
2.复合写法
一个值 四个内填充 padding: 20px;
两个值 上下内填充 左右内填充 padding: 20px 40px;
三个值 上内填充 左右填充 下内填充 padding: 20px 40px 60px ;
四个值 上内填充 右内填充 下内填充 左内填充 顺时针 padding: 20px 40px 60px 80px;
如果某个内填充不写 ,写0或0px padding: 10px 0 0 10px;
3.元素边框和元素内容之间的距离
是内容与盒子边框的距离
注意:设置padding会增大盒子模型,也就是会使盒子宽高变大
px
百分比（参照父元素来说）
不能设置负值
需要减去增大的盒模型，否则页面误差太大
4.用以设置的宽高进行内减
w:296px -28px =268px
h:195px -34px =161px
5.设置怪异盒模型
box-sizing:border-box;
会把设置的padding和边框自动进行内减
默认是旧版传统盒模型,需要自己计算把padding和边框进行内减
九.外间距
margin
两个盒子之间的距离
可以设置负值
margin居中
auto ：自动 浏览器会自动计算
1.块级标签
2.要设置宽度