字体设置:
text-align:center
color:red
font:900 30px/120px "STSong" "微软雅黑" (备用字族)字重 大小/行高 字族
字划线:
text-decoration:underline|line-through|overline
盒子水平居中:
margin: 0 auto;
margin-left:auto;#自动匹配到最左
reset操作
大多数系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局,
通常在开发前,将需要用到的预定义标签的默认样式清除,该操作就称之为reset操作
body,h1,h2,h3 p{
margin:0;}
ul{
margin:0;
padding:0;
list-style:none;(将小点取消)}
a{
text-decoration:none;(将下划线取消)
color:black}
高级选择器:
1,群组
div,p,a{}
2.后代,子代
body div{}空格隔开,子代的子代还是后代
body>div{} 大于号,只能控制子代
3.兄弟,相邻
.div1~.div2{}兄弟
.div1+.div2{}相邻
4.位置
li:nth-child(2n){}
li:not(:frist-child) a{}
5.多类,一个标签有多个名字 class=" 大名 小名"
.大名.小名{}
高级选择器优先级
优先级和个数(权重)相关
基础选择器优先级占主导:id无限>class>标签
选择器优先级相同时和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于一个类名
边角圆角
左上为第一个角
border-radius:30px 60px;第一个角30,30 第二个角60,60 第三个跟第一一样,第四个跟第二一样
border-radius:50%圆
border-radius :50px 10px / 150px x轴y轴分离,y轴都是150px
a 的四大伪类
:link(未有连接过的状态,连接初始状态)
:hover鼠标悬浮状态
:visited 访问过以后的状态
:active 鼠标按下时的状态
div可以用的两个状态,hover active即跟连接没有关系的两个状态
背景图片之精灵图
div{background :url("")相对地址
no-repeat不平铺
10px 20px
x轴偏移,y轴偏移}
默认的背景图片左上角和标签的左上角重合
通过调整位置让标签显示想要显示的图案
精灵图控制本质:控制背景图片的位置
background-position-x
background-position-y
div:hover{}