iT邦幫忙

DAY 3
7

新手前端日記系列 第 3

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

由平面設計的角度來看 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 同步


上一篇
[新手前端]從平面設計前進 HTML
下一篇
[新手前端]從平面設計前進 CSS-2 選擇器之.class #ID
系列文
新手前端日記30
0
ted99tw
iT邦高手 1 級 ‧ 2012-10-11 17:33:40

chibc提到:
因為我完全是網路上跌跌撞撞自修的

沙發

既然是自修的,而且看樓主的文又是那麼的自然,那還有什麼好說的....

大推,猛推,狂推.....不推不是真宅男啊.....

唱歌唱歌唱歌

0
SunAllen
iT邦高手 1 級 ‧ 2012-10-11 19:13:22

CSS的精深...對沒學過平面設計的我,一直是個門檻啊!讚

0
carl830
iT邦研究生 5 級 ‧ 2012-10-20 22:03:04

會寫在上面是因為要先讓瀏覽器先知道怎麼排版,這樣在顯示的時候才會比較快,另外也能避免如果最後讀到css,導致網頁重新排版的問題

我要留言

立即登入留言