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等內容,歡迎加入哦^_^

Comments

comments powered by Disqus