CSS 教學 (一)

在前面兩篇的HTML教學(第一篇 以及 第二篇)中已經簡單地介紹了HTML的撰寫方式、結構,但是這在網頁設計上面來說還是不太夠,所以我決定開始介紹CSS。

當然,我在這個地方並不是要教你怎麼用CSS做出一個視覺感超棒的網頁,這不是這一系列教學的目的,而是要領你入門,知道網頁設計金三角(就是HTML / CSS / JavaScript)中負責視覺外觀的那一部分的基礎知識。

好了,閒話休提,是時候來窺探CSS (Cascading Style Sheet) 這個在好幾年前被稱為「無名語法」的重要功臣了。不過在此之前,先讓我提一些事情,請記下來。

描述語言?

有些人會說,HTML / CSS是「描述語言」,那什麼是描述語言呢?讓我舉個例子給你聽。

今天走在路上,左前方有一個人逆向走了過來吸引了你的注意,你跟旁邊的朋友說:「欸,你看左前方那個人,就是戴著綠色帽子、身高160左右,體重47左右的女生。」

這就是一種描述,透過文字敘述來指定一個對象,或者是說:「今天班上的所有學生必須穿著白襪子、素色的鞋子;男生必須把頭髮剪短、女生請把頭髮綁起辮子。」

這樣就是一種描述,描述被指定的對象應該要怎樣呈現它的「外觀」,這就是描述語言,而不論是HTML還是CSS,都是在做這樣的事情,譬如說:「這張網頁最上方有一個表頭區塊,裡面有一個標題一的文字寫著"Hello, world",然後底下有一個idcontainerdiv標籤(後面會介紹什麼是id)。」這樣就是去描述這張網頁的內容會有哪些標籤。

「所有的h2標籤中的文字顏色都要顯示為綠色。」這個則是CSS在做的事情。

我該如何在網頁中加入CSS?

在前面的教學之中看到的都是HTML,到底CSS要怎樣寫呢?其實有三個方法,但是為求方便我在這邊只先提一種辦法。

如果你還記得HTML的基本格式的話,應該會對<head></head>這對標籤組合有印象,這一段是用來宣告這張網頁內會用到的一些功能性的東西,同樣的我們也可以在這個地方撰寫CSS,但是我們必須要用<style></style>標籤來把CSS內容包住。

我該用什麼東西撰寫CSS?

基本上,撰寫CSS跟撰寫HTML一樣不需要特別的工具,一個純文字編輯器就可以搞定一切撰寫。只是有些編輯器可以幫助你在撰寫CSS上面有著更好的工具可以使用,譬如當你需要設定顏色的時候會跳出一個顏色選擇器給你使用。

在這邊,我依舊是使用Sublime Text 2這套軟體來撰寫教學所需要用到的範例。

顏色?怎麼設定呢?

在電腦的世界裡面,顏色常用RGB三個字來表示,所以常會聽到有人說「欸,這個顏色的RGB是多少?給我一下」之類的話,但是在電腦的世界裡面其實不只有RGB而已,還有HSLLab等顏色的描述法,不過在CSS中我們最常用到的還是RGB了。

RGB代表什麼呢?分別代表的是RedGreenBlue三種顏色,透過輸入所謂的十六進位碼來指定紅色有多少、綠色有多少、藍色有多少。簡單的說呢,RGB它是一個調色盤,透過加入多少量的紅色、綠色與藍色來調配出相對應的顏色。

十六進位是什麼,這個深入一點的可能要請你自己去Google一下,簡單的說呢就是把0~255這256個數字轉換成遇到16就進位,然後遇到數字是9以上的就用A, B, C, D, E, F代替,所以十六進位的數字從0到15就會是用0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E來代表。

然後RGB碼是兩個一組兩個一組來搭配的,然後數字越大代表越明亮、數字越小代表越黯淡,所以假設我要設定純紅色,RGB就會是#FF0000。不得不提的是那個#到底是什麼。這個#就是用來表示顏色色碼的開頭的意思,當看到#之後接著3個或6個字碼的時候就代表示顏色。不過為什麼會有3個字碼的版本呢?我們拿紅色來解釋好了。

紅色的色碼就是#FF0000(或者#ff0000),但是它其實可以縮寫成#f00,因為它是三組都是重複數字,所以可以這樣寫。不過什麼是重複數字呢?像是#336699,我們就可以寫成#369#224488我們就可以寫成#248這樣。但是如果是#00AF33這樣呢?我們可以寫成#0AF3嗎?答案是不行的,我們一定只能寫成#00AF33才可以。

id? class?

在撰寫CSS之前我們要先來介紹HTML標籤中最常被用來跟CSS相關聯的兩個屬性:

  1. id
  2. class

這兩個屬性在前面兩集HTML教學中並沒有提到,是因為我覺得先留在這個地方講可能會比較恰當,不過要怎樣使用呢?這兩者又有什麼差異呢?

所謂id,全名就是identifier,用來「識別」的東西。我們有時候會需要識別某一個HTML元素到底是什麼用途的時候可以用id這個屬性來處理,常見的大概就是<div id="container"></div>來知道這個是一個容器、<span id="alert"></span>來表明這個span標籤是一個alert用途的東西。然而,既然是一個識別用途的東西,那麼在這個網頁之中同樣名稱的id就不被允許重複出現,也就是說一張網頁之內必須只能夠有一個idcontainer的標籤,這點請牢牢記著。

然而,有時候我們需要讓很多個標籤都有同樣用途的時候該什麼辦?譬如說我們會需要有叫做box的標籤來放一些被群組過的小物件,或者會需要很多個sidebar(側邊欄),總不能夠命名為<div id="box-1"></div><div id="box-2"></div>這樣吧?超級麻煩啊,有一百個怎麼辦?

這時候我們就可以請class出來了。class的中文名稱之中有一個就叫做「類別」,表示這個標籤到底是「屬於哪個類別」。是屬於box這個類別的?是屬於sidebar這個類別的?所以我們就可以寫成<div class="box"></div><div class="sidebar"></div>這樣子的HTML了。

而因為class的特性,所以class是允許重複使用的,也就是說同一張網頁內可以有多個相同class的標籤,這點跟id是剛好相反的。

CSS,初次見面,你好!

說了這麼多,終於準備進入重頭戲,讓我們瞭解到為什麼前面要廢話這麼多,並且一探CSS的神秘色彩吧!

CSS的語法其實是有許多種方式來表明要被設定的內容,但是就我常用的是三種:

  1. 指定標籤 - 標籤選擇器(又稱:元素選擇器)
  2. 指定id / class - ID選擇器 / class選擇器
  3. 指定某些屬性 - 屬性選擇器

這種東西叫做CSS選擇器,英文是CSS Selector,也就是用來選擇要設定CSS內容的標籤用。然後,整個CSS語法的寫法其實就只是這樣:

選擇器 {
  屬性: 屬性值;
}

假設我要設定所有h2的顏色為綠色的話,可以這樣寫

h2 {
  color: green;
}

這代表著,讓CSS去找出所有的h2標籤,並且將顏色(color)設定為綠色(green)。

好了,這樣你也會寫CSS了 (無誤),在下一次的教學中會更詳細地介紹CSS的寫法。

Comments

comments powered by Disqus