首頁 > 開發者 > CSS

CSS學習筆記:級聯和繼承

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

級聯是階層式樣式表的一個關鍵概念.重要到以此來命名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

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. @import "e.css" screen;
  6. -->
  7. </style>
  8. </head>
  9. <body>
  10. <table>
  11. <tr>
  12.   <td>left</td>
  13.   <td class="righttd">
  14.     <div id="mybrowse">
  15.       <dl>
  16.         <dt>Experience Browse List</dt>
  17.         <dd>Hibernate Quickly</dd>
  18.       </dl>
  19.     </div>
  20.     <div id="trackerlist">                 
  21.       <dl>
  22.         <dt>Relation Notes:</dt>
  23.         <dd> Asp native Object</dd>
  24.         <dd class="btcompartmk">Comment posted By:sandy(11:30Pm Ch) </dd>
  25.         <dd>T-SQL詳解</dd>
  26.         <dd class="btcompartmk">Story submitted By:xiaofanku(15:00Pm Hr)</dd>                          
  27.       </dl>
  28.     </div>
  29.     <div id="topbrand">                                       
  30.       <dl>
  31.         <dt>Top Brand:</dt>
  32.         <dd>UML:Shopping Cart</dd>
  33.         <dd>UML:CRM架構</dd>
  34.       </dl>
  35.     </div>
  36.   </td>
  37. </tr>
  38. </table>
  39. </body>
  40. </html>

e.css

 

  1. .righttd{
  2. margin:0;
  3. padding:0;
  4. width:230px;
  5. height:auto;
  6. vertical-align:top;
  7. }
  8. .righttd div{
  9. float:left;
  10. margin-left:5px;
  11. margin-bottom:20px;
  12. padding:0;
  13. }
  14. .righttd div dl{
  15. float:left;
  16. margin:0;
  17. padding:0;
  18. width:225px;
  19. border:1px solid #ccc;
  20. background-color:#fff;
  21. }
  22. .righttd div dl dd ul{
  23. float:left;
  24. }
  25. .righttd div dl dt{
  26. float:left;
  27. margin:0;
  28. padding-left:5px;
  29. padding-top:5px;
  30. width:220px;
  31. height:25px;
  32. background-color:#ddd;
  33. }
  34. .righttd div dl dd{
  35. float:left;
  36. margin:0;
  37. padding-left:10px;
  38. width:210px;
  39. line-height:20px;
  40. }

5.1繼承值
大多數情況下,繼承值都會沿用,就好像它本身設定在元素上一樣,例:font-family和color.display,border,margin和padding屬性是不繼承的.注意:
background-color不是繼承的.若沒有設定時,預設值是特別值:transparent(意思:在下面的顏色可見)

5.2計算值
font-size屬性出現繼承時有些不同,因為使用者實際上沒有繼承聲明,使用者繼續了計算值.有些值是絕對值(px是絕對值,em是相對值),但是大多數是相對值,例:smaller或3em.繼承相對值時,在傳遞給子項目之前. 首先計算該值

5.3指定繼承
若想從父元素繼承屬性,但是預設時它時實際上沒有那樣作,那麼就可以在所編寫的規則中使用:inherit值.樣本:

  1. div.standout{
  2. border:1px solid #ddd;
  3. }
  4. div.standout p{
  5. border:inherit;
  6. }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More