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中插入样式表

<link rel="stylesheet" href="x.css" type="text/css"/>
<style type="text/css" media="all">@import url(x.css);</style>

第二天

CSS的特殊性 Specificity

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*/

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

CSS实例

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);  /*裁剪*/
	
}

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

第三天

盒模型(box model)
填充(padding)、边框(border)、边界(margin)都分为“上右下左”4个方向

div {
margin: 1px 2px 3px 4px;  /*按照顺时针方向缩写*/
padding: 1px 2px 3px 4px; /*按照顺时针方向缩写*/
border: 1px solid #333;
}

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”

评论

1 楼 winter8 2009-10-15  

好贴，收藏了！