Your posts match “ css ” tag:

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 3 的 not Selector 運用實例

我遇到有一個 case 是這樣的:有兩個 QR Code 的顯示區塊分別是 for iOS & for Android 。今天可能客戶會只顯示 iOS 的 QR Code ,這時要讓 iOS 的 QR Code 可以正常顯示在正中央。如果 iOS & Android 同時都出現則各佔一半。

這個東西剛看到的時候還愣了一下,原本想說讓獨自出現的那個圖片加上 only-me 這個 class 然後設定置中 (後面講解法),但是後來想說可以用 not 實作看看,所以就有了以下的解法 (當然用 only-me 這種解法會比較漂亮)

步驟一:打上 hide-me class

def render_qrcode_block
  ...
  
  classes = ["qrcode"]
  classes << "hide-me" unless url.blank?
  
  ...
end

步驟二:CSS 中加上 .hide-me

.qrcode {
  &.hide-me {
    display: none;
  }
  
  &:not(.hide-me) {
    float: center;
    text-align: center;
  }
}

步驟三:沒有步驟三了

如此一來,實際的呈現效果就會正常。

但是,不夠好啊 ...

  • 改法一:因為這樣變成我要多寫一個 .hide-me 的 Class 設定,所以可以改寫 Helper ,當沒有 URL 的時候就不要輸出該區塊,然後拿掉 .hide-me 的 CSS 設定。
  • 改法二:用 only-me 搭配改法一的方式,然後只設定 only-me 的 CSS 就好

我會比較推薦改法二,乾淨很多 ... 不過 CSS 3 的 not 的確很好用。

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