高级选择器
通过父类到子类,兄弟选择,相邻选择器,位置选择器,多类,群组
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;
}