1 链接伪类
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态
a:focus{属性:值;} 获取焦点
文本修饰
text-decoration: none | underline | line-through
a{
color:red;
text-decoration: none; //设置无下划线
}
a:focus{
color:orange;
}
a:hover{
color:yellow;
text-decoration: underline; //设置加入下划线
}
案 例:
<style type="text/css"> .nav{ height:40px; background-color=#aaa; text-align:center; } a{ display: inline-block; width:80px; height:40px; text-decoration: none; color:#000; font-weight:700; } a:hover{ background-color:#eee; text-decoration: underline; } a.public{ font-weight:700; color:#f14400; } </style> </head> <body> <div class="nav"> <a href="#" class="public">天猫</a> <a href="#" class="public">聚划算</a> <a href="#" class="public">超市</a> <a href="#" class="public">头条</a> <a href="#">阿里旅行</a> <a href="#">电器城</a> <a href="#">淘抢购</a> <a href="#">苏宁</a> <a href="#">智能生活</a>
==================================================
背景属性
1.1 background-color 背景颜色
1.2 background-image 背景图片
1.3 Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
1.4 Background-position left | right | center | top | bottom 背景定位
<style type="text/css"> .box{ height:500px; background-color:#999; background-image:url("2.png"); background-repeat:repeat-y; } </style> </head> <body> <div class="box"></div>
★方位值只写一个的时候,另外一个值默认居中。
★写2个方位值的时候,顺序没有要求。
★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。
Background-attachment 背景是否滚动 scroll | fixed
背景属性连写
★:连写的时候没有顺序要求,url为必写项。