由平面設計的角度來看 CSS的基本概念
上一篇簡介了HTML，版面來比喻，HTML就是不同的元素，而CSS就是這些元素的造型。

如果說HTML是一篇有標題、大綱的文章，那麼CSS就是用來指定字型、大小、顏色、排版的樣式，所謂的CSS就是樣式表的意思。

同HTML一樣，CSS也是一種網頁設計師用來和瀏覽器溝通用的語言，瀏覽器永遠都會照你給的指示做出呈現，唯一的問題是設計師必需學會怎麼和他們溝通，所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異，其中尤以 IE的解讀方式和其他瀏覽器相差最多，所以在做樣式設計時，一般是以firefox 或 chrome的呈現結果為主，其次再修改指定讓IE也能做出類似的呈現。

既然CSS也是一種和瀏覽器溝通用的語言，首先就來介紹CSS的基本語法。

首先，你必需告訴瀏覽器你想要改變樣式的是HTML裡的哪一個元素 E (element)，這個E 可以是任何一個HTML裡的 tag (標籤)，再來就用CSS的語法把想要改變的樣式及其參數寫入文件中。

例如針對一個HTML裡的 <a> 指定字型、顏色：

<a style=" font-family:Aral; font-size:14px**"**>
<tag a 錨點的 樣式=" 字型: Aral ; 字級: 14像素">

其中的 style="" 部分是HTML裡的參數指定方式，像<a href="" alt=""></a> 裡面的一樣，只是這個參數是針對HTML的造型(style)來指定。而在CSS樣式裡面的指定方式也很簡單，造型類別:參數; 結尾用分號分隔。

如上述的標示方法，就叫做行內 CSS, 顧名思義就是把 style 造型寫在 HTML 各別的 tag 上，因為程式碼是由上往下一行行寫出來的，所以就叫行內CSS或是行內style。

另外還有一種寫在 HTML的 之間的樣式叫做頁面內的樣式：
在HTML裡標示的規則就是用 tag 包起來，頁面內的 <style>也一樣，把style包起來並告訴瀏覽器我現在寫的這一段是 text檔的 CSS ，如下：

<style type="text/css">
E{類型:參數;}
<style>

這種頁面式的<style>寫法其實不限於裡，只是因為HTML會由上往下讀取、解析，所以一旦你把<style>寫在太後面，網頁在解析時有可能就會因為順序的關係而沒解析到你的CSS，因此多半都是寫在裡。

最後一種最常用的是鍊入式的CSS，一樣是在HTML裡指定所以用HTML的規則：
<link href="css/reset.css" rel="stylesheet" type="text/css" />
讀取鍊結 來源路徑css/reset.css 行為參考stylesheet 類型text/css

這種鍊入式的樣式是把CSS都寫在另一個 .css 的檔案中，需要的時候再讀取就可以了。

三種寫法都是CSS，差別在於讀取速度、維護難易、權重上面。
因為網頁交給瀏覽器讀取時，都是由第一行開始往下讀開始解析，所以HTML裡寫的東西越少越好，可以增加讀取的速度，所以像行內的寫法，會讓HTML本身變得比較肥大，然而行內CSS、頁面內的CSS 問題最大的地方還不在讀取速度，是在維護方面，CSS用鍊入方式處理後，當你對網頁有任何樣式方面的改版需要，你就不需要動到HTML，只要在另一個被鍊入的CSS裡修改，就可以完成網頁的變更。

好處是網頁有時需要後端程式去套一些程式碼，一但你針對HTML做任何更動，程式就有可能因為 DOM 順序改變或其他因素而出現 BUG，所以現行的網頁設計，幾乎所有的CSS都是用鍊入式的。

今天先到這，明天開始解釋權重及元素選擇器

/* ===
如果有寫錯什麼還請大家不吝指教，因為我完全是網路上跌跌撞撞自修的，可能有搞錯什麼也不一定，請大家海涵
*/

chibc-blog 同步