CSS (Cascading Style Sheets) ,中文可稱為階層樣式表,或層疊樣式表、串樣式列表等,這是由 W3C (World Wide Web Consortium) 制定的標準,提供給標記語言 (markup languange) 如 HTML (HyperText Markup Language) 或 XML (eXtensible Markup Language) 文件樣式 (style) 的顯示。
因為標記語言主要用途是提供文件的結構,而樣式也就是文件呈現眼前的外貌,基本上是與結構決然不同的。兩者分開處理,也就是文件的結構與文件的外觀分開處理,文件的結構裡就無須內嵌許多樣式的內容,另一方面,調整外觀更動樣式內容也不會影響文件結構。
CSS 2.1 Specification 是 W3C 於 2011 年 6 月頒訂的標準版本,我們依此提供一份參考教學文件。
基本概念
單位
選取器
@import 規則
階層
元素呈現方式 display
文字相關
- 字型顏色 color
- 字型種類 font-family
- 字型粗細 font-weight
- 字型尺寸 font-size
- 字型格式 font-style
- 字型變體 font-variant
- 字型伸縮 font-stretch
- 字型大小 font-size-adjust
- 字型 font
- 文字縮排 text-indent
- 水平對齊 text-align
- 文字行高 line-height
- 垂直對齊 vertical-align
- 單字間距 word-spacing
- 字元間距 letter-spacing
- 大小寫轉換 text-transform
- 文字裝飾 text-decoration
- 文字陰影 text-shadow
- 空白字元 white-space
- 文字方向 direction
- unicode-bidi
區塊相關
- 寬度 width
- 高度 height
- 邊界 margin
- 左邊界 margin-left
- 右邊界 margin-right
- 上邊界 margin-top
- 下邊界 margin-bottom
- 邊距 padding
- 左邊距 padding-left
- 右邊距 padding-right
- 上邊距 padding-top
- 下邊距 padding-bottom
- 邊框格式 border-style
- 左邊框格式 border-left-style
- 右邊框格式 border-right-style
- 上邊框格式 border-top-style
- 下邊框格式 border-bottom-style
- 邊框粗細 border-width
- 左邊框粗細 border-left-width
- 右邊框粗細 border-right-width
- 上邊框粗細 border-top-width
- 下邊框粗細 border-bottom-width
- 邊框顏色 border-color
- 左邊框顏色 border-left-color
- 右邊框顏色 border-right-color
- 上邊框顏色 border-top-color
- 下邊框顏色 border-bottom-color
- 邊框 border
- 左邊框 border-left
- 右邊框 border-right
- 上邊框 border-top
- 下邊框 border-bottom
背景相關
- 背景 background
- 背景顏色 background-color
- 背景圖片 background-image
- 重複背景圖片 background-repeat
- 背景位置 background-position
- 背景固定 background-attachment
定位相關
- 浮動 float
- 清除 clear
- 定位 position
- 對頂端位移 top
- 對右端位移 right
- 對底部位移 bottom
- 對左端位移 left
- 最小寬度 min-width
- 最大寬度 max-width
- 最小高度 min-height
- 最大高度 max-height
- 溢出 overflow
- 剪裁 clip
- 可見性 visibility
- 重疊順序 z-index
表格
清單
自訂內容 content
引號 quotes
滑鼠游標 cursor
外框 outline
參考資料
http://www.w3.org/TR/CSS21/
https://developer.mozilla.org/en/CSS_Reference
相關連結
HTML, CSS 教材
回首頁
沒有留言:
張貼留言