[鐵人賽03]從平面設計前進 CSS-1


[新手前端]從平面設計前進 CSS-1

上一篇簡介了HTML,版面來比喻,HTML就是不同的元素,而CSS就是這些元素的造型。

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

同HTML一樣,CSS也是一種網頁設計師用來和瀏覽器溝通用的語言,瀏覽器永遠都會照你給的指示做出呈現,唯一的問題是設計師必需學會怎麼和他們溝通,所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異,其中尤以 IE的解讀方式和其他瀏覽器相差最多,所以在做樣式設計時,一般是以firefox 或 chrome的呈現結果為主,其次再修改指定讓IE也能做出類似的呈現。
<!–more–>
既然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的 <head> </head> 之間的樣式叫做頁面內的樣式:
在HTML裡標示的規則就是用 tag 包起來,頁面內的 <style>也一樣,把style包起來並告訴瀏覽器我現在寫的這一段是 text檔的 CSS ,如下:

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

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

最後一種最常用的是鍊入式的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都是用鍊入式的。

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

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


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC

看完有什麼想和版主講的,沒有就留個「閱」吧