淺談 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 的介紹 ※

WebSocket 簡單介紹與 jQuery 實作應用

聽說這篇好像 4 月就跟大家預告要寫了,結果現在已經 5 月了(默。

前陣子工作因素挑戰了人生第一次的 WebSocket,很感謝主管的指導,讓我順利的寫出了一個小東西,心裡萬分感動。因此,將這次實作的過程與經驗紀錄下來,提供給有需要的朋友做個參考囉 🙂

什麼是 WebSocket?

實作之前,免不俗的要跟大家分享一下 WebSocket 到底是什麼,以下取自 wiki 百科的解釋:

WebSocket 是 HTML5 開始提供的一種瀏覽器與伺服器間進行全雙工通訊的網路技術。WebSocket 通訊協定於 2011 年被 IETF 定為標準 RFC 6455,WebSocketAPI 被 W3C 定為標準。

在 WebSocket API 中,瀏覽器和伺服器只需要要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

@ WebSocket / wikipedia

簡單來說,就是有 Client & Server 兩端透過 WebSocket 互相傳遞與接收資料,並且即時顯示在頁面上。

WebSocket 語法說明

WebSocket 的大架構其實很簡單又直覺,他也有一些既有的事件,我們只要知道確定哪些事件發生時,該做什麼事情?把這些事情塞到對應的事件即可。

WebSocket 官方網站也有提供測試的頁面以及語法結構,以下就使用他提供的 Example 來跟大家說明:

JS

WebSocket 已經建立好許多 function ,我們可以直接用他的 function,當然也不一定要全部 function 都用到,或是可以做點小修改,像我主管給我的範本就跟官網提供的有一點點不一樣(但基本上的呼叫是大同小異的)

  • 第 4 行:老實說我覺得所有語法中最重要的就是第 4 行的 var wsUri = "ws://echo.websocket.org/";,因為如果一開始沒有把傳輸的網址寫正確,之後的效果根本也跑不出來。記得要把 http:// 改成 ws://
  • 第 12 行:websocket.onopen這個事件是用來判斷前面的 wsUri 是否有順利抓到,如果有抓到表示 onopen,可以利用console.log或是alert做個標記:console.log("連線成功");
  • 第 15 行:跟第 12 行的事件對照就很清楚的知道,websocket.onclose是用來表示當連線中斷時,會出現什麼訊息或事件。
  • 第 18 行:wescoket.onmessage是整個 WebSocket 的重頭戲,連線後,我們就可以在onmessage裏面寫上任何想要傳輸的事件內容。
  • 第 21 行:而對應 18 行的wescoket.onmessagewescoket.onerror是用來判斷連線或事件的正確與否,如果有出現了任何錯誤,就會觸發onerror事件,所以我們可以在這邊進行除錯。

WebSocket 主要就是這四個事件,所以其實不難。那要怎麼利用 jQuery 結合 WebSocket 做出想要的功能呢?我們做法通常是將 jQuery 的主要 function 跟 WebSocket 拆開來,簡單架構參考如下:

Plain Text

由此可看出,將主要的功能寫在 effect.js 裏頭, client.js(html) 與 master.js(html) 分別用來表示兩個不同網頁,他們可以有不同的功能,也可以互相傳收資料 。

利用 JSON 傳遞 WebSocket

步驟一

在 effect.js 先將所有要顯示的資料存到變數中:

JS

步驟二

利用 JSON 將資料送給 WebSocket:

JS

步驟三

在 client.js 將收到的資料存到變數中並調用:(請寫在websocket.onmessage事件裡。)

JS

以上簡單幾行,就可以完成 WebSocket 的基本功能囉 🙂

在兩個不同的網頁中 (master.html, client.html) 互傳資料

假使我們希望在 master.html 做了一個動作 (比如說點選特定的分頁時),client.html 就會秀出一個 DIV。那麼要怎麼做出這功能呢?

我們在切換 TAB 的時候,通常網址列後面都會多一個「#+英數字」作為標記,而我們可以利用這個標記來識別現在是切換到第幾個分頁,然後針對指定的分頁,在 client.html 顯示一個 DIV。

步驟一

先在 master.js 設定一個事件,將 #(hash) 給擷取出來:

JS

我有用console.log記錄每一次的 hash 變化,確定他有抓到 hash,然後用websocket.send寫到 JSON

ps. 這個 keyup 事件不一定要寫在websocket.onmessage裡。

步驟二

同樣在 client.js 將資料抓出來,然後做判斷:

JS

利用這樣的概念與方法,就可以簡單地在兩端互傳資料囉 🙂

以上就是簡單的 WebSocket 經驗分享,有任何問題或建議都歡迎讓我知道喔!!

有趣的 WebSocket 實例

恰巧昨天朋友丟了一個由偉大的谷歌之神做的 WebSocket 互動網站,有興趣的朋友可以玩玩看,來體驗 WebSocket 是多麼的有趣 :)

Super Sync Sports 是個利用 WebSocket 做的運動小遊戲,請先用 web 端瀏覽該網站,然後他會要你也用手機開啟這個網站,將 web 跟手機連線之後,就可以利用手機控制 web 介面來跑步、游泳,或是騎腳踏車。

而且還可以多人連線喔,超酷的 XDDD,大家有興趣不妨跟身旁的親朋好友一起玩樂比賽吧 😀

讓 float 的 div 高度相同

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

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

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

利用 padding 的填充與 margin 的消除

CSS

使用 display:table ,讓 div 變成 table

CSS

延伸閱讀與理論

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

輕鬆寫 WordPress 模組 / 選單

WordPress 的其中一個便利功能,就是可以自由地在側邊欄增添選單,而不用打開 sidebar.php 修改 → 上傳。如果大家有興趣自己製作佈景主題給他人使用,記得要將自由增添選單 (widget supported) 這個功能加上,今天就跟大家分享如何快速、輕鬆地寫出這個功能。

我們會用到的佈景檔案如下:

  • functions.php
  • sidebar.php
  • style.css

步驟一

開啟functions.php,在?> 的前面加上以下語法:

PHP
functions.php
  • name:幫側邊欄取個容易識別的名字吧
  • before_widget:側邊欄一塊一塊模組的開頭(通常會用 div 把他包起來,支援 html)
  • after_widget:側邊欄模組的結尾。
  • before_title:側邊欄模組的標題開頭。
  • after_title:側邊欄模組的標題結尾。

在這個階段我們先在 functions.php 新增好 sidebar1 這個 widget ,接下來就是要在適當的地方取出這個 sidebar1 囉。

步驟二

因為 functions.php 只是用來讓我們撰寫函式的檔案,不會有任何具體的效果。因此所有在 functions.php 寫好的函式,都要在其他 php 檔案進行呼叫的動作。而側邊欄的檔案是 sidebar.php ,所以請打開 sidebar.php 進行呼叫的動作吧!

請在要顯示這個 widget 的地方加入語法:

PHP
sidebar.php

第二行的sidebar1,就是我們在 functions.php 寫的 'name'=>'sidebar1',

這一行意思是:如果你在後台沒有使用 widget 模組;而且就算有使用,也不是放在 sidebar1 的欄位底下。那麼,就會顯示以下內容。

簡單來說,就是如果沒有啟用 widget 模組,sidebar.php 就會給你預設的一組設定,我這邊的預設設定是最新文章標題。假使你有開啟模組,裡面的內容就不會使用 sidebar.php 的預設,而會使用你拖拉的模組為準。

這設定是為了那些沒有使用模組習慣的朋友,而且在預覽佈景主題的時候,也會秀出預設設定讓大家看長甚麼樣子。所以想要設計佈景主題的朋友們,可千萬不要偷懶不寫喔。

步驟三

最後要在 style.css 設定 sidebar.php 的一些樣式啦!相信會寫佈景主題的朋友,對這些設定都已經有些瞭解,這邊就不多說了。

以下是我之前寫的側邊欄樣式,分享給大家:

CSS

修改 WordPress 留言表單的文字

WordPress 有內建的留言表單格式,如果你使用的是預設的布景主題 (例如 twentyten),表單應該會像這樣:

如果你只想簡單修改留言表單的文字、欄位大小,或簡單的微調,不用重新寫一個 comment function,而是使用 comment form 內建的參數即可。

步驟一:打開檔案

留言的表單通常都寫在 comments.php 裡,所以請打開你佈景主題的comments.php

步驟二:搜尋語法

找到$agrs = array( 語法,我們要在裡面修改表單的文字以及欄位等資訊,建議有一些 HTML 基礎再進行修改。

步驟三:設定參數

以下是參數設定,提供給大家做參考。

可以照著修改表單欄位(把英文改成中文)、以及使用 HTML 語法修改 input 設定。

PHP

通常表單欄位的字會跟著 WordPress 的語系設定,如果你使用的是正體中文語系,「comment」的字會變成「迴響」,但假使你想把「迴響」改成「留言」的話,一種方法是直接修改語系檔,另一種方法就是利用 comment form 的參數做設定。

至於像input, textarea,如果有額外需求,就可以利用上面這樣的參數設定,自己在裡面調整 HTML。

想要更進一步了解 comment form 的參數,可以參考 WordPress 官網的文件:Function Reference/ comment form

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 + 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 選擇器概略說明

之前在寫 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 縮寫,我想大家最常用到的也是這幾個語法,所以應該是夠大家使用了!!

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