DIV+CSS网页布局技巧20例（第5页）-远方教程

　　DIV+CSS网页布局技巧实例9：不需要重复定义可继承的值

　　CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
<!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=gb2312" /> <title>无标题文档</title> <style> body { background:url(/upfile/images/bg.jpg)} #layout { position:absolute; top:50px; left:200px; width:500px; height:500px; border:1px solid #006699; background:#fff; filter: alpha(opacity=80); moz-opacity: 0.8; padding:30px; font-size:18px; font-weight:bold;} #son_layout { width:300px; height:200px; background:#fff; border:1px solid #f60;} </style> </head> <body> <div id="layout"> <p>标准之路（这是父层）</p> <p> </p> <div id="son_layout">这是子层，继承父层的字体大小及粗体属性</div> </div> </body> </html>
提示：可以先修改部分代码后再运行

　　DIV+CSS网页布局技巧实例10：最近优先原则
　　如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个class"update"

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中，class="update"将被使用，因为class比p更近。

第1页第2页第3页第4页 第5页 第6页第7页第8页第9页第10页