高级选择器，边角，文本设置，和a的四大伪类选择器。图片精灵，模块定位，reset

高级选择器

通过父类到子类，兄弟选择，相邻选择器，位置选择器，多类，群组

div >(父到子)p     div   p 到后代   p,div

.div+.p              .div~.p

li:nth-child(3)表示第三个元素是li的话

li:body ul  nth-child(3)  在body ul下 第三个元素是li的话

优先级伪类等同于class都小于id 都小于内联式 小于!impotant

 

 

reset 清除系统默认设置

常用的 

p,body,h1,h2,h3,h4,h5,h6{margin=0}

ul{margin=0,padding=0,list-style:none}

a{text-decoration:none ,color:black}

 

模块位置

div{margin: 0 auto}

margin-left：auto

margin-left:(100%-self）/2

 

边角

左上右下，不足取对边

border-radius:50%

 

文本

文字：颜色 字族 字重 大小/行高

text-align: center; # 水平居中方式
color: red; # 字体颜色
font: 900 30px/120px "STSong"; # 字重 大小/行高 字族

# 了解
# em(自身->父->html) | rem(html)
text-indent: 2em;

font-size:50px;
  font-weight:bold; font-family: "楷体";
/*line-height: 200px; text-align:center ;*/
text-indent: 1em;
text-decoration:overline; underline  linethrough

 

a 四个伪类选择器

：link

：hover鼠标提示

：visited访问后

：active 转链接时

 

div {
background: url("img/bg.png") no-repeat 10px 20px;
图片地址 不平铺 x轴偏移 y轴偏移
}
精灵图操作本质: 控制背景图片的位置
backgroud-position-x
backgroud-position-y
div:hover {
backgroud-position-y: -20px;
}