CSS學習.0（基礎知識，一般格式，class,id

本文章來自我的個人網站，如感興趣，歡迎訪問我的個人網站：http://www.qingshuimonk.com/

1. 在html中鏈接CSS的方式：

   link type="text/css" rel="stylesheet" href="stylesheet.css"

   另外也可以在html的head標籤中添加style標籤來定義，不過這樣就失去了把內容和表現分開的功能。

2. CSS中一般格式爲：

   selector {
       property: value;
   }
   

   注意，在CSS中，定義的每一行結尾都是帶有分號的！
   selector的內容可以是p,img,table等等等等，property可以是font-family,font-size這些內容，value自然就是property所對應的值。
   例如，如果我想把html文件中段落裏面的字體設置爲garamond,18px,綠色，那麼應該這樣做：

   p{
       color: green;
       font-family: Garamond;
       font-size: 24px;
   }
   

3. 在定義中，每個property後面可以帶有多個value，除第一個外，後面的叫backup value，在使用中，瀏覽器會首先適配第一個value，如果無法適用(如無此對應的字體)，那麼將會按順序採用後面的backup value，直到能夠適用爲止。
   PA：在實際使用中，合理添加backup value是明智的。
4. 一個通過html和css設置按鈕的方法：
   在html中建立一個div標籤，添加文字和鏈接，在css中設置它爲適當的大小，併爲其加入背景色。就造成了點擊此區域能打開某鏈接的功能：

   div{
       height: 50px;
       width: 120px;
       border-color: #6495ED;
       background-color: #BCD2EE;
       border-radius: 5px;
       margin: auto;
       text-align: center;
   }
   

   以上代碼來自codecademy，實現了一個居中的按鈕框。

5. html中標籤的關係：
   把html中的標籤看成樹狀圖，那麼body和head兩個標籤無疑是最開始的兩個分支，每一個分支對於之後的分支都爲其parent，之後的分支都是他的child，同級別的分支互爲sibling。
   在CSS中，如果採用selector1 selector2 ... selectorN的方式，那麼之後定義的內容會對html裏所有滿足該關係的標籤起作用。例如：

   div li p{
       font-weight:bold;
       color: #7ac5cd;
   }
   

   其會對所有只要是div裏面的li標籤裏的p起作用，哪怕其真正的關係是div->ul->li->div->p，這段CSS代碼同樣會對後面的那個p其作用。如果只想影響到滿足div->li->p的標籤，即，direct childre，那麼需要在CSS中用到“〉”符號，即：

   div > li > p{
       font-weight:bold;
       color: #7ac5cd;
   }
   

6. class和id:
   在html文件中如果對於很多標籤甚至是不同類型的標籤想要設置相同的屬性，那麼可以使用class，具體用法是在標籤中加上class="className"，然後在CSS中：

   .className{
       font-weight:bold;
       color: #FFFFFF;
   }
   

   這樣所有歸爲className的標籤都將被這段CSS代碼修改到。
   而如果只想對某一個標籤修改並且不想影響到其他同類的標籤時，爲其添加id無疑是最好的做法，具體用法類同class，即在標籤中加上id="idName"，然後在CSS代碼中：

   #idName{
       font-weight:bold;
       color: #FFFFFF;
   }
   

   注意在CSS中，class名字前面要加“.”而id名字前面要加"#"。