DIV +CSS 学习笔记总结

第一天

网页有三个部分组成
结构(Structure)、表现(Presentation)、行为(Behavior)

结构化标准语言： XHTML、 XML
表现标准语言： CSS
行为标准 对象模型 W3C DOM、ECMAScript 等

结构 Structure
XML： Extensible Maskup Language 可扩展标记语言
XHTML：The Extensible HyperText Markup Language

表现 Presentation
CSS：Cascading Style Sheets 层叠样式表单

行为 Behavior
DOM：Document Object Model 文档对象模型

在html中插入样式表
[code]


[/code]

第二天

CSS的特殊性 Specificity

[code]
h1 {color:blue;} /*简单选择符的特殊性=1*/
.warning{color:red;} /*类选择符的特殊性=10*/
#main{color:black;} /*ID选择符特殊性=100*/
p em{color:yellow;} /*特殊性=2*/
p.note em.dark{color:gray;} /*特殊性=22*/
[/code]

CSS常用分类
1.块级元素 （display:block） 如 body、table 等
2.内嵌元素 （display:inline） 如 a、span 等
3.列表元素 （display:list-item） 仅有li
4.隐藏元素 （display:none） 不被显示

CSS实例
[code]
div {
font-family: "宋体"; /*字体类型*/
font-size: 12px; /*字体大小*/
line-height: 140%; /*行高*/
color: #0000ff; /*颜色*/
font-style: normal; /*字体样式*/
font-weight: normal; /*粗细*/
text-decoration: underline; /*修饰*/
background-color: #CCCCCC; /*背景颜色*/
background-image: url(img/l_bg.gif); /*背景图片*/
background-repeat: repeat-x; /*横向重复*/
background-position: center top; /*位置*/
text-align: center; /*文本对齐，可为负数*/
text-indent: 24px; /*缩进*/
display: block; /*块级元素*/
margin: 5px; /*边界*/
clear: left; /*清除*/
float: left; /*浮动*/
height: 400px; /*方框高度*/
width: 600px; /*方框宽度*/
padding-top: 1px; /*填充*/
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
border-left-width: 1px; /*边框大小*/
border-left-style: solid; /*边框样式*/
border-left-color: #0000FF; /*边框颜色*/
list-style-position: inside; /*列表类型*/
list-style-image: url(img/b_01.gif);/*项目符号图像*/
list-style-type: disc; /*位置：内*/

overflow: scroll; /*溢位*/
position: absolute; /*位置类型*/
visibility: visible; /*显示 可见*/
z-index: 5; /*Z轴*/
left: 5px; /*置入*/
top: 5px;
right: 5px;
bottom: 5px;
clip: rect(1px,2px,3px,4px); /*裁剪*/

}
[/code]

一旦使用绝对定位，元素将脱离原来的文档流，浏览器依据【置入】的数值将元素显示在一定的位置。
【显示】(visibility) 若设置隐藏，则元素将不显示，但是元素所占的位置将被留出来。
【Z轴】(z-index) 定义元素在页面内互相重叠时，数值较大的元素将显示在数据较小的元素上面。
【溢位】(overflow) 设置当元素的内容大于元素的高和宽的时候，是否出现滚动条。
【裁剪】(clip) 检索设置对象的可视区域。可是区域外事透明的。定义了绝对（absolute）定位元素的可视区域的尺寸，必须将position属性值设置为absolute, 此属性才可使用。

第三天

盒模型(box model)
填充(padding)、边框(border)、边界(margin)都分为“上右下左”4个方向
[code]
div {
margin: 1px 2px 3px 4px; /*按照顺时针方向缩写*/
padding: 1px 2px 3px 4px; /*按照顺时针方向缩写*/
border: 1px solid #333;
}
[/code]

CSS内定义的宽和高，指的是填充以内的内容范围。
元素的实际宽度 = 左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

盒模型总结
1.边界值可为负值
2.边界默认的样式(border-style)为不显示(none)
3.填充不可为负
4.对于块级元素，未浮动的垂直相邻元素的上边界和下边界会被压缩。例如：有上下两个元素，上元素的下边界为10px, 下面元素的上边界为5px, 则实际两个元素的间距为10px(两个边界值较大的值)。
5.浮动元素（无论是左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
6.内联元素，例如a，定义上下边界不影响到行高。
7.如果盒中没有内容，则即使定义了高度和宽度都为100%，实际上只有0%，因此不会被显示。

第四天

IE5.5中的盒模型错误
CSS中定义的元素宽度(width)指的是元素内内容的宽度，
而Windows IE5.5 认为宽度(width)=元素内容+填充+边框。
解决办法设置元素显示(display)属性为inline

缩写属性
上右下左
如果“上≠下”且“右=左”， 可以简写成 3个值(上 右左 下)，如“margin: 5px 10px 20px 10px”可以写成“margin: 5px 10px 20px”。
如果“上=下” 且“右=左”， 可以简写成2个值（上下 右左），如“margin:5px 10px 5px 10px”可以写成“margin:5px 10px”。
缩写颜色
“#006600”可以缩写成“#060”

链接样式定义的顺序和重要，要遵循“LVHA”规则，即“Link”、“Visited”、“Hover”、“Active”