Daily Archives: 10/11/2012


[鐵人賽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 造型寫在 […]