web开发案例ch06.ppt

第5章 层叠样式表(CSS) 教学目标 教学重点 教学过程 内容回顾 ◆选择符： * {color:red;} h1{color:red;} h2,h3{color:blue;} div h4{color:#990099;} #green {color:green;} .warning {font-style:italic;} p.warning {color:red;} p .warning{color:red;border:1px solid;} 内容回顾 ◆ CSS伪类(pseudo-class) a:link {color: #FF0000}???? /* 未被访问的链接 红色 */ a:visited {color: #00FF00}? /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00}?? /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF}?? /* 鼠标点中激活链接 蓝色 */ 区分不同链接 a.c1:link {color: #FF0000}? a.c1:visited {color: #00FF00}? a.c1:hover {color: #FFCC00}? a.c1:active {color: #0000FF}?? 内容回顾 ◆常用简写属性 font border background list-style {font:italic bold 11pt arial} { list-style:square inside url(/i/arrow.gif) } {border:5px solid gray;} {background:#00FF00 url(bgimage.gif) no-repeat fixed top; } 内容回顾 ◆ CSS盒子模式(Box Model) CSS盒子模式规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 内容回顾 .box { margin: 0; padding: 0; width: 500px; line-height:50px; border: 2px solid blue; text-align: center; color:red; } 内容回顾 html body h1 class=box 这个标题Box Model/h1/br p class=box一段文本Box Model。/p/br div class=box 这是一个div /div /body /html 属性的应用 ◆ CSS 定位 (Positioning) 　Position　　absolute，relative h2.pos_abs{ position:absolute; left:100px; top:150px } 属性的应用 h2.pos_left{ position:relative; left:-20px } h2.pos_right{ position:relative; left:20px /*左边增加20*/ } 属性的应用 ◆浮动和清除浮动 float left 元素向左浮动。 right 元素向右浮动。 none 默认值。 clear left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。 属性的应用 属性的应用 #redBlock{ width:200px; height:200px; background:#900; margin-top:20px; margin-left:20px; float:left; display:inline;} 属性的应用 #blueBlock{ width:300px; height:200px; background:#009; margin-top:20px; margin-left:20px; float:left;} 属性的应用 #grayBlock{ width:520px; height:80px; background:gray; margin-top:20px; margin-left:10px; float:left;} .clear{ clear:both;} 属性的应用 body div id=redBlock/div div id=blue