CSS是什麼？

CSS是什麼？

Written by Wanding on 21 August 2020

下面的六張圖片，各自代表不同的網頁視覺風格。但是，您知道嗎？它們是出自同一個網頁HTML檔案，只是搭配不同的CSS就能做出如此不同風格的網頁。

CSS到底是什麼呢？用居住的房屋來比喻，HTML就是梁柱、牆壁、門窗等結構，但是它只是個毛坯屋而已，並不適合居住。人們在要搬進去住之前，需要花一點時間為牆壁上色粉刷、進行隔間、燈光配置..等，讓屋子更舒適點。 這些改變顏色、形狀、視覺、修飾的功能就是提昇要提昇房子的美感和可住性。相同道理，在網頁的世界裡，CSS就是網站美感的裝潢，提昇網頁的可看性！

CSS是由Cascading Style Sheets（階層樣式表）各取單字第一個字母組成，是一種程式語言，主要用來控制如何顯示網頁。所以目前的網頁趨勢，就是HTML負責 網頁的架構，控制網頁外觀的部份則交給CSS來做。

W3C組織於1996年制定了CSS的標準，為CSS1；後來於1998年公佈CSS2標準。到了2011年公佈CSS3標準，大幅支援動畫及立體效果，過去依靠圖片或Flash物件來呈現動態按鈕文字..等，現在只要透過CSS3的功能就辦得到。

CSS的優點

1. 讓網頁的內容與格式脫鉤

早期的網頁設計常採用一些特殊技巧來呈現外觀，雖然表顯很亮眼，但因為內容與格式的依賴性太高，導致一旦要更新文字或圖片內容，格式也必須隨之修改，其結果需耗費大量的時間和人力去維護網頁。

近年來的作法是撰寫HTML檔時，只使用與內容結構相關的HTML標籤。例如<p>、<h1>、<span>，與格式相關的標籤盡量不要用，如<font>、<small>、<big>等標籤。凡是涉及變更格式的工作，一律改由CSS來做。

網頁的內容與格式脫鉤，當我們要改變網站所有按鈕的大小和特效，或是更改主要文字內容的顏色，只要在CSS進行相關屬性的修改，就會所有的網頁全部一起改，方便有效率的管理及維護。

2. 避免重複撰寫程式碼

如果不用CSS，而是個別在HTML標籤上設定屬性，如<h2 color=blue>，如果<h2>出現100次，那麼color=blue也會一併出現100次。如此寫出來的程式碼會變得肥腫，無形中增加網頁運作的時間。

若使用CSS來做，只需要在CSS檔案定義一次，之後的<h2>標籤就會自動呈現CSS設定的屬性。如此，既可減少設計師重複編碼，程式碼更精簡，網頁開啟的速度會更快。

CSS的語法

CSS的使用方法由選擇器(Selector)和宣告(Declaration)兩個部份所組成，而宣告又分為屬性(Property)和值(Value)，如下圖所示：

選擇器種類

選擇器是用來選擇這條規則要套用的對象，因對象不同，選擇器常被分為三類：

  1. 標籤選擇器(Tag Selector)

    HTML的元素作為選擇對象，所以他的名稱必定是某一個HTML的元素名稱。如：p、div、span等等，不可以使用自訂的名稱。

  2. 類別選擇器(Class Selector)

    此種選擇器的格式為.xxx，而xxx為自訂的名稱。比如：.navbar、.col-md-6、.my-5等。使用類別選擇器，代表以xxx類別為套用對象。例如：<p class="my-5">內容文字</p>，這樣寫法，則文字區塊的上面會空出2rem的邊界(margin)，同樣文字區塊的下方也會空出2rem的邊界。

  3. 識別碼選擇器(ID Selector)

    這種選擇器的格式為#xxx，其中xxx為自訂的名稱。如:#type1、#gifstyle等。使用id選擇器，代表以id＝xxx的元素為套用的對象。也就是，對於名稱為xxx的元素，套用此規則。

宣告

宣告(Declaration)是用來指定某個屬性(Property)的設定值(Value)，屬性和設定值之間使用冒號:，跟HTML使用等號是不同的。

規則合併

  • 具有相同宣告的規則可以合併
    h2{color:blue;}
h3{color:blue;}
h4{color:blue;}
    由於h2、h3、h4都有相同的宣告，所以我們可以把它們合併為ㄧ 
    h1,h2,h3{color:blue;}

  • 相同選擇器的規則可以合併
    body{color:brown;}
body{text-align:center;}
body{padding:2rem;}
    選擇器都是body，所以我們可以把不同的宣告合併為一 
    body{color:brown;
text-align:center;
padding:2 rem;
}

使用CSS的注意事項

  1. 所有的宣告都必須包含再大括弧{ }之中。
  2. 每一種宣告最後都必須用分號;結束，包含最後一個宣告也是
  3. 若要加上註解，必須用/* 和 */圍住註解的文字。
  4. 若屬性值包含空格，必須用英文雙引號("")或英文('')單引號包圍起來
例如： 
 body{color:brown;    /*褐色字體*/
 text-align:center;   /*字體居中*/
 padding:2 rem;   /*邊界2rem*/
 }

回目錄頁