CSS学习笔记:级联和继承
级联是级联样式表的一个关键概念.重要到以此来命名CSS.它定义如何组合规则.其中有些由WEB开发者提供,另一些由浏览器提供.当把这两者组合起来,可计算各个HTML标签上的属性值.
1.级联如何运作
级联是一个指示集,用于页面上给定元素应用什么规则.没有决定冲突规则的优先权的方法就不可能知道应该使用哪些样式
2.级联的顺序
示例:
.y{
color:block;
background-color:yellow;
}
该规则实际上是两条规则,只是刚好共享一个公共选择符:
.y{
color:block;
}
.y{
background-color:yellow;
}
理解这一点很重要,因为可以单独覆盖每个规则.因此只需要考虑那些冲突的规则.试图分析哪些规则优先时,总是将规则分析为如上代码所示的部分规则.
如何计算应用哪种规则?
按以下顺序:页面的作者 >用户 >浏览器.
下一步基于选择符和特殊的程序来给规则排序
内联样式属性 >id选择符(若规则有多个id选择符,具有id选择符最大数的规则优先) >比较元素数量(越多特殊性越高) >最近声明的规则有较高的优先权
示例:
a:内联样式属性,最近声明的规则有较高的优先权
a.html
<html>
<head>
<style type="text/css">
<!--
input{
border:1px solid #ddd;
}
-->
</style>
<link type="text/css" href="a.css" rel="stylesheet" media="screen" />
</head>
<body>
<input type="text" name="keywords" size="20" style="border:1px solid green;" />
</body>
</html>
a.css
input{
border:1px solid red;
}
a.html中的input应用的样式为:{border:1px solid green;}
因为:green最近 >#ddd内联 >red外部
b:id选择符(若规则有多个id选择符,具有id选择符最大数的规则优先)
b.html
<html>
<head>
<link type="text/css" href="b.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="div1">
First Div container test!
</div>
</body>
</html>
b.css
#div1{
font-family:Tahoma;
}
#div1{
font-family:Arial;
color:red;
}
#div1{
font-family:Courier;
color:#ddd;
font-size:16px;
font-weight:600;
}
c:比较元素数量(越多特殊性越高)
c.html
<html>
<head>
<link type="text/css" href="c.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="div1">
<ul>
<li>a.html</li>
<li>b.html</li>
<li class="c">c.html</li>
</ul>
</div>
</body>
</html>
c.css
.c{
font-family:Arial;
color:red;
}
#div1 ul li.c{
font-family:Courier;
color:#ddd;
font-size:16px;
font-weight:600;
}
3.级联和HTML属性
HTML也包含让用户影响页面外观的显示性属性,例:align,color,face,link,vlink,bgcolor和background.当这些属性与CSS规则冲突时,CSS规则覆盖HTML属性.
注意:若存在一个相应的CSS规则,才忽略HTML显示属性.
4.!important
若有必要,样式表的作者可以显式指定一条规则比其它规则更重要.您可以在b示例中的b.css中稍改一下
b.css
#div1{
font-family:Tahoma !important;
}
#div1{
font-family:Arial;
color:red;
}
#div1{
font-family:Courier;
color:#ddd;
font-size:16px;
font-weight:600;
}
自已刷刷浏览器看一看会出现什么的样式.
关于级联补充一点：
可以认为导入的样式表更疏远,也可以这样理解:如果有冲突,它具有较低的优先权.所有其他方面相等(id属性,类和元素的数量相同)的情况下,即使规则发生在在导入之前也可以认为导入的样式表的规则较近声明.
示例:
d.html
<html>
<head>
<style type="text/css">
<!--
@import "d.css" screen;
h2{
color:blue;
}
-->
</style>
</head>
<body>
<h2>This is a Example</h2>
</body>
</html>
d.css
h2{
color:green;
}
body{
color:#000;
}
5.继承
如果已经在父元素上设置了一些属性,那么就没有必要在每个元素上显式设置这些值.例:若在<body>上设置了font-family属性,页面上所有其它属性也会具有相同的值,除非另外的规则改变了它.称为:继承.页面元素从父元素<body>那里继承了属性值.
不是所有的属性都有自然继承,例:边框(border),边矩(margin),填充(padding)就不继承.否则,不管什么时候绘制盒子,它里面的所有元素都与它们周围盒子的类型相同.规范中定义每个属性时,通过默认指定每个属性要么继承,要么不继承.
示例(以前写的一部分):
e.html
- <html>
- <head>
- <style type="text/css">
- <!--
- @import "e.css" screen;
- -->
- </style>
- </head>
- <body>
- <table>
- <tr>
- <td>left</td>
- <td class="righttd">
- <div id="mybrowse">
- <dl>
- <dt>Experience Browse List</dt>
- <dd>Hibernate Quickly</dd>
- </dl>
- </div>
- <div id="trackerlist">
- <dl>
- <dt>Relation Notes:</dt>
- <dd> Asp native Object</dd>
- <dd class="btcompartmk">Comment posted By:sandy(11:30Pm Ch) </dd>
- <dd>T-SQL详解</dd>
- <dd class="btcompartmk">Story submitted By:xiaofanku(15:00Pm Hr)</dd>
- </dl>
- </div>
- <div id="topbrand">
- <dl>
- <dt>Top Brand:</dt>
- <dd>UML:Shopping Cart</dd>
- <dd>UML:CRM架构</dd>
- </dl>
- </div>
- </td>
- </tr>
- </table>
- </body>
- </html>
e.css
- .righttd{
- margin:0;
- padding:0;
- width:230px;
- height:auto;
- vertical-align:top;
- }
- .righttd div{
- float:left;
- margin-left:5px;
- margin-bottom:20px;
- padding:0;
- }
- .righttd div dl{
- float:left;
- margin:0;
- padding:0;
- width:225px;
- border:1px solid #ccc;
- background-color:#fff;
- }
- .righttd div dl dd ul{
- float:left;
- }
- .righttd div dl dt{
- float:left;
- margin:0;
- padding-left:5px;
- padding-top:5px;
- width:220px;
- height:25px;
- background-color:#ddd;
- }
- .righttd div dl dd{
- float:left;
- margin:0;
- padding-left:10px;
- width:210px;
- line-height:20px;
- }
5.1继承值
大多数情况下,继承值都会沿用,就好像它本身设置在元素上一样,例:font-family和color.display,border,margin和padding属性是不继承的.注意:
background-color不是继承的.若没有设置时,默认值是特别值:transparent(意思:在下面的颜色可见)
5.2计算值
font-size属性出现继承时有些不同,因为用户实际上没有继承声明,用户继续了计算值.有些值是绝对值(px是绝对值,em是相对值),但是大多数是相对值,例:smaller或3em.继承相对值时,在传递给子元素之前. 首先计算该值
5.3指定继承
若想从父元素继承属性,但是默认时它时实际上没有那样作,那么就可以在所编写的规则中使用:inherit值.示例:
- div.standout{
- border:1px solid #ddd;
- }
- div.standout p{
- border:inherit;
- }