css式樣重用、子選取器和組選取器

來源:互聯網
上載者:User
css

工作與網頁製作有關,最近整理了一些css的東西,發出來,希望有用。

重用:
經常會用到一些基本的式樣疊加,比如字型的顏色和加粗。網頁中可能同時出現三種情況:1.字型為紅色  2.字型加粗 3.字型紅色加粗
這時我們只需要定義前兩個css:
.red{color:red;}
.b{font-weight:bold;}
第三種情況時用<div class="red b"></div>


子選取器:
相對來說,簡化html檔案的代碼更加重要,因此在css中使用子選取器非常有益,同時也使css代碼更加容易理解。比如下面的代碼:
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式樣,採用子選取器,可以省略代碼中li 和a 的class屬性,從而簡化代碼:
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
組選取器:
當一些元素類型、class或者id都有共同的一些屬性,你就可以使用組選取器來避免多次的重複定義。這可以節省不少位元組。
例如:定義所有標題的字型、顏色和margin,你可以這樣寫:
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用時,有個別元素需要定義獨立樣式,你可以再加上新的定義,可以覆蓋老的定義,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子選取器和組選取器的靈活使用可以非常有效減少代碼,同時非常有利的增加代碼的可讀性,具體的應用需要在具體編寫過程中體會。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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