CSS+DIV
1. 导入CSS
<link href="test.css" type="text/css" rel="stylesheet">
2. 标记选择器 h1{} p{} 选择HTML中所有h1以及p标签
类别选择器 名称自定义 .one{} .two 前面带"." 对应HTML标签 用class="one"声明
ID选择器 #one #two <p id="one"> ID唯一 所以只能使用一次
集体声明 h1,h2,h3,h4{} h2.special,.special,#one{}
<html>
<head>
<title></title>
<style type="text/css">
h1{
color : blue ;
font-size : 18px ;
}
h1.special{
color : red ;
font-size : 23px ;
}
.special{
color : green ;
}
</style>
</head>
<body>
<h1>标记选择器</h1>
<h1 class="special">标记选择器</h1>
<p class="special">类别选择器</p>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
p b{
color : maroon ;
text-decoration : underline ;
}
</style>
</head>
<body>
<p>
嵌套使<b>用CSS</b>标记
</p>
嵌套之外<b>标记</b>不生效
</body>
</html>
3. 盒子模型 设定width和height的值来控制content的大小。在IE7或Firefox，width和height的值都是值width+padding或者height+padding的值。
margin 指的是元素与元素之间的距离。
若是行内元素，块与块的距离 margin-right + margin-left
若产生换行效果，则距离为max(margin-bottom,margin-top)
4.
<html>
<head>
<title></title>
<style>
div.father
{
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px 20px;
border:1px solid #000000;
}
div.son
{
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:20px;
padding:15px;
border:1px solid #004993;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
子div
</div>
</div>
</body>
</html>
5.如果将字块的Position属性设置为absolute，这两个字块都将不再属于其父块，都相对于页面定位。
在IE中，只有left和top两个位置发挥作用，而right和bottom值因为冲突，没有根据需要进行调整。在设计时，只设置left和right的其中之一，以及top和bottom这两个属性中的一个。