2012年7月13日 星期五

Html 基本說明（6.1）- Css 簡易選擇器說明.1-設定字體顏色！



今天來說明選擇器的階層設定，在寫網頁時，我們在指定樣式，單純指定層樣式是比較容易簡單的
例如
html:

<body>

   <h1>the 1 h1</h1>

</body>

CSS: 

<style type="text/css">

h1 {
           color:gray; //灰色
}

</style>

輸出結果為：
2012-06-13_123929
html:

而當我們要指定h1標籤裡面，還要加<a>的連結
<body>   

   <h1>the 1<a href="#">h1</a></h1>

</body>


輸出結果：
2012-06-13_124214    

"h1"字樣的顏色為系統內定之顏色，其底線也為系統內定顏色，我們用css 將其改變顏色

CSS:

<style type="text/css">

h1 {
           color: gray;
}
h1 a {
             color: red;   //紅色
}
</style>


輸出結果：
2012-06-13_124531
以上，對html和css 有基礎的人，應容易明白！
再者，我們須加一點變化，在html 裡，再加些程式碼吧！
我試著將h1 裡加入 p ，而再將p 加入一個a 的連結
HTML:
<h1>the 1 <a href="#">h1</a>

          <p>the 1 <a href="#">p</a></p>
</h1>


輸出結果：
2012-06-13_134026
輸出結果，發現 h1 和 p 皆為 紅色的 ，是因為我們在css 中定義 h1 a { color：red；}，故成如此
說明，h1 和裡面只要是a 的連結的部份，皆會變成紅色的
再來介紹 ">" 這個符號的用處，他是將樣式性質套於指定元素的子元素，嗯~~不懂，還是說例子吧！
我們將由上面的css 碼改成以下code
CSS：

<style type="text/css">

h1 {
           color: gray;
}
h1>a {
             color: red;   //紅色
}
</style>

輸出結果：
2012-06-13_134550
由結果可發現在 h1字的連結為紅色，p字的連結回復成原來的連結，亦可發現">" 其實有點指定的意思，他僅指定
h1 下面的a ，依照樣式表變為紅色，而h1下面的P的a連結，並不是他所指定的，故成如此顯示，如果再將程式改成下狀況

<style type="text/css">

h1 {
               color: gray;
}
h1>a {
                color: red;
}
h1>p>a{
              color:green;
}
</style>

輸出結果
2012-06-13_135108  
 結果可發現，我如果另指定，可得以上結果

 這個CSS選擇器經常使用，也是常常讓人搞不懂的地方，希望能夠多多了解！

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)