小总结
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;
文本样式
color:green;/*文本颜色*/
text-align:center;/*文本居中*/
/* text-align:left; *//*文本居左，默认*/
/* text-align:right; *//*文本居右*/
text-indent:40px; /*首行缩进*/
border:1px solid #000;
line-height:100px;/*行高*/
/* text-decoration:none; *//*文本装饰，none默认值没有装饰*/
text-decoration:underline;/*文本装饰为下划线*/
边框与尺寸
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(0,0,0,.2);
opacity：.5；
取值范围：0~1
两者的区别：
opacity是元素下所有元素都透明化
rgba：只透明背景颜色
边框
border:1px solid red; 全边框
border-（top，bottom，left，right）：1px solid red;边框可以加上下左右。
border-width:2px; 边框的宽度
border-style:solid(实线) dotted(虚线)
border-color:red; 边框的颜色
特殊：transparent（透明边框）
