1.选择器
1) 元素 p div
2) 类选择器
html
<p class="box"></p>
css
.box{样式}
3) id选择器
html
<p id="box"></p>
css
#box{样式}
4)后代
ul li
5)子代
ul>li
6)相邻兄弟
.list+li
7)通用兄弟
.list~li
8)结构伪类
ul
li
li
li
li
ul>li:first-child 选取父元素下的第一个孩子
ul>li:last-child 选取父元素下的最后一个孩子
ul>li:nth-child(n) 选取父元素下的第n个孩子
2.css
1)字体相关样式：
font-family:"黑体"; 设置字体类型
font-size:16px; 设置字体大小
font-weight:bold/100/200/300/400/500/600/700/800/900;
font-style:italic(倾斜) normal(正常);
2)display:改变元素的类型
行内元素
转换成行内块： display:inline-block;
转换成块元素： display:block;
块元素
转换成行内元素：display:inline;
转换成行内块： display:inline-block;
行内块元素
转换成行内元素 display:inline;
转换成块元素 display:block;
3)文本相关样式
color:"red";设置文本的颜色
text-align:center(居中) left(左) right(右) 文本对齐方式
text-indent:12px; 首行缩进
line-height:30px; 设置行高
text-decoration:none(默认值) undeline(下划线)
4)边框与尺寸
css单位：
px 像素 屏幕上的一个点
% 相对单位 根据父元素的大小来变化
in 英寸 1 in=2.54cm
cm 厘米
mm 毫米
em/rem
颜色单位：
red blue #F0F0F0
红 （0-255）
绿 （0-255）
蓝 （0-255）
rgb
r:red
g:green
b:blue
rgb(0,0,0) 黑色
rgb(255,255,255); 白色
rgb(255,0,0); 红色
rgb(0,255,0) 绿色
rgb(0,0,255) 蓝色
rgba()
a:alpha 透明度
范围：0-1
0:完全透明
1：完全不透明
opacity:.5;透明度
opacity与rgba()的区别：
opacity:能把所包含的所有内容都变成透明
rgba()只改变当前元素的透明度
5)边框
border:1px solid #000;
border-top:上边框
border-bottom: 下边框
border-left:左边框
border-right:右边框
border-width:2px; 边框的宽度
border-style:solid(实线) dotted(虚线)
border-color:red; 边框的颜色
特殊：transparent（透明边框）