HTML-css selector

Css selector 基本有三種 HTML（TAG）selector ， ID selector ， Class selector

css selector 綜合使用 ： 重用，子選擇器，組選擇器

 

HTML（TAG）selector ：

HTML selector 就是 HTML 的 tags, 好比 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你的定義來顯示了.

HTML selector 的語法以下 
tag {property:value}

好比咱們想叫 H1 的顏色是紅的 H1 {color: red} 

 

Class selector：

Class selector 有兩種, 一種叫相關 class selector, 它跟一個 HTML 的 tag 有關係.

它的語法以下

tag.Classname {property:value}好比咱們想叫一些而不是所有 H1 的顏色是紅的 H1.redone {color: red}這樣在下面的語句中, 第一個 H1 是紅色的, 而第二個就不是了 

<H1 class="redone">紅色的題目</H1><H1>普通的題目</H1>

第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法以下 .Classname {property:value}假如咱們有下面這個定義.blueone {color: blue}那麼咱們能夠把他應用到不一樣的 Tag 當中去. 好比

 <H1 class="blueone">藍色的題目</H1><P class="blueone">藍色的段落</P>顯然 class selector 給了咱們更多的自由。

 

ID selector：

ID selector 其實跟獨立 class selector 的功能同樣. 而區別在於它們的語法和用法不一樣, 以及對於 Javascript 操縱 HTML 元素有幫助. 它的語法以下

#IDname {property:value}

假如咱們有下面的定義#yelowone {color: yellow}

咱們能夠運用這個定義到任何的有一樣 ID 名字的 tag, 好比 

<SPAN ID="yellowone">text here</SPAN>

你可能以爲既然 ID selector 和獨立 class selector 功能同樣, 爲何二者都存在呢. 若是你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素能夠被 CSS-P和 JavaScript 來操縱。

 

重用

常常會用到一些基本的式樣疊加，好比字體的顏色和加粗。網頁中可能同時出現三種狀況：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; }
重用、子選擇器和組選擇器的靈活使用能夠很是有效的減小代碼，同時很是有利的增長代碼的可讀性，具體的應用須要在具體編寫過程當中體會