清除系统默认样式
大多系统预定义标签，有默认样式，不满足实际开发需求，反倒影响布局
通常清除系统样式，利于开发
body,h1-h6,p,table {
margin:;
}
ul {
margin:;
padding:;
list-style:none; #清除列表样式
}
a {
text-decoration:none; #清除a标签下划线
color:black; # 设置a标签字体颜色
}
文本样式
简写： font: 字重 字体大小/行高 字族
font: normal 30px/200px "STSong"
<style>
color:red; 字体颜色
字体大小：相关属性都是从父级继承
font-size:inherit; 继承
font-size:12px; 字体最小为12px
font-weight:100-900 | bold粗线 | 字重
font-family:"微软雅黑" , "STSong" 华文宋 字族
line-height:100px; 行高
text-align:center | left | right 字体水平居中
text-indent:2em 文本缩进2个字，跟父级的字体有关
2rem 只和html的字体有关
text-decoration:none 清除划线
line_through 下划线
underline 中划线
overline 上划线
简写：font:字重 字体大小/行高 字族
font:normal 30px/200px "STSong"
</style>
高级选择器
群组选择器： 逗号 ，
<style>
.div1,.p1 {
width: 100px;
}
</style>
后代选择器：空格表示 div a
子代选择器：大于号表示 >
控制关系层次控制目标选择器
.sup > .sub { width: 100px; } 父子关系
.sup .sub { width: 100px; } 后代关系
兄弟选择器： + 相邻
~ 兄弟
通过关系层次控制一个目标选择器
.li2 ~ .li3 { width: 100px; } # 兄弟
.li2 + .li3 { width: 100px; } # 相邻
伪类选择器：
ul li:nth-child(3) { } 表示ul下的第三个li标签
ul:nth-child(3) > li:nth-child(6) { } 表示第 三 个ul下的第 六 个li
li:nth-child(3n-1) { } 表示偶数个
li:not(:last-child) {} 取反
多类选择器
.div.div1#dd {
width:50px;
}
<div class="div div1" id="dd"> </div>
高级选择器优先级
选择器优先级和个数有关
基础选择器占主导 id > class > 标签 > 通配
选择器优先级相同时，跟顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
边界圆角
左上角为第一个角，顺时针走， 先横后纵
div {
border-radius:50%; 圆形
border-radius:50%; 30px 60px 先横后纵
border-radius:50%; 30px/60px
}
a标签的四大伪类
未访问过状态
a:link {
} 鼠标悬浮状态
a:hover {
cursor:pointer; 手掌
} 鼠标点击时状态
a:active { } 鼠标离开时状态
a:visited { }
背景图片
background:图片地址 图片平铺 x轴 y轴
background:图片地址 图片平铺 x轴 y轴
background-image:url("01.png") no-repeat 20px 20px; background-repeat:no-repeat 不平铺
repeat 平铺
repeat-x
repeat-y background-position: 水平位置，垂直位置
center center; 居中
20px,50px; background-position-x:20px; x轴位移20px
background-position-y:20px; y轴位移20px