Your posts match “ Tutorial ” tag:

HTML 教學 (一)

HTML 教學

簡介

網頁與網站

在開始撰寫我們的第一份HTML文件之前我想先簡單介紹一下網站與網頁之間的差異性。常常聽到人家說某某網站、某個網頁,但是其實網站跟網頁是有差別的,到底該怎麼分別呢?

我們先假設網站是一本書,如此一來網頁就是這本書內的分頁了,所以一個網站就等於是一個以上的網頁的集合體(當然也有所謂的單頁網站,就是只有一頁的網站)。更深一層的概念來說的話,網站是有某個明確目的為主的網頁的集合,譬如說是個人網站(Personal Website)就是一例,是以自我介紹為主要訴求的網站,裡面可能放著自己的介紹、作品集抑或是聯絡方式等來介紹自己;而在個人網站中的單獨某個頁面就是我們所說的網頁。

網頁與網頁之間彼此透過超連結(Hyperlink)互相連接,關於超連結我們後面就會提到了。透過超連結彼此串連起來就可以串起一本書的感覺,而這本書就是我們所說的網站,所以像是維基百科(http://zh.wikipedia.org)它就是一個很棒的網站,也自喻自己為網路上的大百科,就跟我們擺在書櫃上不一定會翻來看的百科全書一樣,而其中每個條目都是一個頁面,就像是百科全書內的每個頁面一樣。

網頁設計金三角:HTML、Java Script、CSS

這其實是我自己自創的名詞(也許有人用過了也說不定),但我之所以會說這是金三角是因為絕大多數的網頁都一定會有這三個東西,網頁透過這三個東西的各司其職最後呈現在各位的瀏覽器裡面,但是這三個東西到底分別在做哪些事情呢?

  • HTML:也是這份文件的主角,它扮演著骨架的角色。
  • Java Script:之後會提到,它控制網頁可以做的任何互動。
  • CSS:之後會提到,讓網頁可以美美的不可或缺的角色。

假設網頁是一個人的話,那麼HTML就是這個人的骨架、CSS就是這個人的外形(造型、皮膚顏色、身高體重 … 等)、Java Script就是這個人可以做哪些動作(可以稱為互動)。

當我們決定好一個網頁的架構之後可以透過CSS的描述來讓這個網頁變得更漂亮,再透過Java Script賦予這個網頁生命(但也不一定要這樣就是了)讓它可以有更多的互動能力,譬如說顏色互相變換、某個東西會旋轉(CSS 3之後可以直接用CSS來做到這件事情)等等。

網站伺服器(Web Server)、FTP是什麼東東?

製作好網頁(站)之後我們要把網站可以讓我們以外的人看到,畢竟獨樂樂不如眾樂樂嘛 … 所以我們要把東西放在網路上讓大家可以在我們電腦關機之後也能瀏覽,這個時候就必須把我們的網站透過FTP來上傳到網站伺服器裡面,這樣就能夠有一個網址可以把網頁的位置給公佈出去了。不過到底什麼是網站伺服器以及FTP呢?

先來談談FTP吧,FTP的全名是File Transfer Protocol,也就是檔案傳輸在用的通訊協定,能夠讓我們把檔案從自己的電腦傳到FTP Server上面去保存或者分享。

這個東西分為兩端,分別是Client端以及Server端。所謂的Client端就是我們自己的電腦,要把東西傳到遠端去的那一個地方就是所謂的Client端,中文叫做客戶端;而接收遠端傳送過來的檔案的這一端就被稱為是Server端,中文就叫做伺服器端。在Client端與Server端彼此之間都要安裝軟體才能夠讓Client端把檔案傳到Server端去,而Client端已經有非常多好用的免費軟體、自由軟體可以使用。

不過不管今天讀者的電腦是使用什麼作業系統,我們都能夠去下載 FileZilla 來當作Client端。倘若讀者是使用Mac OS X的話(也就是蘋果的作業系統),那可以上網找找Cyber Duck(圖示是一隻黃色玩具小鴨子)來用,或者是很不錯的Transmit(圖示是一台小卡車),筆者的朋友一直很推薦這套,有興趣的讀者可以自己下載來試試看。

接下來是Server,我們剛剛說到Client端是把檔案傳送給Server端存放、分享的。所以可以把Server端當成是我們的銀行,我們把錢存到銀行裡面,然後透過一些方式可以把錢給別人(轉帳)。

我們可以透過FTP來把檔案上傳到FTP Server上,而一般來說網頁空間的FTP都會替你直接開設一個用來放網頁的資料夾,我們稱這種資料夾叫做網頁根目錄,絕大多數申請的網頁空間(不論免費或者是付費)的網站根目錄名稱都叫做public_html,只要把上傳的檔案放在這邊別人只要知道網址就能夠直接得到你的檔案(除非你有另外做過什麼隱藏的設定),這樣一來我們就可以輕易地讓大家看到我們的網站了。

然而什麼是網站伺服器(Web Server)呢?它是用來提供網頁資料給瀏覽器的,當我們輸入一個網址(假設是:http://hechien.wordpress.com)的時候瀏覽器會自動去找到這個網址的網站伺服器,然後跟它要求首頁的網頁下來最後呈現給我們看,這個就是網站伺服器會做的事情了。

網址跟網域名稱有什麼關係

網址跟網域名稱其實是一樣的東西,我們一樣舉 http://hechien.wordpress.com 為例來解釋這個東西的運作,不過我們還得先把這個網址拆成幾個部分來看會比較好:

  • http:// 這個代表我們要讓瀏覽器使用http通訊協定連線
  • hechien 這個代表主機的名稱叫做hechien,這個又稱為子網域名稱(Subdomain)
  • wordpress 這個代表主要網址叫做wordpress,這個又稱為主網域名稱
  • com 這表示這個網址是放在com主機底下

當瀏覽器得到這個網址的時候它會連線到com主機去,詢問有沒有wordpress這個主機並且索取主機的IP位置(我們就當作是地址吧),找到之後就會去問wordpress.com說有沒有hechien這個主機,如果找到之後就會連到hechien.wordpress.com看看是誰負責提供網頁資料的,然後再把網頁取回來顯示給讀者看。

HTML 5?CSS 3?

HTML 5是最近很火紅的一個課題,與CSS 3一起在2010年開始席捲整個網路圈,並且當蘋果公司前執行長Steve Jobs公開宣佈不會在iOS上支援Flash只支援HTML 5之後,許許多多的HTML 5、CSS 3的教學文章就如雨後春筍般一直冒出來,但這些東西到底是什麼呢?

其實這個「5」跟「3」不過就只是版本而已,在HTML的歷史中有過很多版本像是上一個版本是HTML 4.01;而CSS也有CSS 1, 2, 3的分別,每個版本都有每個版本的優點缺點以及主要強調的事情,如果讀者是剛接觸這個世界的話就不需要太過於關注這個問題,等到真正了解到HTML以及CSS的時候就一定會知道這些東西了,套一句長輩曾說過的話:「相遇得到」的啦!

用什麼做網頁呢?

在書局總是可以看到Dreamweaver、FrontPage等字樣的書籍,這些就是用來製作網頁的網頁編輯器,它們都提供了所謂的W.Y.S.I.W.Y.G.(What You See Is What You Get,所見即所得)的編輯功能,讓我們在開發網頁的時候可以很直接的看到我們的網頁大概長什麼樣子,並且能夠很容易的修改整個樣式,使用起來的感覺就像是在做Word或者是Pages文件一樣。

然而這種軟體都是需要付費購買的軟體,而且不便宜的價格總是令人卻步,再加上這本書內一點都不需要那種軟體的協助,所以還有另外一些軟體可以用來寫網頁,這種軟體稱之為文字編輯器。

其實網頁本身就是純文字檔案,只不過一般純文字檔案的副檔名是.txt而網頁的副檔名是.htm.html而已,所以其實只要把任何的網頁副檔名改成.txt或者把任何文字檔案改成.html都是能互通的,也因為這樣的特性所以其實我們完全可以用內建的純文字編輯器來編輯我們的網頁,不論是HTML、CSS抑或是Java Script都一樣。

在Windows下可以使用記事本來寫,或者可以去下載Notepad++、PSPad等軟體使用,但在這邊我推薦的是Sublime Text 2 http://www.sublimetext.com/2 來使用;如果今天讀者是Mac使用者的話也可以使用Sublime Text 2來編輯,或者上App Store下載Panic公司的Coda 2來編輯網頁,該款軟體很好用,十分推薦;如果讀者是Linux使用者的話,可以使用內建的gedit或者也下載Sublime Text 2來使用哦。

這本書的範例原始碼等將會在Mac OS X Mountain Lion 10.8上使用Sublime Text 2來編輯,所以可以下載來使用看看哦。

我們的第一份網頁:空白

接著就直接嘗試製作一個簡單的網頁吧,請學我打以下內容在你的文字編輯器裡面。

    <!doctype html>
    <html>
      <head>
        <title>Hello, world.</title>
      </head>
      <body>
        <h1>Hi, 你好</h1>
      </body>
    </html>

寫好後存檔並且給予檔案名稱:001_blank.html然後使用瀏覽器開啓,讀者應該會看到類似這樣的畫面

讓我們仔細看看這張圖片來比對一下兩者之間的關聯性。首先看一下最上面的標題有出現Hello, world.,這個就是在標籤之中<title></title>的用處,它會顯示在瀏覽器標題列上。接著我們看到了Hi, 你好用了很大的字來顯示,這個是用了<h1></h1>的結果。都看不懂沒關係,這些標籤我們還會在後面慢慢的提到它,現在我們繼續來從頭解讀一遍這個網頁的原始碼。

解說時間

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <body>

在網頁架構中我們看到了這四個東西,而這四個東西是一個網頁最必須出現的四個東西。

  1. Doctype是文件類型,它代表瀏覽器該用哪種方式讀取這份網頁檔案。HTML在歷史上有過許多版本,而且中途又殺出了XHTML這種文件格式,每份格式都有各自不同的撰寫條件,所以當在設計網頁的時候必須明確的指定一個文件類型讓瀏覽器可以正常的顯示,如果不這樣做的話網頁有可能會顯示不正常哦。

不過我並不打算在這邊列出所有的Doctype寫法,而在範例中這個Doctype是HTML 5的寫法,而且2011年開始絕大多數的網站都慢慢的採用這個Doctype,讀者可以直接記得這個Doctype類型即可。倘若讀者還想看看其他類型的Doctype的話可以到http://www.w3schools.com/tags/tag_doctype.asp看看。

  1. 這是用來告訴瀏覽說「現在已經準備開始顯示網頁內容了哦,請仔細讀取」用的,被<html>以及</html>包住的部分就是這份網頁會顯示的內容。

  2. <head></head>包住的範圍內是用來設定跟這張網頁有關的資訊,像是這網頁的編碼是哪種、這網頁的作者是誰、這網頁需要引入哪些CSS樣式表等都應該寫在這個地方才對。

  3. 重頭戲就在這邊,要讓瀏覽器顯示的部分都會寫在<body></body>之間,像是大標題、文章段落等。

重點提醒

在上面的這個範例裡面我們可以發現到一件事情,同樣一個標籤名稱會有兩種寫法,拿title來說的話就會有<title></title>兩種,這到底是怎麼回事呢?

網頁標籤分為開始標籤以及結束標籤兩種,所謂開始標籤的意思就是瀏覽器會知道從讀到該開始標籤的「現在」開始算起就都是跟那個標籤有關,直到遇到了結束標籤才會關掉跟那個標籤有關的效果或者作用,所以絕大多數的HTML標籤都是會有一個開始以及一個結束標籤用來包出一個範圍。不過等等,有些標籤是沒有結束標籤的像是

  • img: 圖片標籤
  • meta: 資訊設定標籤
  • br: 換行標籤
  • hr: 水平線標籤

這幾種標籤(還有其他的)都是因為不需要建立起一個範圍所以才不需要結束標籤,而撰寫的方法就是

  • <img />
  • <meta />
  • <br />
  • <hr />

練習是進步最好的方式

把結束標籤前面的斜線放在後面的角括號前面即可。

好了,我想讀者也可以花點時間嘗試改改這個範例網頁,譬如再增加一個<h2></h2>標籤或者增加<p></p>標籤,然後在其中輸入一些文字看看會怎麼樣。

h1標籤是所謂的第一級標題,而標題在HTML中總共有六級,所以分別是

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

可以每個都試試看哦!

標籤的屬性

這次的網頁內容是以下這樣

    <!doctype html>
    <html>
      <head>
        <title>Hello, world.</title>
      </head>
      <body>
        <h1>Hi, 你好</h1>
        <a href="http://hechien.wordpress.com/" target="_blank">hechien的部落格</a><br />
        <a href="http://www.google.com.tw">Google</a>
      </body>
    </html>

請存成002_attributes.html後用瀏覽器打開,應該可以看到這樣的圖片

我們可以看到這次的網頁多出了兩個東西,一個寫著hechien的部落格,另外一個則是寫著Google,這個就是所謂的超連結(Hyperlink)。

解說時間

現在我們來仔細看看超連結的標籤要怎樣寫:

<a href="http://hechien.wordpress.com/">hechien的部落格</a>

這個是超連結標籤的最簡單寫法,其中href="http://hechien.wordpress.com/"就表示這個超連結會導向後面所指定的網址,當有人點下這個超連結的時候便會導向到這個網址去。

hechien的部落格則會顯示在畫面上供人點擊,這個地方不一定要放文字,也可以是圖片或者只是一個單純的空間。

在這個例子裡面的href就是屬性,而href後面的=之後所指定的就叫做屬性值,也就是說在第一個超連結中的href屬性,它的屬性值就是http://hechien.wordpress.com/了。然而,屬性到底代表著什麼呢?每個HTML標籤都有自己專屬的作用與用途,而這些用途必須靠屬性的指定來發揮作用,像是超連結標籤如果沒有href的屬性的時候它就沒辦法連到其它地方去了,所以正確地設定屬性是很重要的一件事情。

所以像範例中第一個超連結後面還有一個target屬性,它的屬性值就是_blank,這個屬性之後會解釋到所以我們先不談,但是從這邊我們就能夠知道如果有兩個以上的屬性的話,那屬性跟屬性之間是用空白分隔開來的。

現在來看看屬性的格式:

屬性名="屬性值"

所以一個多屬性的套入標籤內大概就會長這樣:

<標籤名 屬性名="屬性值" 屬性名="屬性值"></標籤名>

重點提醒

可以發現到屬性值前後被雙引號包住,這雖然在HTML 5裡面是不被強制要求的,但是為了良好的習慣以及較高的可讀性,會建議讀者們用雙引號包住屬性值會比較好。

HTML 教學 (二)

去年開始撰寫的HTML教學我終於有時間繼續寫下去了 ...

上次我在HTML教學中教了兩個東西:

  1. 網頁的架構
  2. HTML 標籤的屬性

所以這次想要來談談標籤的嵌套以及標籤的類型。

標籤的類型

標籤有分為兩種,一種叫做區塊(Block)標籤,一種叫做行內(Inline)標籤,這兩種的差異最主要是在可不可以內嵌其他的標籤進去,關於內嵌的部分我們等等再說。

不過什麼是內嵌?我們可以想成把區塊標籤(或者稱為元素)當成是一個盒子,而這個盒子可以放入其他的容器或者非容器。舉個簡單的例子是:背包。我們可以把背包當成是一個區塊元素、錢包想成一個區塊元素,然後我們可以把錢包放到背包裡面,所以如果寫成HTML的話會類似這樣:

<背包>
  <錢包></錢包>
</背包>

然後,錢包可以放錢,但是錢不可以放東西「進去」,所以錢包是區塊元素,而錢是行內元素。化成HTML的話是這樣:

<背包>
  <錢包>
    <錢 />
  </錢包>
</背包>

至於我們常見的區塊元素有哪些呢?底下這個列表就是一些常見的:

  • h1 ~ h6 #=> 標題
  • div
  • p #=> 段落
  • ul, ol, li #=> 這個是無序跟有序列表,之後會介紹
  • table, thead, tfoot, tbody, tr, td #=> 這邊都跟表格有關

... etc

而行內元素有哪些呢?

  • a #=> 超連結
  • span
  • img #=> 圖片
  • br #=> 換行
  • hr #=> 水平線

標籤的嵌套

所以,我們現在已經知道了HTML的標籤分為區塊元素跟行內元素後,在撰寫HTML的過程當中我們就要小心不要套錯,雖然可能可以正常的顯示,但是在某些情況下可能會大亂哦!

簡單的展示一下標籤的嵌套吧:

<html>
  <head>
    <title>HTML教學</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <hr />
    <p>
      大家好,請多多指教,這是我的照片 <img src="" />
    </p>
  </body>
</html>

如此一來就可以嵌套網頁標籤囉!

最後

這次的教學最主要在簡單的介紹區塊元素跟行內元素還有標籤的嵌套,這在HTML的設計當中非常的常用,所以這次就不多介紹別的東西,下次我會來講一些比較應用面的東西。

來出個作業好了,請嘗試做出以下的網頁然後把網頁原始碼貼在 http://gist.github.com 上面,按下Create Public Gist後複製網頁網址然後貼到底下的回應區,有任何問題都歡迎詢問哦~

AngularJS初體驗

趁著沒什麼事情,來好好玩一下AngularJS,這個東西最近很火紅,當我一開始看到它的能力時眼睛是凸出來的 ...

在使用之前,先到AngularJS的官方網站按下Download按鈕,會跳出CDN網址,複製起來之後就可以另外開一個網頁進行編輯了。如果覺得麻煩也沒關係,可以到 http://jsbin.com 內建立一份空白的內容來開始測試AngularJS的能力。

好,首先我們來建立一個初稿:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    {{100}}
  </body>
</html>

然後來看看JSBin或你剛剛儲存的HTML頁面結果,我想畫面上顯示的應該是{{100}}對不對?但是照理說應該要顯示的是100才對 ... 這是怎麼回事呢?

因為,在<html>標籤上我們少加了一個宣告,所以基本上要用到AngularJS的頁面的話,該頁的<html>應該要寫成<html ng-app>這樣才能正常運作,所以請嘗試動手修改上面的code吧。

修改好後應該可以看到頁面上是顯示100而不再是{{100}}了吧?在AngularJS中要render在HTML上的東西,是用{{}}包住的,就有點像是寫Rails的時候會用的<%= %>一樣。

好,我們來寫一個簡單的金額計算小程式吧,假設我們有一個slider叫做price,另外一個叫做amount,拉動slider的時候可以更新金額的結果,這個部分該怎樣寫呢?

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <p>
        價格:
        <input type="range" ng-model="price" />
    </p>
    <p>
        數量:
        <input type="range" ng-model="amount" />
    </p>
    <p>總價格:{{price * amount}}</p>
  </body>
</html>

拉動兩個slider看看,會發現底下會自動計算總價格,但是在沒有拉動之前那個地方會顯示null,實在不是很美觀,這個情況下就有兩種作法可以用。

第一種

在第一種作法中,我們可以把輸出的{{price * amount}}改成{{price * amount || 0}}這種寫法,如果前面為null則後面會回傳。

第二種

另外一種作法就是我們預設slider的預設值,我拿價格來舉例:

原本的寫法是:<input type="range" ng-model="price" />

我們改成:<input type="range" ng-model="price" ng-init="price = 100" />

如此一來,我們就可以設定初始值,預設結果就會計算出來顯示在前端了。

Okay,大致上就這樣吧。

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的寫法。

CSS 教學 (二)

前言

如果想要閱讀HTML教學系列,請看

CSS的教學,請看

本片(?)開始

在前一篇教學中我只簡簡單單的介紹了CSS的語法,其實它的語法格式真的很簡單,就是

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

這樣的方式來描述被選擇器選到的元素應該要有怎樣的呈現方式。昨天舉的例子就是

h2 {
  color: green;
}

這樣。選擇器表明了會找出所有的h2標籤,並且將顏色設定為綠色(green),不過這裡說的是什麼顏色呢?答案是字體顏色。在CSS當中顏色有好幾種,像是背景顏色(background-color)、邊框顏色(border-color)等,但是跟字體的顏色設定有關的就很單純只是color這樣,不需要寫成font-colortext-color,沒有這回事,因此在撰寫的過程當中要注意一下這一點。

來個簡單的小範例好了

所以我決定先給一個簡單的HTML片段,請各位自己開啟一個檔案練習一下。如果不知道該怎樣撰寫HTML的話,請閱讀本文一開始提到的文章連結,讀完之後再繼續進行本篇的練習吧。

這部份是 HTML

<h1>XXX 的自我介紹</h1>
<h2>您好,請詳閱我的自我介紹哦</h2>
<p>您好,這是我的自我介紹,我叫做<span id="name">XXX</span>,目前<span id="age">OO</span>歲,住在<address>台灣</address></p>

這部份是 CSS

h1, h2 {
  
  color: #E6E3E4;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 12px;
  font-weight: lighter;
}

span {
  color: red;
}

span#name {
  font-size: 16px;
}

#age {
  font-weight: bolder;
}

address {
  color: #A0F2C4;
}

解說時間

wow ... 好多沒看過的東西,什麼font-family, font-size, font-weight, px ... etc,這到底是什麼啊?

px

這是一個單位,叫做像素(pixel),所以簡寫為px

在CSS裡面,可以用到的單位非常的多種,像是em, pt, px, in,甚至是百分比符號%也可以,可以查表來知道說大概有哪些單位可以用。

其中,em是一個參考用的單位,這個以後會介紹,這個會根據前一段的大小設定而影響到結果。

font-family, font-size, font-weight

font的意思是「字」,所以我們可以猜到font-size是字的大小、font-weight是字的寬度,那什麼是font-family呢?字的家族?嘿對,簡單的說就是「字體名稱」的意思。

只是在這個地方,為什麼font-family的設定是"Helvetica Neue", Helvetica, sans-serif呢?這個代表的是在設定字體的時候可以一次設定多個不同的字體,不過會有所謂的一個優先權在。

在這邊要講一下,如果有做過網頁的經驗的人應該會發現一件事,當你的字體用了什麼「華康少女體」之類的字體的時候,別人的瀏覽器中看到的字體會跟你在製作的過程當中會有不一樣的結果,會這樣的原因是字體必須要你安裝在電腦內它才能夠呈現在瀏覽器上面。

也就是說,當我指定「華康少女體」的時候,瀏覽器會問作業系統說:「欸,系統兄,啊你那邊有沒有『華康少女體』咧?有的話幫我叫它過來一下,我這段字要用它的風格呈現到畫面上。」然後作業系統就去找了,如果找到的話就會把「華康少女體」丟給瀏覽器讓瀏覽器自己處理後面的事情,如果沒有,那瀏覽器也只好摸摸自己的鼻子用預設的字體來顯示文字。

可是如果指定的過程當中有多個字體的話呢?那它會一個一個問作業系統說有沒有存在,然後就會發生上述故事的內容那樣,最後如果都找不到就用預設字體顯示文字。

網頁設計跟瀏覽器之間其實是沒有連在一起的,當你設計好的網頁丟到網路上時所有在你電腦內看到很完美的東西,在別人的電腦裡都只是個屁,就是IE only的網站一樣 ....

h1, h2

有驚訝到嗎?選擇器可以設定多個。當你這樣設定的時候在語意上就會是「所有的h1h2標籤」都會被設定到。

span#name 跟 #age

為什麼同樣是span標籤,而nameage這兩個id卻有不同的寫法呢?其實這兩種寫法的差別就只是在一個有明確指定出是span標籤中id為name的那個,一個只指定是id為age的那個,如此而已。

所以就算span#name寫成#name也是可以的;當然#age也可以寫成span#age

好啦,出個作業

我想,光是看教學肯定不夠的,所以來出個作業吧 ... 寫好的程式碼可以貼到http://gist.github.com上面貼給我,或者直接在http://codepen.io/http://jsfiddle.net等網站張貼程式碼,然後再把網址留在回應上,我們可以一起討論哦^_^

宣傳一下我開設的Facebook社團:為薄滴賽 - https://www.facebook.com/groups/web.design.tw/,這裡可以討論Apple、Web Design、Web Development、Design等內容,歡迎加入哦^_^