一. background
复合属性：一个属性有多个属性值。
#bg{
url(bg.jpg) center top no-repeat gray fixed;
}
等同于
#bg{
background-attachment: fixed;
background-color: gray;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
?
二. margin
margin外边距的问题:
1. 上下外边距会叠加:
<style type="text/css" >
#box1{
height:200px;
width:200px;
border:1px solid #F00;
margin-bottom:20px;
}
#box2{
height:200px;
width:200px;
border:1px solid #00F;
margin-top: 20px;
}
</style>
<div id="box1"></div>
<div id="box2"></div>
?
2. 父子级包含的时候子级的margin-top会传递给父级(内边距替代外边距)
<style type="text/css" >
#box1{
height:380px;
width:400px;
background:#F00;
padding-top:20px;
}
#box2{
height:200px;
width:200px;
/* margin-top: 20px; */
background:#FF0;
}
</style>
<div id="box1">
<div id="box2"></div>
</div>
?
三. 盒子模型:
?
盒子大小 = border + padding + width / height
盒子宽度 = 左border + 左padding + width + 右padding + 右border
盒子高度 = 上border + 上padding + height + 下padding + 下border
?
四. 文本样式:
word-spacing 单词间距
text-indent 首行缩进
letter-spacing 字母间距
?
五. 锚点:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#box1">百步飞剑</a>
<a href="#box2">夜尽天明</a>
<a href="#box3">诸子百家</a>
<a href="#box4">万里长城</a>
<a href="#box5">君临天下</a>
<div id="box1" style="height:1000px">百步飞剑</div><br/>
<div id="box2" style="height:1000px">夜尽天明</div><br/>
<div id="box3" style="height:1000px">诸子百家</div><br/>
<div id="box4" style="height:1000px">万里长城</div><br/>
<div id="box5" style="height:1000px">君临天下</div><br/>
</body>
</html>
?
六. 选择符优先级
?
样式优先级:
类型选择器(1) < class(10) < id(100) < style行间样式(1000) < js
同级样式默认后者覆盖前者.
?
七. 伪类详解
伪类用于向被选中元素添加特殊的效果.(元素在特定情况下才具备)
link ? 未访问(默认)
hover ?鼠标悬停(鼠标划过)
active 链接激活(鼠标按下)
visited ?访问过后(点击过后)
a四个伪类的顺序: ?link ?visited ?hover ?active
记忆方法: love hate
?
a伪类的应用:
? a. 四个伪类全用(搜索引擎,新闻门户, 小说网站)
? b. 一般网站只用( a:hover{ } )
?
IE6不支持a以外其他任何标签的伪类;
IE6以上的浏览器支持所有标签的hover伪类;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
a:link{font-size:60px; text-decoration:none;color:black;}
a:visited{color:green;}
a:hover{color:yellow;text-decoration:underline;}
a:active{color:red;}
</style>
</head>
<body>
<a href="#">baidu</a>
</body>
</html>
?
