BootStarp4實做入門

4. CSS基本概念

一、關於CSS

  1. 由於BooStrap是一套CSS框架,故簡單了解CSS用法是必要的。
  2. CSS,英語:Cascading Style Sheets,簡稱CSS,中文通常稱為層疊樣式表串接樣式表
  3. CSS可用來替網頁上的各種元件設定其外觀。
  4. 一般HTML負責搭建網頁的文件結構,而透過CSS來美化其外觀。

二、使用方法

  1. 基本概念:挑選網頁中的元件,套上指定樣式。
  2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」,如:
    body {
      font-family: '微軟正黑體';
    }
    
  3. 若有多個宣告,請用「;」隔開。
  4. CSS樣式屬性以及可用的值可從這裡查詢: http://css.doyoe.com
  5. 套用樣式的三種方法:

     

    行內樣式

    內部樣式

    外部樣式

    影響範圍

    最小

    單一頁中

    許多頁

    優先權

    最高

     

     

    用法

    <HTML標籤 style="CSS宣告;">

    <style type="text/css">

    CSS宣告;

    </style>

    <link href="CSS檔.css" rel="stylesheet">

  6. 一個頁面可以同時套用好幾個css檔或設定,若裡面有挑選器重複的,則以最後讀到的為主。
  7. 在CSS檔中,還可以用import來引入其他的CSS檔:如:@import url("block.css");

三、CSS的三種挑選器

  1. 標籤挑選器:即一般網頁標籤。如:bodyh1divp...等,只要是該標籤都會受影響。
    • (1) 樣式表:p {CSS屬性: 值;}
    • (2) 網頁:<p></p>
  2. ID挑選器:樣式表以「#名稱」宣告,網頁則需使用id屬性,id不可重複,如:
    • (1) 樣式表:#home{CSS屬性: 值;}
    • (2) 網頁:<div id="home"></div>
  3. 類別挑選器:樣式表以「.名稱」宣告,網頁則需使用class屬性,class可以重複,且可以同時設定好幾個,如:
    • (1) 樣式表:.row{CSS屬性: 值;}
    • (2) 網頁:<div class="row"></div>
  4. 基本上,BootStrap就是一堆類別挑選器的組合