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. 標籤挑選器：即一般網頁標籤。如：body、h1、div、p...等，只要是該標籤都會受影響。
   • (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就是一堆類別挑選器的組合