CSS 先進排版技術

標準語法

• properties (屬性)
• selectors (指標)

在 HTML 文件加入 CSS 設計

• 參照外部獨立 CSS 檔
• 加入 style 元素
• 使用元素的 style 屬性

Type selector (型式指標)

背景色屬性 background-color

Box Model

• margin, border, padding, content
• 區域水平置中。

ID selector (ID 指標)

Class selector (Class 指標)

selectors 指標的組合

• 多個 selectors 定義相同屬性。
• Descendant combinator (後裔組標)。
• Child combinators (子組標)。

Positioning 多欄排版、相簿設計、產品陳列。

• normal flow (正常編排)
  • block
  • inline
• position
  • relative
  • absolute
  • fixed
  • static
• float
  • left
  • right
  • none
• clear

寬、高與尺寸單位

• height, min-height, max-height
• width, min-width, max-width
• 內容與尺寸不相符的處理
  • overflow
• 尺寸單位
  • px, em, ex, %

display 改變排列及區域垂直置中

• block, inline, inline-block
• table-cell

文章的排版

• 文字對齊
  • text-align
• 首行縮排 / 凸排
  • text-indent
• 行高
  • line-height
• 上標、下標、行內置中
  • vertical-align
• 字距
  • letter-spacing
  • word-spacing
• 折行
  • white-space
  • word-break

特性的繼承性

文字的處理 (font)

• 字體、尺寸。
• 粗體、斜體、轉變大小寫。
• 底線、刪除線。

表格的編排

• border-collapse
• border-spacing
• 表格欄寬及顏色

selectors 的優先序

學習資格

• 能閱讀 html 網頁語法，不會寫沒關係。→ 瞧瞧 HTML 課程
• 能閱讀簡單英文單字。
• 有空間概念。

應用範圍

• 網頁設計、雲端應用程式 (web Apps) 。
• 部落格模版設計。
• 行動裝置應用程式 (App) 。
• 電腦應用程式。

教學示範

1. CSS Positioning 高彈性排版
2. CSS Positioning 產品陳列展示

相關證照

• w3schools CSS Developer Certificate

觀摩網站

1. CSS Zen Garden

更新日期： 2012-8-21