本人一直在從事.net的開發，介面都是採用的WPF，近期花了一個多月進行HTML前端的學習，在這裡呢進行學習總結和歸納。

　　本系列將主要分為4個模組：

　　　　控制元件

　　　　樣式

　　　　佈局

　　　　JavaScript

　　根據多年WPF的開發經驗，介面就是控制元件及樣式與佈局的組合，再加上程式碼來控制互動邏輯，本期先對HTML常用的樣式屬性進行歸納。

　　選擇器

　　選擇器用於對HTML控制元件及css的樣式進行匹配，常用的選擇器有如下幾種：

　　id選擇器

　　以下的樣式規則應用於元素屬性 id="para1":

1 #para1
2 {
3     text-align:center; color:red;
4 }

　　class選擇器　　

　　在以下的例子中，所有擁有類名為center的 HTML 元素均為居中。

1 .center 
2 {
3     text-align:center;
4 }

　　所有的 p 元素使用 class="center" 讓該元素的文字居中:

1 p.center 
2 {
3     text-align:center;
4 }

　　分組選擇器

1 h1,h2,p
2 {
3     color:green;
4 }

　　以上樣式與下面的效果一致

 1 h1
 2 {
 3     color:green; 
 4 } 
 5 h2 
 6 {
 7      color:green; 
 8 } 
 9 p 
10 {
11      color:green; 
12 }

　　巢狀選擇器

　　適用於選擇器內部的選擇器的樣式

• p{ }: 為所有 p 元素指定一個樣式。
• .marked{ }: 為所有 class="marked" 的元素指定一個樣式。
• .marked p{ }: 為所有 class="marked" 元素內的 p 元素指定一個樣式。
• p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。

　　後代選擇器

　　以下例項選取所有插入到 <div> 元素中的 <p> 元素: 

1 div p 
2 {
3     background-color:yellow; 
4 }

　　子元素選擇器

　　以下例項選擇了<div>元素中所有直接子元素 <p> ：

1 div>p 
2 {
3     background-color:yellow; 
4 }

　　子元素選擇器與後代選擇器的區別在於，子元素選擇器僅對直接子元素有效，如果進行了一層巢狀，樣式就不再有效。

　　屬性選擇器

　　下面的例子是把包含標題（title）的所有元素變為藍色：

1 [title] 
2 {
3  color:blue; 
4 }

　　屬性和值選擇器

　　下面的例項改變了標題title='runoob'元素的邊框樣式:

1 [title=runoob] 
2 {
3     border:5px solid green; 
4 }

　　常用的選擇器就介紹完了。

　　屬性

　　注：佈局相關的屬性將在下一節進行講解，這裡只進行樣式屬性的講解

　　Background 背景

　　該CSS 屬性定義背景效果:

• background-color  用於設定背景色
• background-image   用於設定背景圖片
• background-repeat   使用者設定背景重複填充，分為不重複、x方向重複、y方向重複、xy方向均重複
• background-attachment  用於設定背景的滑鼠滾動樣式，分為隨滾動移動，不隨滾動移動，從父元素繼承
• background-position 用於設定背景的位置

　　Text 文字

　　文字不是屬性，是介面元素，該元素主要進行以下幾種屬性的設定：

　　Color : 字型顏色

　　Text-align : 文字對齊方式

　　text-indent ：首行文字縮排

　　font-family ： 字型設定

　　font-size：字型大小

　　text-decoration 文字裝飾，最常用的場景就是給連結a去掉下劃線  

　　border 邊框

　　border-width 邊框寬度

　　border-color 邊框顏色

　　另外，如果需要，我們也可通過來進行某一條邊的屬性設定

　　Border-(left/right/top/bottom)-(color/style/width)

例如：

　　Margin / padding 外邊距 / 內邊距

　　 除了可以如上圖，對每個方向的外邊距/內邊距進行設定外，還能夠直接通過margin/padding進行多個方向的設定

　　margin屬性可以有一到四個值。

• margin:25px 50px 75px 100px;
  • 上邊距為25px
  • 右邊距為50px
  • 下邊距為75px
  • 左邊距為100px

• margin:25px 50px 75px;
  • 上邊距為25px
  • 左右邊距為50px
  • 下邊距為75px

• margin:25px 50px;
  • 上下邊距為25px
  • 左右邊距為50px

• margin:25px;
  • 所有的4個邊距都是25px

　　Padding也可通過一樣的方式進行設定。

　　Size 尺寸

       尺寸的屬性主要是寬度/高度/最大寬度/最大高度/最小寬度/最小高度，分別對應如下屬性

　　Display/Visibility 可見性

　　這兩個屬性都可控制控制元件的可見性，主要值如下：

　　Display:none 控制元件不可見，不佔用佈局

　　Visibility:hidden 控制元件不可見，佔用佈局

　　Display:inline 在一行內顯示相關控制元件

　　Display:block 控制元件作為塊元素顯示

　　Float: 浮動

　　當窗體尺寸變化時，float屬性將幫助控制元件進行移動來完成重新佈局。

　　Demo實戰：網站導航欄

　　在開始之前我們需要知道一些有關連結的狀態

　　a:link {color:#FF0000;} /* 未訪問的連結 */

　　a:visited {color:#00FF00;} /* 已訪問的連結 */ 

　　a:hover {color:#FF00FF;} /* 滑鼠劃過連結 */ 

　　a:active {color:#0000FF;} /* 已選中的連結 */

　　首先我們需要在html中新增一個列表，如下

1 <ul>
2     <li><a href="#home">主頁</a></li> 
3     <li><a href="#news">新聞</a></li> 
4     <li><a href="#contact">聯絡</a></li>
5     <li><a href="#about">關於</a></li> 
6 </ul>

　　很顯然不夠美觀，我們需要對它的樣式進行調整

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

　　即可得到如下檢視

　　這裡我們得給列表新增滑鼠懸停的效果，這裡用到的是a:hover.

li a:hover{
    background-color: #555;
    color: white;
}

對於選中項，我們可以通過設定其class = “active”來實現。

1  li a.active {
2     background-color: #4CAF50;
3     color: white;
4   }

1 <ul>
2     <li><a class = “active” href="#home">主頁</a></li> 
3     <li><a href="#news">新聞</a></li> 
4     <li><a href="#contact">聯絡</a></li> 
5     <li><a href="#about">關於</a></li> 
6 </ul>

　　具體實現怎麼進行選中項的切換，將在下下節javascript後進行講解。