淺談 section 運用以及與 outline 間的關聯

HTML5 正夯? 恩,其實夯很久了!而 HTML5 絕對不只有語意那麼簡單罷了,它包含了很多前端的新功能與新技術,語意只是其中的一小小小塊。

今天要跟大家分享的是 <section> 標籤,網路上有很多關於 <section> 的解說,常見的文章是拿來跟 <article> 比較,可是我看了很多篇都似懂非懂…,所以又跑去看了國外的文件。

從今年開始,我寫的 HTML 會漸漸從 XHTML 的 !DOCTYPE 走向符合 HTML5 的 !DOCTYPE,隨著 HTML5 的規格釋出,語意會是我優先嘗試的部份,從整個網頁結構以及 SEO 來看,語意是 HTML5 的必備基礎知識,所以我們就先從 <section> 開始吧!

W3C 對 Section 的定義

不免俗的,一定要寫一下 W3C 的原文說明:

The <section> element represents a generic section of a document or application.

  • A section, in this context, is a thematic grouping of content:
    • chapter
    • various tabbed pages in a tabbed dialog box
    • numbered sections of a thesis …
  • A Web site’s home page could be split into sections for an introduction, news items, and contact information.
  • The section element is not a generic container element. The section element is appropriate only if the contents would be listed explicitly in the document’s outline.
  • A section typically with a heading.

@HTML/Elements/section – W3C

看得懂 W3C 原文的朋友,其實可以按右上角的 Close 離開了 😛 ,看不懂的朋友,歡迎繼續往下看 🙂

section 到底是甚麼意思

先撇開 W3C 這些落落長的解釋名詞,我們先用常識去判斷甚麼是 section ?透過萬能的谷歌大神可以了解:

  • section 不是一段完整的文章,article 才是
  • section 可以作為一個章節、或一個段落的區隔。

另外,如果我們單純搜尋 section 這個單字,可以看到他是空間設計的隔間

上圖用灰色粗線條一個一個分隔的區塊,就是 section(一個章節、段落的區隔)。而整個一大棟的建築物是 article (獨立完整的文章)

再從空間設計拉回網頁設計,以結構面來說,可以做成以下的示意圖

如果你曾搜尋過 , ,會發現每個人畫的結構圖都不太一樣。有的跟我提供的示意圖一樣,是用 <section> 包覆 ;但有的剛好相反,是用 <article> 包覆 。

我沒辦法告訴你哪種才是正確的?或者該有怎樣的準則。

因為兩種都可以,怎麼去撰寫 HTML tag,是根據你網頁的結構而定,因此他沒有標準的答案。我們唯一能做的是把他們的差別搞清楚,也把你網頁的結構搞懂;唯有都清楚了,才能正確的寫出對搜尋引擎友好的語意。

我對 section 的理解與定義

最後,結合 W3C 對 section 的定義,以及透過網路上對 section 名詞的解釋,我將 section 的定義總結如下:

  • section 用來作為一個有意義的章節,或段落的區隔。
  • section 在一張網頁可以出現很多次。
  • section 不是用來包覆一段完整且獨立的文章(例如 Blog 的內文),要做這件事請交給 article
  • 被 section 包覆的段落,通常都會帶有 headling 標籤(這跟等等提到的 outline 有強大的關聯)

看完這些定義,大家有沒有發現,其實最重要的一點是要去「判斷這些區塊,到底是不是獨立的文章」?或者是「有意義的章節或段落」。而判斷這樣的頁面結構,就是要跟案主做良好的溝通,了解他們網站的需求,並且先將 outline 定義出來 =)

※ 如果你已經知道甚麼是 outline,可以選擇跳過 outline 的介紹 ※

讓 float 的 div 高度相同

今天同事問我要怎麼讓 float 的 DIV 可以有相同高度?

亦即,即使左邊的 DIV 文字行數比較少,也會因為右邊 DIV 的行數變多而調整自己的高度。

上網搜尋研究了一下,其實有好多種方式可以滿足這個條件,甚至二欄、三欄部落格也有用類似的概念。

利用 padding 的填充與 margin 的消除

CSS

使用 display:table ,讓 div 變成 table

CSS

延伸閱讀與理論

要解掉同高還有很多方法,有興趣的朋友可以瞭解其他人是如何解決這樣的問題,他們也大方地分享自己的理論以及實際運用的效果:

使用 HTML5 和 jQuery 簡易存取資料

HTML5 增加了一個 data-* 的屬性,可以讓大家很方便的存取這些數據,而且完全不會影響你的版面。假使要做網頁互動,或是需要將資料存到後端紀錄,都非常的方便喔!

A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

Embedding custom non-visible data with the data-* attributes

範例 1

HTML5 使用 data-* 非常簡單,以下是參考語法:

HTML

在不影響版面情況下,可以看到我們在 增添了一個屬性:data-myid="test1

myid 以及 test1 都是我們可以自定義的項目。myid 可以用來當作該 DIV 的識別標記,test1 則是該 DIV 的值。

接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:

JS

按下按鈕後,跳出來的 alert 視窗值會是 test1 。

範例 2

假使有多組 DIV 的值要讓我們做選擇,同樣可以利用 data-* 實現該效果。
首先先把 HTML 的 data 寫好:

HTML

以及利用 jQuery 取出 data-myid 的值

JS

兩個 DIV 的 data-myid 不一樣,點選區塊之後顯示的結果也會不同。

深入 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

我的 reset.css 是這麼寫的

  • 日期:
  • 留言數:2
  • 標籤:

有朋友問我,要怎麼製作 reset.css?
我才想到原來我一直沒有釋出 reset.css 的檔案給大家,所以我決定把自己在用的 reset.css 分享給大家,順便簡單說明我是怎麼設定的 🙂

我的 reset 語法

我有將這份 reset.css 放在 GitHub上,之後如果有修正也會隨時更新,有需要的朋友可以在 GitHub 追蹤更新資訊。你也可以直接抓取以下的css語法:

CSS

在這個重製表裡頭,我主要的設定就是將整張網頁,包含圖層、表格、項目符號…等的邊界都設成「0」,為的是讓所有瀏覽器在初始條件下完全相等。

此外還有把每個人的字體都調成100%,同樣是讓瀏覽器環境相等。

接著是網頁的按鈕元素,在字體大小、顏色、樣式….等地方我都設定了inherit這個繼承屬性,他可以用來繼承父元素的設定。如果不懂繼承的概念,可以參考CSS 選擇器說明裡頭第四點:子選擇器,有稍微提到繼承的意思。

第一行可以用 * {margin: 0; padding: 0;} 取代嗎

最近有朋友在問,第一行落落長的 tag reset 是否可以用* {margin: 0; padding: 0;}取代?

就語法上看好像沒甚麼問題,畢竟*表示 HTML 所有的標籤,但是就因為他代表全部,我個人覺得風險太大所以我不建議這種作法。(就像是你要選擇清空所有資料(有風險),還是寧願一個一個去砍資料(麻煩但沒風險))。

而這個做法同樣也有兩派人馬在討論,有興趣的朋友可以參考關於CSS RESET,關於*{margin:0;padding:0}的整理文,裡面有正反兩方的討論串。

結論

重製表主要就是要解決瀏覽器之間的不同,所以我做的設置大概是這樣。

重製表的製作很簡單,只要抓住一個概念,他是為了要讓網頁在一開始,在所有瀏覽器都長得一模一樣。只要抓住這個原則就好了~

有關其他重製表的介紹,可以參考以下兩篇文章:
1. 快速寫好 css 的五種方法 (在第一點有提到 css 重置)
2. 打造自己的 reset.css

常見的 CSS + DIV 問題整理

這次想跟大家分享的主題是常見的 CSS+DIV 的問題,這些是我自己曾經碰過,或是工作上、朋友會問我的問題,我想也許許多 CSS 的初學者也會有這些疑惑,所以把它做個整理。

如何讓DIV區塊居中?

假設你的 DIV 總寬度是 900px,我們可以這樣寫:

HTML

為什麼 IE 對於 margin 的算法有些不同?

當我們針對 div 設定了浮動 (float) 屬性之後,IE 瀏覽器就會將 margin 加倍計算。例如我們設定margin-left:5px;,IE 會算成 10px 。解決的方法是在該浮動區塊加上display:inline即可解決這個問題。

為什麼設定超連結的 visited 會失效?

超連結的樣式有一定的順序,如果你同時要設定 visited (訪問過的連結),或是 active (作用中的連結),必須要按照這個順序設定:a:link → a:visited → a:hover → a:active。我們不用死記順序,可以這麼記:love、hate

Q.如何在圖片上方放置 flash?

有時候我們會看到有人的圖片上有 flash 的光圈特效,如果你要使用該特效,請將圖片設定為背景圖,然後在上方插入 flash ,記得要將 flash 設置為透明屬性:

Q.在火狐瀏覽器設定最小高度

一般對區塊設定高度 (height) 後,在火狐瀏覽器中如果輸入超過高度的文字,區塊不會被撐開。如果我們希望可以設定最小高度,同時又希望文字過多可以撐開區塊的話,可以將你的區塊改寫為:

CSS

以上幾項常見的問題,供大家參考。如果還有其他問題,歡迎留言告訴我~~

解決「側邊欄掉下去」的問題

有時候換了一個版面,常常會發現部落格的側邊欄「噗通」地掉下去,這應該是許多 blogger 都會碰到的問題。甚至有時候在火狐及其他瀏覽器觀看正常,偏偏到 IE 就掛點,此種情況應該會讓每個人恨得牙癢癢的吧。

如果你碰到了這些問題,先別急著求助別人,建議使用以下方式測試看看,也許你自己也可以修復「側邊欄掉下去」的問題唷

用每個瀏覽器看,側邊欄都掉下去了

請參考以下狀況排除~

  • 狀況1:側邊欄會掉下去的主要原因就是寬度的設置,不管是你內文或是側邊欄放置的東西,只要有一點超出預設的寬度,側邊欄就會往下掉。所以你可以先查看看是否有什麼東西超過預設寬度囉。
  • 狀況2:另外一種情形,可能是你在寫 html 的時候漏寫了某些標籤,像是應該成雙成對的 … ,你把他寫成 ...   ,或是少寫了 …等這些情況都會讓側邊欄出問題,嚴重一點版面會整個亂掉。

用 IE 瀏覽器看,側邊欄掉下去了

IE 因為不符合 w3c 的規範,所以碰到的問題會比較多,但我也不是每種狀況都了解,所以有漏掉的部份,歡迎大家補完

  • 狀況1:第一重點還是寬度的問題,有時候你檢查發現沒超出寬度還是掉下去了? 那是因為 IE 在計算寬度的時候,會把「padding」以及「border」的屬性一起加進去。假設你寫了padding:0 5px;,就要自動把寬度扣掉 10px。
  • 狀況2:第二重點仍是寬度問題,假設你的頁面設 1000px ,內文以及側邊欄各給 600px, 400px,此時 IE 側邊欄也會往下掉,那是因為 IE 不能把寬度算得太滿。所以我建議你給 600px, 390px,這樣就可以解決了。
  • 狀況3:有時候我們在側邊欄插入一段文字, IE 不會幫我們自動換行,此時就會把版面撐大導致側邊欄掉下去,你可以加入 word-wrap:break-word;overflow:hidden; 讓文章自動換行

以上是我所想到的五種狀況,假設這些方法你都嘗試過了,卻仍然無法解決側邊欄的問題,不妨在底下留言告知,讓大家一起幫忙:)

快速寫好 CSS 的 5 種方法

這是翻譯自 NETTUTS 的文章,作者為Trevor Davis。其實他點出的這五點不能說是寫 css 的一種捷徑,但我認為就初學者而言,確實可以培養這種不錯的撰寫習慣。畢竟 css 的語法是死的,所以大家能推出的觀點就是針對撰寫習慣而言。當然以下五點都是很多 css designer 知道的事情,只是在於你要不要去實踐罷了。

原文出處:@ 5 Ways to Instantly Write Better CSS / Trevor Davis
譯者:@ muki / MUKI space*

CSS 重置

認真的聲明,一定要使用某些 css 重置的方法,無論你是用Eric Meyer ResetYUI Reset,或者是你自己習慣的重置表,就是一定要使用。( muki 按:因為不同的瀏覽器對 css 的初始設定都有所不同,藉由 css 重置的設定,可以讓這些瀏覽器按照同樣的規則解讀 css ,而這張表就是 css reset )

它可以簡單移除元素中 margin 以及 padding :

CSS

Eric Meyer 以及 YUI 所提供的重置表都很不錯,但對我來說他們太遙不可及了。我希望你可以重新定義每個元素的屬性,最後重置一切。這也是為什麼 Eric Meyer 建議,如果要更有效使用它,你就不應該直接拿他提供的重置表放入你自己的 css 裡頭。請調整它修改它,在基礎上重新建置它,並且把重置表變成你自己的。

喔,對了,停止使用這個語法吧:* { margin: 0; padding: 0; }

它被使用在太多地方了,你想想如果將一個單選按鈕(Radio Button) 的 padding 給移除會發生什麼事情?我們常利用表單元素做些華麗的效果,所以建議就讓他保持原狀吧。

照字母排序

一個小測試:
你覺得下面兩個例子中,哪一個例子可以最快找到 margin-right 的屬性值?

例 1:

CSS

例 2:

CSS

如果告訴我例 2 比較慢就該打屁股啦!藉由字母來排序你的 css 屬性,你所創立的連貫性會幫你減少尋找某個屬性的時間。

我知道有的人是用這種方法來排序,但有的人卻有另一套排序方法。不過在我的公司,我們一致決定要使用字母作為排序方式,假設你要和別人共同開發程式碼,這種方法對你會比較好。

組織化

建議你應該組織樣式表,這樣你會容易找到想要的內容以及相關的項目。可以有效的使用注釋,舉例來說,以下是我替我的樣式表所做的結構:

CSS

一致性

無論你用什麼方法定義你的程式碼,請繼續下去。我實在厭惡以及厭倦討論單行 vs. 多行的議題,這是無庸置疑的!每個人都有他們自己的主張,所以就選擇一種你覺得對的或習慣的方式保持下去吧。

就我而言,我通常是使用混合的方式,如果一個樣式超過三種屬性,我就會使用多行:

CSS

會用這種方式是因為我使用的編輯器在換行前,單獨一行正好能容納 3 種屬性。所以你就只要描繪好哪種方法最適合你,並且保持下去。

從對的地方開始

在你寫好你的 html 標籤前,不要動你的樣式表!

當我準備做一個網站時,在寫 css 樣式表之前,我會先檢查...裡所有的標記語言,這時候我不會添加多餘的 div ,id ,以及 class 。我只會加入基本的圖層像是 header, content, footer,因為我知道這些東西是必須存在的。

透過標記後的文件,就會避免碰到多 div 症以及多 class 症,這些通常是致命的毛病。你只需要在開始寫 css 時,當你需要加入額外的效果時再加入他們即可。

有效的使用後代選擇器來定義你的子元素,不要自動給元素增加 id 和 class 。記住一點,如果一個文件沒有良好的格式標記,那這份 css 是毫無價值的

(muki 註: 我必須要再強調這點,就像 Trevor 說的,在你還沒有 100% 標記好你的 html 時,請不要動 css 文件。)

輕鬆上手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 的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^