CSS Media Queries 介紹與基礎應用

「Responsive Web Design」這個觀念與技術已經發展一段時間了,但這一年幾乎荒廢了我的 Html/CSS 學習之路,所以對於 Responsive web design 的觀念仍是懵懵懂懂,但 Google 是萬能的,所以根據強大的 wikipedia 幫我們簡單的定義了何謂 Responsive Web Design

A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
(網站使用 CSS3 media queries (使用方法為 @media +各種規則),調整我們設計的版面。讓版面更加彈性,可以在不同的設備上瀏覽網站。)

Responsive web design – Wikipedia, the free encyclopedia

也就是說,如果做出一個 Responsive web design (以下簡稱 RWD) 非常良好的網站,我們要先會運用 @media 這個新的 CSS3 的屬性。因此我花了一些時間,想先了解 @media 可以怎麼用? 會有怎樣的效果? 假使你跟我一樣,對 @media 懵懵懂懂還摸不著邊際,歡迎跟我一起學習;假使你已經是 RWD 大師,也歡迎幫我看看,我這樣的學習筆記認知,在觀念或是應用上有甚麼需要改進的地方 😀

Media Queries 介紹與基礎應用

Media 跟 Queries,我們可以先把它拆成兩塊來看:

基本呼叫 Media 的方法

@media 是 CSS 擴充元件的寫法之一,我們可以把它當成是 CSS 的類別,可能會比較好懂。 @media 呼叫方法有三種,範例如下:

1. HTML 在呼叫 CSS 的時候,將 media 的條件加入:

HTML

哈,是不是很有 IE Conditional Comments 的 FU。扯遠了,拉回~

2.直接寫在 css 檔案裡:

CSS

3.使用 @import:

CSS

Queries 基本使用方法

Query 顧名思義就是「查詢」的意思,我們如果要非常熟練的運用 media,各種條件跟條件之間的查詢是不可或缺的。

像是前面範例運用的 (min-width: 400px) and (max-width: 700px) ,那個「and」就是 Query 的一種。

Query 的語法只有三大項:not, and, only。我們最常用的是「and」,不難記,中文解釋也很簡單,比較困難的是,要怎麼加你心中設想的條件,用成語法呈現出來,所以要有一點邏輯概念會比較好上手。而這三種查詢條件可以獨立存在,也可以同時存在,只要用「,」隔開條件串即可。

1. and 使用方法:

  • 單一條件:
CSS
  • 同時符合兩種條件:
CSS

  • 兩種條件,符合一種即可
CSS

2. only 使用方法:

有的瀏覽器並不支援 Media Queries,但支援 Media Type,所以我們可以用only來阻擋這些瀏覽器。

HTML

以上這段語法的意思為:

  • 支援 Media Queries & Media Type 的瀏覽器:如果是彩色螢幕,就會讀取 test.css。
  • 不支援 Media Queries,但支援 Media Type 的瀏覽器:因為有寫 only 條件,所以不會往下讀「彩色螢幕」,所以不會呼叫 test.css
  • 不支援 Media Queries & Media Type 的瀏覽器:不管有沒有 only,都不會呼叫 test.css

3. not 使用方法:

not是用來排除某些設備的樣式,假設你希望這個樣式只在 A 設備有作用, B 設備完全沒用,就可以使用 not 囉。

舉例如下:

CSS

我們也可以換個寫法,用數學運算子的括號先決,應該會比較清楚:@media (not (screen and (color))), print and (color)

Media 支援 type 與 features (值)

Media Type

Media 常見的支援裝置有: all, screen, print ,以下列出所有支援的裝置類型(by @W3C):

  • all :所有可適用的裝置。
  • braille :盲人點字器。
  • embossed :盲人點字印表機。
  • handheld : 手機/ PDA裝置。
  • print :印表機列印輸出。
  • projection :全螢幕投影輸出。
  • screen :一般電腦螢幕 (含iphone, ipad)。
  • speech :朗讀式裝置。
  • tty :由文字長度決定大小的終端機裝置。
  • tv :電視。

Media Feature

  • width | min-width | max-width
    (寬度 | 最小寬度 | 最大寬度)
  • height | min-height | max-height
    (高度 | 最小高度 | 最大高度)
  • device-width | min-device-width | max-device-width
    (裝置寬度 | 裝置最小寬度 | 裝置最大寬度)
  • device-height | min-device-height | max-device-height
    (裝置高度 | 裝置最小高度 | 裝置最大高度)
  • orientation (value: portrait | landscape)
    (裝置旋轉方向 值:直立 | 橫向)
  • aspect-ratio | min-aspect-ratio | max-aspect-ratio
    (螢幕顯示比例 | 螢幕顯示最小比例 | 螢幕顯示最大比例)
  • device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
    (裝置顯示比例 | 裝置顯示最小比例 | 裝置顯示最大比例)
  • color | min-color | max-color
    (彩色 | 最小顏色bit數 | 最大顏色bit數)
    color:0 表示該裝置為黑白(單色)
  • color-index | min-color-index | max-color-index
  • monochrome | min-monochrome | max-monochrome
    (單色 | 最小單色bit數 | 最大單色bit數)
    monochrome :0 表示該裝置不是黑白(單色)
  • resolution | min-resolution | max-resolution
    (解析度 | 最小解析度 | 最大解析度)
  • scan (value:progressive | interlace)
    (TV 專用掃描)
  • grid

寫到這覺得篇幅好像過長,而且大家消化也需要一點時間,關於 Media Queries 更進階的運用,以及權重說明,等我更加瞭解後,再整理一份給大家參考吧!!

其實如同我開頭所言,RWD 的技術已經蠻成熟了,也許我這篇教學已經來的有點晚,網路上已經有很多相關應用與例子,不過還是希望經過我這樣的說明,大家可以更瞭解 Media Queries 的使用方法 😀

Media Queries 參考資料
1. [CSS] Media Query 小撇步 // HINA::工程幼稚園
2. Mobile Web 前端技術筆記(二): Media Queries 與 CSS // 烏托比亞
3. CSS3 Media Queries 詳解 // 池水間
4. CSS media queries // CSS | MDN
5. Media Queries // W3C

深入 CSS 之 line-height 應用

前幾天改版後,發現留言的版面,頭像上面的樓層顯示出了點問題,在 IE6、IE7 底下看,會發現文字被截掉(如下圖)。

後來詢問CSS達人:風痕影以及SR之後,發現只要設置line-height就可以了!

於是當下我對 line-height 產生了興趣,想知道為什麼要這麼設定才可以解決字被截斷的困擾,因此上網搜尋了一下,查到了幾篇文章。

在 ISD webteam 這裡有一篇翻譯過後的文章:深入 CSS 行高,雖然標題打「深入」二字,但其實這篇是從淺至深講得很清楚,建議大家可以先看這篇文章,理解 line-height 真正扮演的角色為何。簡報第 81 ~ 83 頁就解決了我上述問題的疑惑,原來是 line-height 跟 font-size 的設定問題,導致 inline box 比 content area 小。

接著跟大家推薦的第二篇文章,是來自鑫空間的 css 行高 line-height 的一些深入理解及應用,這裡把許多 line-height 會碰到的問題,還有如何應用都寫得很詳細。大推啊!!!

看完這兩篇之後,讓我對 line-height 又更加認識了。而有時候我閱讀完文章,會有作筆記的習慣,因此我結合了這兩篇寫出了 line-height 心得,另外一點是因為上面兩篇作者都是大陸的朋友,在語氣以及專有名詞上,跟我們還是有點出入。我會嘗試用大家所習慣的口吻教導大家 line-height 的知識。也許所學不精、也許未嘗完善,所以看完後如有疑問歡迎提出,謝謝:)

什麼是 line-height

line-height 的中文是「行高」,簡單來說就是兩行文字中間的高度。

行高的高度,是以文字的基線(baseline)為準,小時候有在外面補習英文的朋友,應該都曾經被教導要在格線上寫英文吧,而那條對準英文字母的線就是我們所說的基線(如下圖)。

▼ 行高就是基線跟基線之間的距離

line-height 屬性及作用

line-height,總共有 5 種屬性可供運用,假設有一段 HTML code,p.main 的文字大小分別是 12px 以及 25px,就讓我們看一下,使用不同的 line-height 屬性,行高會如何變化。

1. 預設值

寫法為line-height:normal,行高會依照(該元素設定的文字大小 x 1.2)* 的結果作為依據。

▼ 使用 line-height:normal 為例,行高的最終值如下:

Plain Text

* 1.0 ~ 1.2 是瀏覽器給 line-height 的初始值,通常都用 1.2 來計算。

2. 純數字

寫法是 line-height:1.8;,行高會依照(該元素設定的文字大小 x 1.8)的結果作計算。
簡單來說,你的數字設定多少,行高就會乘以多少。

▼ 使用 line-height:1.8; 為例,行高的最終值為:

Plain Text

3. 帶單位的值

寫法是 line-height:18px;,不管字型大小,你設定行高是 18px,他就是 18px。單位選擇有 em, px, pt …等。

▼ 使用 line-height:18px; 為例,行高的最終值為:

Plain Text

4. 百分比

寫法是 line-height:180%;,行高會依照(父元素文字大小 x 180%)的結果作依據。

例如我設定 body 的行高是 180%,那麼所有 body 的子元素(包含 body )都會跟著該設定。那如果 p 的行高另外設成 150% 呢?那就是從 p 以下(包含 p )的子元素都會套用 150% 的設定。

▼ 使用 line-height:180%; 為例,行高的最終值為:

Plain Text

5. 繼承

寫法是 line-height:inherit; ,如果加上這段語法,就會繼承該父元素的設定。(因為繼承的寫法跟上述四種都不同,所以我單獨拉出來講)。

關於繼承,請看以下的 html 為例

HTML

▼ 設定 .main{line-height:inherit},行高的最終值為:

Plain Text

當有繼承的時候,會是自己的文字大小 x 父元素的行高;反之拿掉繼承,就是自己的文字大小 x 自己的行高。

line-height 跟 box model 的關係

先簡略說明什麼是 box model,我在這做了一張簡圖給各位參考:

每個字都被 1 個 inline box 包住,inline boxes 組成 line box,line boxes 再組成 containing box。英文的話是一個單字為一組 inline box。

接著我們把其中一段話放大,會發現有一個隱形的 box 圍繞著文字,他叫做 content area,他本身是一個隱藏的 box,我們沒辦法對他做任何事情。而這個 box 的高度取決於文字的大小。

而我一開始提到的文字截斷問題,就是因為inline boxescontent area,以及line-height的關係(講了那麼久終於講到重點了…)

設定好行高後, box model 是怎麼分配他們的自己的高度呢?

舉例來說,假設我的行高跟字型大小這麼寫:font-size:12px; line-height:16px; ,可以看出他們的行間距差了 4px,接著 box model 會把這 4px 除以 2,也就是 4(px)/2=2(px),然後把 2 個 2px 分別分配在 content area 的頂部跟底部(如圖)。

也就是說,content area 的高度是 12px,而 inline box 的高度是 16px。當 inline box 高於 content area 的時候,兩邊是相安無事的,因為文字不會被截斷。

但如果,inline box比 content area 小呢!!?

假設我寫成:font-size:16px; line-height:12px; ,而 inline box 的高度會優先以行高最為依據,所以 inline box 高度是 12px。但前面提到 content area 會圍繞著文字,所以文字大小設為 16px,content area 也是 16px。在這種情況下,就會有文字超出 inline box(如圖)。

因為 content area 是隱形的,我們肉眼所能看到的範圍只有 inline box 的藍底區塊。所以當 inline box 比較小的時候,它所包覆的文字會被截斷,我們看到的也只是那塊藍底截斷的文字。

這也就是為什麼,當你發現文字被截斷的時候,可以使用line-height來解決截斷問題。

但最有效的方法,還是在於一開始,設定字型跟行高時就要注意,避免這樣的問題產生。

高度是 line-height 還是 font-size 決定

最後來談談高度吧。我們都知道當 div 有了文字就會自動產生高度。那麼這個高度是由 line-height 還是 font-size 決定的呢? (這邊指的不是指定高度 height)。

HTML

出來的範例如圖(有興趣的朋友可以把語法copy回去試試看):

在這邊我就不多做解釋了,相信聰明的各位一定看得出來高度到底是由誰決定的:D。

參考文章:
1. css行高line-height的一些深入理解及應用 / 鑫空間 鑫生活
2. [譯] 深入 CSS 行高 / ISD Webteam
(這兩篇真的講得很詳細,再次推薦!!)

3. Box Model – CSS 框框模型 [2*] / 網頁藝術思考
4. CSS3 Text Effects Module / W3C

輕鬆上手CSS(III) – 基本語法傳授!!

☞ 輕鬆上手 CSS 系列文

這次要跟大家談論的主題,是修改以及創造的抉擇。在 css 的世界裡,你希望當個看得懂 css 語法並且會修改的人?或者是當可以無中生有創造出令人驚豔的 css 佈景?這個答案沒有絕對,端看你自己想往哪一條路發展。然而,不論你想當個修改者或是創造者,今天的主題都是非看不可 ^_________^

這邊要先跟各位說明,css 的語法跟選擇器是兩種不同的東西,比如以下這段 css:

CSS

a:hover 是 css 選擇器。裡頭由 { } 包住的則是 css 語法。對 css 選擇器不熟或想進一步瞭解的朋友,可以參考我之前寫的 CSS 選擇器概略說明

不論以後你要走修改路線或是創造路線(好像遊戲轉職!!),css 的基本語法都是你必備的知識,在此我將常用的 css 語法做個整理,供大家閱覽參考。另外要特別說明一點,這邊所謂的「基本」語法是就我的認知而言,我覺得哪些是大家常用的語法才會把它丟上來,如果過於冷僻或艱難我會自動忽略。

文字屬性一覽

CSS

框線屬性一覽

CSS

框線樣式:

  • 實線: solid
  • 虛線: dotted
  • 雙線: double
  • 凹框: inset
  • 凸框: outset

背景樣式一覽

CSS

項目符號樣式一覽

項目符號,我想大家最常用到的就是「如何隱藏項目符號的編號」…但只寫這麼一行感覺很空虛,所以我把幾個編號的樣式也寫出來給大家參考~

CSS

邊界與間距

邊界 margin 以及間距 padding 是大家最常用來調整圖層的語法,這邊概略說明兩者的使用方法以及差別:

CSS

以下是一張網頁示意圖(以灰底表示), A 圖層以及 B 圖層各放在左右兩邊。此時沒有任何的語法牽制,所以兩張圖層的大小位置相同,都緊緊貼著網頁的最上方。

而我現在想要將兩張圖層的位子往下移 40px,A 圖層使用 margin, B 圖層使用 padding

CSS

來猜猜最後會發生什麼事情吧:)

看到了嗎!!! 雖然兩個圖層的文字都往下移了 40px ,達到你想要的效果,但是假設你有對圖層調背景顏色,就會發現其實差多了。

  • A 圖層使用 margin 控制, margin 控制的是整個圖層相對於邊界而言,所以他會將整個圖層往下移動
  • B 圖層使用 padding 控制, padding 控制的是裡頭的物件,他的相對點就是整個 B 圖層,所以相對於 B 圖層,物件下移 40px

瞭解 margin 以及 padding 的差別後,你就可以知道為什麼有時圖層會掉下去或是錯位了吧。原因之一就是你用了過多的 margin 來控制他,但是圖層都是白底所以看不出他的差別,事實上他可能已經嚴重蓋到上下的圖層或左右的圖層,一張張圖層疊加上去,光是用想的都覺得恐怖XD。

CSS 基本語法小結

不知道對各位來說東西會不會過多?總之 css 應該也需要時間做消化,所以今天就講到這裡。關於 float 還有 position 的語法,我會放到進階語法區(個人覺得那個比較麻煩…)

如果以上這些語法你都消化瞭解了,我建議大家看一篇基本的 css 語法縮寫,這兩篇看完之後,我相信應該可以看懂大多數的 css 語法了!

最後的最後,老話一句~,如果有寫錯或是不懂的地方,歡迎留言給我

CSS 選擇器概略說明

之前在寫 css 教學的時候,在「不可不知篇」裡頭曾經提到 id 以及 class 的差異。其實 css 選擇器的範圍是很廣泛的, id. class 這種屬性只佔了其中一小部分,為了怕大家以為 css 裡頭只有 id, class 的存在,所以我特地將 css 2.1 版的選擇器做一個概略說明,希望讀完這篇大家對於 css 的運用能更加靈活

根據 W3C 網站公佈的 css 2.1 selector syntax 可以得知目前有10 種不同的選擇器

Universal selector (通用選擇器)

使用字元*,代表此張網頁都要套用*{}底下的設定。

Type selectors (屬性選擇器)

在 html 文件裡,他的標籤可以直接當做 css 裡頭的選擇器。例如 <h1>...</h1>, <p>...</p>, <div>...</div> 等等。

而 CSS 可以直接寫成:

CSS

Descendant selectors (後代選擇器)

某一段文字被兩個以上的選擇器包圍時,我們可以用這些選擇器彼此之間的關係來替文字做更進一步的樣式化。

HTML

Child selectors (子選擇器)

子選擇器有一種繼承的概念,你可以把它想成父子的關係,子一定要緊緊跟著父跑,要是中間插入任何一個元素,就不是父子關係了。 而子選擇器我們使用>符號,舉例如下:

HTML

Adjacent sibling selectors (相鄰選擇器)

如果說子選擇器是上下垂直的繼承概念,那麼相鄰選擇器就是左右平行的對等概念,而他使用的符號是+,只是我們很少用到這個寫法,其中一個原因是IE瀏覽器尚未支援。

我個人認為,相鄰選擇器使用的最好時機在於要對同個標籤進行不同的設置。假設今天我有三個段落都要使用 h1 標籤,可是我希望三個段落擁有不同的顏色(黑色、紅色、綠色),我可以這樣寫:

HTML

Attribute selectors (屬性選擇器)

顧名思義,就是可以針對標籤裡頭的屬性做更進一步的修改。屬性選擇器總共有4種類型,分別為:

h2[class] //符合所有含 class 的 h2 標籤即可

HTML

h2[class=title] //符合含 class=title 的 h2 標籤

HTML

h2[class~=title] //只要 class 裡頭有包含 title 文字的 h2 標籤即可

HTML

h2[class|=title] //class 的開始值必須為 title 的 h2 標籤

HTML

Class selectors (Class選擇器)

使用 . 符號做宣告,後頭的屬性可以自己命名,一張網頁可以出現多個相同的 class 屬性值。

HTML

ID selectors (ID選擇器)

使用 # 符號做宣告,後頭的屬性值可以自己命名,但是一張網頁僅能出現一次相同的 ID (ID 為唯一)

HTML

Pseudo-classes (偽類)

偽類選擇器也許大家很少聽過,但是一說到a:linka:visiteda:hovera:active 這四個 css 應該就不陌生了吧,這四個選擇器都是屬於偽類的一種喔。另外還有:first-child, :foucs, :lang 這三種。

:first-child

X:first-child 符合父標籤中的第一個 X 標籤者才會有效用

HTML

:lang

X:lang(E) 符合 lang 為 E 的 X 標籤

HTML

Pseudo-elements (偽元素)

偽元素包含 :first-line 以及 :first-letter

:first-line

X:first-line 符合 X 標籤的第一行都會受影響

HTML

:first-letter

X:first-letter 符合 X 標籤的第一個字母會受影響

HTML

CSS 選擇器到此告一段落。這篇文章寫了兩天,一直在想要怎麼寫大家才可以更瞭解 css ,所以有看到最後的朋友,請受我一拜(笑)。因為這篇文章旨在概略說明,我只講大觀念,更細的東西幾乎都跳過了,以後有機會再分享更深入的應用給大家。

基本的 css 語法縮寫

縮寫 css 語法不但可以減少 css 檔案的大小,讓讀取速度加快,同時也更方便閱讀。會想寫這篇文章是因為以前有跟朋友介紹過 CSS 整形與優化工具,怕大家優化後也不清楚到底有什麼更動?或者是怕 css 出問題而不敢優化,所以在這邊我整理了幾個基本的 css 縮寫給大家,希望以後大家在寫 css 時能更瞭解他的原理。

CSS 語法縮寫 – 顏色

使用 16 進制的色碼,假設這6個數字裡頭每2個數字相同,就可以進行縮寫。舉例如下:

  • #000000 → #000
  • #880000 → #800
  • #aabbcc → #abc

參考上述情況可以了解,一定要是相鄰的文字一樣才能縮寫唷!

CSS 語法縮寫 – 區塊邊界

這邊我們最常應用的就是 margin 以及 padding 兩個屬性。根據自定邊界位置的不同,由簡入繁總共有四種寫法:

  • margin: 1px; (所有邊界都是 1px)
  • margin: 3px 4px; (上&下邊界是 3px,左&右邊界是 4px)
  • margin: 3px 1px 4px; (上邊界是 3px,左&右邊界是 1px,下邊界是 4px)
  • margin: 3px 4px 1px 2px; (上邊界 3px,右邊界 4px,下邊界 1px,左邊界 2px)

透過這個原理我們可以發現到,「上下」為一組「左右」為一組。所以如果邊界剛好是同樣的單位可以將他們合併起來,但要特別注意的是,如果你的上&下邊界相同,左&右不相同,還是請乖乖寫四次吧!至於這四次的位置擺放要如何快速記憶呢?請大家把它想成一個順時針的循環,剛好就是上右下左

CSS 語法縮寫 – 0

正統的 css 語法裡頭,所有的單位都不能省略,因為 css 不只一個單位,有px、pt、em、%…等等。但是 0 這個數字非常的奇妙,只有 0 後面可以不用加任何單位,因為寫不寫都沒影響。

只是有時候因為習慣問題,有的人還是會順手在 0 後面加單位,如果次數一多,也會佔幾 kb,既然我們目的就是要縮減 css 語法,所以還是建議大家不加單位。

CSS 語法縮寫 – 同屬性

只要是同個屬性都可以加他們的語法合併在一起,像是 border (邊框)、 background (背景)、 list (項目)

border 的合併

CSS

合併後為: border: 1px solid #000;

background 的合併

CSS

合併後為: background: #fff url("images/muki.gif") no-repeat fixed top left;

因為 background 的屬性很多,所以我強烈推薦要將他們做合併,否則你要設定多個背景會拖得很長。而合併後有的屬性也可以省略不打,省略的屬性會採系統默認值。

background 默認值如下:

  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%
  • color: transparent

list 的合併

CSS

合併後:list-style: square inside url("images/muki.gif");

這邊列舉三個同屬性的合併,假設下次你碰到有類似的同屬性狀況,就可以嘗試將他們做合併喔^^

小結

以上都是基本的 css 縮寫,我想大家最常用到的也是這幾個語法,所以應該是夠大家使用了!!

其實把握一個重點,就是「同屬性的幾乎都可以進行縮寫」,多加嘗試就會找到更多的縮寫樂趣唷~

輕鬆上手CSS(II) – 叫叫ABC篇

輕鬆上手 CSS 系列文

相信大家對於「叫叫 ABC 」這五個字都非常的熟悉,甚至以前也有進行過相關的訓練。只是這次的「叫叫ABC」不是拿來應用於急救上,而是當成 CSS 教學的一部分。我想很多人應該都會對此抱持疑問,不懂「叫叫 ABC」怎麼可以跟 CSS 做結合吧!

歡迎繼續看下去,就知道其中奧妙囉~

我這次要跟大家分享的 CSS 概念非常的簡單,就是如何在靜態以及動態的網頁上呼叫 css,還有對自己寫的 css 要抱持怎樣的態度。

叫(自定選擇器)

要呼叫 css 的方法有兩種,同樣的沒有說哪種方法比較好,端看大家的撰寫習慣。
第一種呼叫方式:直接在網頁裡頭呼叫 css。舉例如下:

HTML

重點在於 css 要被 <style>...</style> 包覆著。

叫(載入外部 css 檔案)

這個方法比較多人在使用,因為我們只要修改一個 css 檔案,就可以同時修改許多網頁的外觀樣式。前提當然是這些網頁都要引用這份 css 檔案啦!!

而載入外部 css 我們又可以分成兩種方式:

直接連結樣式表

Step1.

舉例來說,假設我現在要製作一份 css 檔案,先將以下語法複製到記事本後存檔為 style.css ,副檔名必須為 .css

CSS

仔細觀察,但第一種呼叫方式不同的地方在於少了 <style>...</style> 的包覆。只要你將 css 存成一個獨立的檔案,都不需要被 <style> 標籤包覆。

Step2.

在要呼叫 style.css 的網頁裡頭加入以下語法

HTML

假設現在有三張網頁都同時載入了這個 style.css 的檔案,只要你修改了這份 css ,三張網頁都會同時變更,在效率上也大福提昇了許多。

A(Active 啟動)

以上步驟完成後,請打開瀏覽器觀看效果。雖然簡易的 css 不太會有錯誤,但是 css 可不是上傳之後就萬事太平阿!如果碰到複雜的圖層、定位這些 css,可能就會有跑位的問題。所以寫好 css 記得一定要啟動觀看他的效果,邊寫邊修正以達到最好的視覺效果。

B(Believe 相信)

要對自己寫出來的 css 有信心,不要因為一時的挫折就放棄學習 css。他們不是什麼刁鑽艱深的語言,你唯一需要的就是不斷的練習、練習,以及練習。

C(Css)

「叫叫ABC」:網頁或是連結呼叫後,請啟動,並且對自己所撰寫的css有信心!

這就是今天我想跟各位分享的「叫叫 ABC」,其實眼尖的人都應該瞭解到重點在於前面的兩種呼叫方式。之前就在想說應該要先把怎麼呼叫 css 寫出來讓大家瞭解,可是光寫這樣好像又過於貧乏,恰巧腦海閃過了「叫叫ABC」,所以就張冠李戴將這個口訣移植過來 XDD

當然也希望透過這個簡單的「叫叫 ABC」可以讓大家對呼叫 css 的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^

輕鬆上手css(I) – 不可不知篇

輕鬆上手 CSS 系列文

我之前有發了一篇「學 css 前要準備什麼?」,如果你已經閱覽過這篇文章也準備好了,就讓我們跨出學習 css 的第一步吧。

如果你開啟了自己寫 css 的工具(例如記事本、DreamWeaver ),那我要在這邊跟你說聲抱歉,請先默默的將他縮小或關閉。

因為對初學者來說最重要的還是概念,請先別一頭熱的想要開始寫 css ,否則會適得其反唷。 當然,假使你已經不是初學者,或者你有過人的慧根,這篇文章也可以選擇跳過不看啦,因為今天寫的這一篇文章完全是針對 CSS 初學者喔。

你知道css不能獨立生存嗎?

CSS(Cascading Style Sheets)有一個很難記的中文名詞:串樣式列表,它是 W3C 經定義,用來替 html 以及 xml 這種檔案添加樣式的語言。

因此他必須要搭配 html 才可以產生出一張張動人的網頁,只有 css 的檔案充其量只是一堆語言,不具任何意義。(你硬要說他有參考價值的意義我也不反對啦:P)

你知道css和html之間的關聯嗎?

首先,這邊有一張很簡單的html網頁語法:

HTML

接著以下是利用剛剛提供的html語法製成的簡易網頁圖:

以第 1 行 <div id="header">我是 header</div> 為例,「我是 header」這段話是html的文字,他會直接秀在網頁上,而我們都知道在 html 裡頭,透過<>標記的標籤是不會顯示在網頁上面。

這段 html 語言的意思是:我是一個 id 叫做 header 的圖層,圖層裡頭包含「我是header」 這句話。

我們可以把 div(圖層)想像成是一個區塊,這個區塊的長寬可以隨你的意思做調整,而包含在這個區塊裡頭的內容就是靠 ,

這個標籤做設置。如果想要針對 id 叫做 header 的這個圖層區塊做修改,可以在 css 裡頭這麼寫:

CSS

☞ 補充

「id」在 css 語言中不叫做「id」,他有另外一個稱呼叫做「#」;
同理而言,「class」在css語言中則是叫做「.

你知道 id 和 class 有什麼不同嗎

其實在 html 裡頭設置 css 標籤自由度非常的高,他不像 html 一樣, font 代表的是字體、 color 代表的是顏色, html 每個標籤都有規定的意思不能更改,但 css 不同,css 完全可以依照你自已的選擇做設定,這個區塊你想取名叫做 muki ,那個區塊想叫做 space ,沒人會反對。如果真要說什麼規定,就是他的標籤只能用英文來命名吧

假使還要再說一項規定,就要談到 id 以及 class 的差別之處了。

  • id=header:這個 header 在一張網頁裡頭只能 出現一次 (這邊指的網頁是從 html 開始到結束,不是像 php 那種 include 的包法)
  • class=header:這個 header 在一張網頁裡頭可以出現無數次

★ 會撰寫 java script 的朋友這邊也要特別注意, id 可以被 js 裡頭的 GetElementByID 函數所運用, class 則不行。
★ 最後要提醒大家一點,在 css 裡頭大小寫是有差別的。你今天寫 id=header 以及 id=Header 這是兩種不同的屬性選擇器,請多多注意唷!!!

你知道 div 以及 span 的差異嗎

同樣的今天我寫了一張html網頁:

HTML

以下是呈現出來的網頁效果:

簡單的一個概念:使用 span 他不會有換行的效果,所以我們可以用 span 來做更細部的 css 修改。

瀏覽器兼容

網路上有非常多的瀏覽器,IE6、IE7、Firefox、Opera、Google..等等。我們都希望自己的網頁在每個瀏覽器瀏覽時都是最漂亮的、最符合自己理想的。無奈的是有的瀏覽器並不會乖乖照著 W3C 的規範去走,偏偏他又是目前市佔率最高的瀏覽器,那這該如何是好呢?

其實每個 css designer 都會碰到這樣的困擾,包含我自己也還在學習當中,所以 如果你有志設計css樣板給大家使用,就不得不正視這個問題!! 我的建議是多裝幾套瀏覽器測試一下效果,勤做修改吧!另外就是基礎一定要穩,別被每種瀏覽器給嚇著亂了陣腳唷。

學css前要準備什麼?

輕鬆上手 CSS 系列文

做專題之後,陸陸續續會聽到同學也想學習 css,互相研究,加上有的朋友會問我該怎麼學習 css,如何上手?該從哪些資料開始著手?

這邊簡單跟大家分享我的經驗,也希望對想要學習 css 的人有所幫助:)

學 css 要買相關書籍嗎??

這一點並沒有正確的答案,端看你自己學習的狀況來判定。

大家可以先試著回想自己在學習其他軟體、語言的時候,是買市面上的書籍回家研究呢?還是在網路上找大家的教學來學習?

要看你自己習慣哪種模式,就跟著一貫的學習方式走吧。

另外一種建議方式,我是認為你可以先想想你是否為「 css 完全初學者」?

如果以下 10 個問題,如何有 7 項以上都符合你的狀態,那你就是 css 完全初學者。

  1. 如果不查資料,我不知道 css 的全名是什麼?
  2. 在我的印象裡頭,css 就等於是讓排版美觀的意思。
  3. 我不懂 html,也不懂怎麼把 html 還有 css 兜在一起。
  4. 看到很漂亮的網站,我會發自內心的讚嘆。卻不會去思考如何建構他的排版。(意思就是我不會去想他怎麼分割、怎麼寫…就只是單純欣賞.羨慕)
  5. 如果不查資料,我不懂 margin 以及 padding 的差別。
  6. 我一直不能理解標籤怎麼控制我的版面
  7. 打開一份 css 文件,我不懂要從何開始學習、觀看,甚至修改。
  8. 如果我成功的修改了字型大小、顏色還有超連結的狀態,我會覺得自己很厲害。
  9. 給我一份完全沒有 css 標籤的 html 檔案,我沒辦法獨力將他加上標籤、搭配 css 呈現出來。
  10. 我真的很想學 css ,可是我不知道從何學起。

測驗結束,如果你符合「css完全初學者」,那我會建議你買一本書,但是這本書一定要從頭開始把整個css的架構都講的很清楚,讓你可以從基本的概念學起

muki有沒有推薦的書籍??

這邊要跟大家說聲抱歉,我只買過一本實體書籍:「FrontPage2000」,其他 html 以及 css 都是從網路上自學而來。所以我並沒有買過相關書籍,也無從推薦你們哪本比較好。

建議如果要買書的朋友,可以先問問週遭會 css 的朋友,有沒有覺得不錯的書?但最重要的是,希望大家可以親自到實體書店走一趟,翻翻每本書的內容,看哪一本的編排最適合你。

不要只是聽了朋友的推薦就衝動買下來,到時候如果不喜歡書本的解說、或者覺得內容太難,就欲哭無淚囉。(這邊有Carrie推薦的幾本css、html書籍,大家可以去看看)

我要準備什麼工具??

假設你買好了書(或者從網路上蒐集到教學資訊),你可能會躍躍欲試,馬上就要開始寫 css。

但是你可能會發現無從下手?會不會因為你不知道要用什麼工具呢?

首先我們要知道一個概念,css 這個文件他無法單獨在瀏覽器中讀取,就算讀到也只是文字而已,css 必須搭配 html 才可以呈現他的效果

我常常拿大家熟悉的「人」來做例子。
今天你要出門,你一定要穿衣服才能出門吧!!!

  • 「裸體的你、什麼都沒穿的你」就是 html
  • 「穿在你身上的衣服、配件」就是 css

要搭配衣服(css)穿上自己(html)的身上,才可以有美麗的效果。所以說任何的美化一定要搭配一個實體的東西,否則就等於 0。

講到這裡,相信大家應該都懂了。

你的首要工具(知識),就是你一定要懂基礎的html,否則免談。如果你真的不懂,可能你要買的書籍就不是純粹的css,而是要搭配html的css書籍

假設你會基礎的 html,要開始學習 css,這時候你的工具選擇有兩種方式:

  1. 網頁編輯器的軟體輔助你使用 css (ex. DreamWeaver),網路上也有許多是小型免費的網頁編輯器軟體可供下載,大家也可以用用看。
  2. 文字編輯器的軟體輔助你使用 css (ex. VScode, Sublime, Brackets)。

我推薦大家使用網頁編輯的軟體(雖然我是用文字編輯),因為對初學者來說,大家不可能都把每一段 css 背的很熟,靠軟體輔助慢慢學習會比較好。

開始上手css

最後,有了好的教學書籍,有了很棒的輔助軟體,就要歡迎你來到 css 的世界囉!!

一開始你會學的很愉快,因為 css 普遍來說並不難。但是隨著接觸的資料愈多,需要用到更高深的技巧,甚至是 CSS3 搭配 HTML5 的變化時,可能會有很嚴重的挫敗感。不過請不要氣餒,因為學起來了就是你的!!!

css 不是一蹴可及的東西,他需要不斷的練習、學習,你才可以將他運用自如。
而且 css 一直在進化,我們都需要不斷上網學習新知識,才可以讓自己的網頁排版功力一直進步唷XD。