課程表

CSS 基礎教程

• CSS 教程
• CSS 簡介
• CSS 語法
• CSS 選擇器
• CSS 使用
• CSS 注釋
• CSS 顏色
• CSS RGB 顏色
• CSS HEX 顏色
• CSS HSL 顏色
• CSS 背景
• CSS 背景圖像
• CSS 背景重復
• CSS 背景附著
• CSS 簡寫背景屬性
• CSS 邊框
• CSS 邊框寬度
• CSS 邊框顏色
• CSS 邊框各邊
• CSS 簡寫邊框屬性
• CSS 圓角邊框
• CSS 外邊距
• CSS 外邊距合并
• CSS 內邊距
• CSS 高度/寬度
• CSS 框模型
• CSS 輪廓
• CSS 輪廓寬度
• CSS 輪廓顏色
• CSS 簡寫輪廓屬性
• CSS 輪廓偏移
• CSS 文本
• CSS 文本對齊
• CSS 文本裝飾
• CSS 文本轉換
• CSS 文字間距
• CSS 文本陰影
• CSS 字體
• CSS 字體樣式
• CSS 字體大小
• CSS 谷歌字體
• CSS 簡寫字體屬性
• CSS 圖標
• CSS 鏈接
• CSS 列表
• CSS 表格

CSS 中級教程

• CSS Display
• CSS max-width
• CSS 定位
• CSS z-index
• CSS 溢出
• CSS 浮動
• CSS 清除浮動
• CSS 布局 - 浮動實例
• CSS inline-block
• CSS 對齊
• CSS 組合器
• CSS 偽類
• CSS 偽元素
• CSS 不透明度
• CSS 導航欄
• CSS 垂直導航欄
• CSS 水平導航欄
• CSS 下拉菜單
• CSS 圖片庫
• CSS 圖像精靈
• CSS 屬性選擇器
• CSS 表單
• CSS 計數器
• CSS 網站布局
• CSS 單位
• CSS 特異性
• CSS !important
• CSS 數學函數

CSS3 高級教程

• CSS 圓角
• CSS 邊框圖像
• CSS 背景
• CSS 顏色
• CSS 顏色關鍵字
• CSS 漸變
• CSS 徑向漸變
• CSS 陰影
• CSS box-shadow
• CSS 文本效果
• CSS 網絡字體
• CSS 2D 轉換
• CSS 3D 轉換
• CSS 過渡
• CSS 動畫
• CSS 工具提示
• CSS 圖像樣式
• CSS object-fit
• CSS object-position
• CSS 遮罩
• CSS 按鈕
• CSS 分頁
• CSS 多列
• CSS 用戶界面
• CSS 變量
• CSS 覆蓋變量
• CSS 變量 - JavaScript
• CSS 變量 - 媒體查詢
• CSS @property
• CSS Box Sizing
• CSS Flexbox
• CSS 媒體查詢
• CSS 媒體查詢實例

CSS 響應式設計

• RWD 簡介
• RWD 視口
• RWD 網格視圖
• RWD 媒體查詢
• RWD 圖像
• RWD 視頻

CSS 網格教程

• CSS 網格布局模塊
• CSS 網格容器
• CSS 網格項目

CSS 實例

• CSS 實例

CSS 測驗

• CSS 測驗

CSS 參考手冊

• CSS 參考手冊
• CSS 瀏覽器支持
• CSS 選擇器
• CSS 函數
• CSS 單位
• CSS 聽覺
• CSS 網絡安全字體
• CSS 可動畫制作
• CSS 單位
• CSS 顏色
• CSS 顏色值
• CSS 默認值
• CSS 實體

選修課

課程推薦：

• CodeW3C.com 百寶箱

CSS 語法

• CSS 語法

實例解釋：CSS 語法

CSS 選擇器

• 元素選擇器
• id 選擇器
• 類選擇器（針對所有元素）
• 類選擇器（只針對 <p> 元素）
• 引用兩個類的 HTML 元素
• 通用選擇器
• 分組選擇器

實例解釋：CSS 選擇器

CSS 使用

• 外部 CSS
• 內部 CSS
• 行內 CSS
• 多個樣式表
• 層疊順序

實例解釋：如何添加 CSS

CSS 注釋

• 單行注釋
• 多行注釋

實例解釋：CSS 注釋

CSS 顏色

• 設置顏色的背景色
• 設置文本顏色
• 設置邊框顏色
• 設置不同的顏色值
• 設置 RGB 值
• 設置 HEX 值
• 設置 HSL 值

實例解釋：CSS 顏色

CSS 背景

• 設置頁面的背景色
• 設置不同元素的背景色
• 把圖像設置為頁面背景
• 如何只在水平方向重復背景圖像
• 如何定位背景圖像
• 固定的背景圖像（該圖像不會隨著頁面的其余部分滾動）
• 所有背景屬性在一條聲明中
• 高級背景實例

實例解釋：背景屬性

CSS 邊框

• 設置四條邊框的寬度
• 設置上邊框的寬度
• 設置下邊框的寬度
• 設置左邊框的寬度
• 設置右邊框的寬度
• 設置四條邊框的樣式
• 設置上邊框的樣式
• 設置下邊框的樣式
• 設置左邊框的樣式
• 設置右邊框的樣式
• 設置四條邊框的顏色
• 設置上邊框的顏色
• 設置下邊框的顏色
• 設置左邊框的顏色
• 設置右邊框的顏色
• 所有邊框屬性在一條聲明中
• 為元素添加圓角
• 為每個邊設置不同的邊框
• 所有上邊框屬性在一條聲明中
• 所有下邊框屬性在一條聲明中
• 所有左邊框屬性在一條聲明中
• 所有右邊框屬性在一條聲明中

實例解釋：邊框屬性

CSS 外邊距

• 為元素的各邊規定不同的外邊距
• 使用帶有四個值的簡寫 margin 屬性
• 使用帶有三個值的簡寫 margin 屬性
• 使用帶有兩個值的簡寫 margin 屬性
• 使用帶有一個值的簡寫 margin 屬性
• 把外邊距設置 auto，來居中其容器內的元素
• 讓左外邊距繼承父元素
• 外邊距合并

實例解釋：外邊距屬性

CSS 內邊距

• 為元素的各邊規定不同的內邊距
• 使用帶有四個值的簡寫內邊距
• 使用帶有三個值的簡寫內邊距
• 使用帶有兩個值的簡寫內邊距
• 使用帶有一個值的簡寫內邊距
• 內邊距和元素寬度（不設置 box-sizing）
• 內邊距和元素寬度（設置 box-sizing）
• 設置元素的左內邊距
• 設置元素的右內邊距
• 設置元素的上內邊距
• 設置元素的下內邊距

實例解釋：內邊距屬性

CSS 高度/寬度

• 設置元素的高度和寬度
• 設置元素的最大寬度
• 設置不同元素的高度和寬度
• 使用百分百來設置圖像的高度和寬度
• 設置元素的最小寬度和最大寬度
• 設置元素的最小高度和最大高度

實例解釋：定位屬性

CSS 盒模型

• 演示盒模型
• 規定總寬度為 250 像素的元素

實例解釋：盒模型

CSS 輪廓

• 繪制圍繞元素的線條（輪廓）
• 設置輪廓的樣式
• 設置輪廓的顏色
• 使用 outline-color：翻轉輪廓
• 設置輪廓的寬度
• 使用簡寫的輪廓屬性
• 在元素的輪廓與邊框之間添加空間

實例解釋：輪廓屬性

CSS 文本

• 設置不同元素的文本色
• 對齊文本
• 刪除鏈接下面的線
• 修飾文本
• 控制文本中的字母大小寫
• 縮進文本
• 規定字符間距
• 規定行間距
• 設置元素的文本方向
• 增加字間距
• 規定元素的文本陰影
• 在元素內禁用文本換行
• 垂直對齊文本內的圖像

實例解釋：文本屬性

CSS 字體

• 設置文本的字體
• 設置字體的大小
• 以 px 為單位設置字體大小
• 以 em 為單位設置字體大小
• 以百分百和 em 為單位設置字體大小
• 設置字體的樣式
• 設置字體的變體
• 設置字體的粗細
• 所有字體屬性在一條聲明中

實例解釋：字體屬性

CSS 圖標

• Font Awesome 圖標
• Bootstrap 圖標
• Google 圖標

實例解釋：圖標

CSS 鏈接

• 為已訪問/未訪問鏈接添加不同的顏色
• 在鏈接上使用 text-decoration
• 為鏈接規定背景色
• 為超鏈接添加其他樣式
• 不同類型的指針
• 高級 - 創建鏈接框
• 高級 - 創建帶邊框的鏈接框

實例解釋：鏈接屬性

CSS 列表

• 列表中的所有不同的列表項標記
• 把圖像設置為列表項標記
• 定位列表項標記
• 刪除默認列表設置
• 所有列表屬性在一條聲明中
• 用顏色設置列表樣式
• 全寬帶邊框的列表

實例解釋：列表屬性

CSS 表格

• 規定 table、th 以及 td 元素的黑色邊框
• 使用 border-collapse
• 圍繞表格的單一邊框
• 規定表格的寬度和高度
• 設置內容的水平對齊（text-align）
• 設置內容的垂直對齊（vertical-align）
• 規定 th 和 td 元素的內邊距
• 水平分隔符
• 可懸停的表格
• 條狀表格
• 規定表格邊框的顏色
• 設置表格標題的位置
• 響應式表格
• 創建美觀的表格

實例解釋：表格屬性

CSS 顯示

• 如何隱藏元素（visibility:hidden）
• 如何不顯示元素（display:none）
• 如何把塊級元素顯示為行內元素
• 如何把行內元素顯示為塊級元素
• 如何將 CSS 與 JavaScript 一起使用來顯示隱藏內容

實例解釋：display 屬性

CSS 定位

• 相對于瀏覽器窗口來放置元素
• 相對于元素正常位置來放置元素
• 用絕對值定位元素
• 粘性定位
• 重疊元素
• 設置元素的形狀
• 使用像素值設置圖像的上邊緣
• 使用像素值設置圖像的下邊緣
• 使用像素值設置圖像的左邊緣
• 使用像素值設置圖像的右邊緣
• 定位圖像文本（左上角）
• 定位圖像文本（右上角）
• 定位圖像文本（左下角）
• 定位圖像文本（右下角）
• 定位圖像文本（居中）

實例解釋：定位屬性

CSS 溢出

• 使用 overflow: visible - 溢出沒有被裁剪。它在元素框之外渲染。
• 使用 overflow: hidden - 溢出被裁剪，其余內容被隱藏。
• 使用 overflow: scroll - 溢出被裁剪，但是添加了滾動條以查看其余內容。
• 使用 overflow: auto - 如果裁剪了溢出，則應添加滾動條以查看其余內容。
• 使用 overflow-x 和 overflow-y

實例解釋：溢出屬性

CSS 浮動

• float 屬性的簡單使用
• 帶有邊框和外邊距的圖像浮動到段落的右側
• 帶標題的圖像向右浮動
• 讓段落的第一個字母向左浮動
• 關閉浮動（使用 clear 屬性）
• 關閉浮動（使用 clearfix hack）
• 創建浮動框
• 創建并排圖像
• 創建等高框（通過 flexbox）
• 創建水平菜單
• 創建 web 布局實例

實例解釋：浮動屬性

CSS Inline-block

• 展示行內、行內塊、塊級元素的區別
• 使用 inline-block 來創建導航鏈接

實例解釋：Inline-block

CSS 對齊元素

• 通過外邊距進行居中對齊
• 居中對齊文本
• 居中對齊圖像
• 通過 position 實現左對齊/右對齊
• 通過 position 實現左對齊/右對齊 - 跨瀏覽器方案
• 通過 float 實現左對齊/右對齊
• 通過 float 實現左對齊/右對齊 - 跨瀏覽器方案
• 通過 padding 垂直居中
• 垂直和水平居中
• 通過 line-height 垂直居中
• 通過 position 實現垂直和水平居中

實例解釋：對齊屬性

CSS 組合器

• 后代選擇器
• 子選擇器
• 相鄰同胞選擇器
• 通用同胞選擇器

實例解釋：組合器選擇器

CSS 偽類

• 給鏈接添加不同的顏色
• 為鏈接添加其他樣式
• 使用 :focus
• :first-child - 匹配首個 p 元素
• :first-child - 匹配所有 p 元素內的首個 i 元素
• :first-child - 匹配所有第一個子 p 元素中的所有 i 元素
• 使用 :lang

實例解釋：偽類

CSS 偽元素

• 制作文本中特別的首字母
• 制作文本中特別的首行
• 制作特別的首字母和首行
• 使用 :before 在元素之前插入內容
• 使用 :after 在元素之后插入內容

實例解釋：偽元素

CSS 內容生成

• 在每個帶有 content 屬性的鏈接之后的括號中插入 URL
• 用 "Section 1"、"1.1"、"1.2" 等為節和子節編號
• 用 quotes 屬性指定引號

實例解釋：CSS 計數器

CSS 不透明度

• 創建透明圖像
• 創建透明圖像 - mouseover 效果
• 透明圖像的反轉的 mouseover 效果
• 透明框（div）
• 用了 RGBA 值的透明框
• 創建一個文本位于背景圖像上的透明框

實例解釋：圖像不透明度

CSS 導航欄

• 擁有完整樣式的垂直導航欄
• 擁有完整樣式的水平導航欄
• 全高的固定垂直導航欄
• 固定的水平導航欄
• 粘性導航欄（在 IE 或 Edge 15 及更早版本中不起作用）
• 響應式的頂部導航欄
• 響應式的側邊導航欄

實例解釋：導航欄

CSS 下拉列表

• 下拉文本
• 下拉菜單
• 右對齊的下拉菜單
• 下拉圖像
• 下拉導航欄

實例解釋：下拉菜單

CSS 圖片庫

• 圖片庫
• 響應式圖片庫

實例解釋：圖片庫

CSS 圖像精靈

• 圖像精靈
• 圖像精靈 - 導航列表
• 有懸停效果的圖像精靈

實例解釋：圖像精靈

CSS 屬性選擇器

• 選取帶有 target 屬性的所有 <a> 元素
• 選取帶有 target="_blank" 屬性的所有 <a> 元素
• 選取所有帶有 title 屬性的元素，其中 title 屬性包含以空格分隔的單詞列表，單詞之一是 "flower"
• 選取所有帶有以 "top" 開頭的 class 屬性值的元素（必須是整個單詞）
• 選取所有帶有以 "top" 開頭的 class 屬性值的元素（一定不能是整個單詞）
• 選取所有帶有以 "test" 結尾的 class 屬性值的元素
• 選擇帶有包含 "te" 的 class 屬性值的所有元素

實例解釋：屬性選擇器

CSS 表單

• 全寬的輸入字段
• 填充的輸入字段
• 帶邊框的輸入字段
• 帶下邊框的輸入字段
• 帶顏色的輸入字段
• 獲得焦點的輸入字段
• 獲得焦點的輸入字段 2
• 帶圖標的輸入字段
• 有動畫效果的搜索框
• 設置文本框的樣式
• 設置選擇菜單的樣式
• 設置按鈕的樣式
• 響應式表單

實例解釋：表單

CSS 計數器

• 創建計數器
• 嵌套計數器 1
• 嵌套計數器 2

實例解釋：計數器

CSS 網站布局

• 簡單的響應式網站布局
• 一個網站的實例

實例解釋：網站布局

CSS 圓角

• 為元素添加圓角
• 單獨設置每個圓角
• 創建橢圓角

實例解釋：CSS 圓角邊框

CSS 邊框圖像

• 創建圍繞元素的圖像邊框，使用 round 關鍵字
• 創建圍繞元素的圖像邊框，使用 stretch 關鍵字
• 圖像邊框 - 不同的 slice 邊框

實例解釋：CSS 邊框圖像

CSS 背景

• 為元素添加多個背景圖像
• 規定背景圖像的大小
• 使用 "contain" 和 "cover" 縮放背景圖像
• 定義背景圖像的大小
• 全尺寸的背景圖像（完全覆蓋內容區域）
• 使用 background-origin 來規定放置背景圖像的位置
• 使用 background-clip 來規定背景的繪制區域

實例解釋：CSS 背景

CSS 漸變

• 線性漸變 - 從上到下
• 線性漸變 - 從左到右
• 線性漸變 - 對角線
• 線性漸變 - 特定角度
• 線性漸變 - 多個色標
• 線性漸變 - 彩虹色 + 文本
• 線性漸變 - 透明度
• 線性漸變 - 重復的線性漸變
• 徑向漸變 - 均勻分布的色標
• 徑向漸變 - 間距不同的色標
• 徑向漸變 - 設置形狀
• 徑向漸變 - 不同的尺寸關鍵字
• 徑向漸變 - 重復的徑向漸變

實例解釋：CSS 漸變

CSS 陰影效果

• 簡單的陰影效果
• 向陰影添加顏色
• 向陰影添加模糊效果
• 帶黑色陰影的白色文本
• 紅色霓虹燈發光陰影
• 紅色和藍色霓虹燈發光陰影
• 黑色、藍色和深藍色陰影的白色文本
• 向元素添加簡單的 box-shadow
• 向 box-shadow 添加顏色
• 向 box-shadow 添加顏色和模糊效果
• 創建類似紙質卡片（文本）
• 創建類似紙質卡片（寶麗來圖像）

實例解釋：CSS 陰影效果

CSS 文本效果

• 指定應如何向用戶呈現未顯示的溢出內容
• 將鼠標懸停在元素上時如何顯示溢出的內容
• 允許長文字能夠被折斷并換到下一行
• 規定換行規則
• 規定文本的書寫模式（橫著寫還是豎著寫）

實例解釋：CSS 文本

CSS Web 字體

• 在 @font-face 規則中使用您自己的字體
• 在 @font-face 規則中使用您自己的字體（粗體）

實例解釋：CSS web 字體

CSS 2D 轉換

• translate() - 從當前位置刪除元素
• rotate() - 順時針旋轉元素
• rotate() - 逆時針旋轉元素
• scale() - 增加元素
• scale() - 減少元素
• skewX() - 沿 X 軸傾斜元素
• skewY() - 沿 Y 軸傾斜元素
• skew() - 沿 X 和 Y 軸傾斜元素
• matrix() - 旋轉、縮放、移動和傾斜元素

實例解釋：CSS 2D 轉換

CSS 3D 轉換

• rotateX() - 將元素繞其 X 軸旋轉給定角度
• rotateY() - 將元素繞其 Y 軸旋轉給定角度
• rotateZ() - 將元素繞其 Z 軸旋轉給定角度

實例解釋：CSS 3D 轉換

CSS 過渡

• 過渡 - 更改元素的寬度
• 過渡 - 更改元素的寬度和高度
• 為過渡規定不同的速度曲線
• 為過渡效果規定延遲
• 向過渡效果添加變換
• 在一條簡寫屬性中規定所有過渡屬性

實例解釋：CSS 過渡

CSS 動畫

• 把動畫綁定到一個元素
• 動畫 - 改變一個元素的背景色
• 動畫 - 改變一個元素的背景色和位置
• 延遲動畫
• 在動畫停止前運行三次
• 永遠運行動畫
• 從反方向運行動畫
• 交替運行動畫
• 動畫的速度曲線
• 動畫的簡寫屬性

實例解釋：CSS 動畫

CSS 工具提示

• 右側工具提示
• 左側工具提示
• 頂部工具提示
• 底部工具提示
• 帶箭頭的工具提示
• 有動畫效果的工具提示

實例解釋：工具提示

CSS 樣式圖像

• 圓角圖像
• 圓形圖像
• 縮略圖
• 作為鏈接的縮略圖
• 響應式圖像
• 圖像文本（左上角）
• 圖像文本（右上角）
• 圖像文本（左下角）
• 圖像文本（右上角）
• 圖像文本（居中）
• 寶麗來圖像
• 灰度圖像濾鏡
• 高級 - 通過 CSS 和 JavaScript 實現的圖像模態

實例解釋：CSS 圖像

CSS Object-fit

• 剪裁圖像的兩邊，保留長寬比，然后填充空間
• 所有 object-fit 屬性值的例子

實例解釋：Object-fit

CSS 按鈕

• 基礎的 CSS 按鈕
• 按鈕顏色
• 按鈕尺寸
• 圓角按鈕
• 帶顏色的按鈕邊框
• 可懸停的按鈕
• 帶陰影的按鈕
• 被禁用的按鈕
• 按鈕寬度
• 按鈕分組
• 帶邊框的按鈕分組
• 帶動畫的按鈕（懸停效果）
• 帶動畫的按鈕（按鍵效果）
• 帶動畫的按鈕（漣漪效果）

實例解釋：CSS 按鈕

CSS 分頁

• 簡單的分頁
• 活動的、可懸停的分頁
• 帶圓角的活動可懸停分頁
• 可懸停的過渡效果
• 帶邊框的分頁
• 圓角帶邊框的分頁
• 鏈接之間隔著空白的分頁
• 分頁的大小
• 居中的分頁
• 面包屑

實例解釋：CSS 分頁

CSS 多列

• 創建多列
• 規定列之間的間隙
• 規定列之間的規則樣式
• 規定列之間的規則寬度
• 規定列之間的規則顏色
• 規定列之間的規則的寬度、樣式和顏色
• 規定元素應該橫跨多少列
• 為列規定建議的最佳寬度

實例解釋：CSS 多列

CSS 用戶界面

• 允許用戶調整元素的寬度
• 允許用戶調整元素的高度
• 允許用戶同時調整元素的寬度和高度
• 在元素輪廓與邊框之間添加空間

實例解釋：CSS 用戶界面

CSS 變量

• 使用 var() 函數
• 使用 var() 函數來插入若干自定義的屬性值

實例解釋：CSS 變量

CSS Box Sizing

• 不設置 box-sizing 的元素寬度
• 設置 box-sizing 的元素寬度
• 表單元素 + box-sizing

實例解釋：CSS box sizing

CSS 彈性盒

• 帶有三個彈性項目的彈性盒
• 帶有三個彈性項目的彈性盒 - rtl 方向
• flex-direction - row-reverse
• flex-direction - column
• flex-direction - column-reverse
• justify-content - flex-end
• justify-content - center
• justify-content - space-between
• justify-content - space-around
• align-items - stretch
• align-items - flex-start
• align-items - flex-end
• align-items - center
• align-items - baseline
• flex-wrap - nowrap
• flex-wrap - wrap
• flex-wrap - wrap-reverse
• align-content - center
• 彈性項目排序
• Margin-right:auto;
• Margin:auto; = 完美的居中
• 在彈性項目上設置 align-self
• 規定彈性項目的長度，相對于彈性項目的其余部分
• 用彈性盒創建響應式的圖片庫
• 用彈性盒創建響應式網站

實例解釋：CSS flexbox

CSS 媒體查詢

• 如果視口寬度為 480 像素或更寬，則將背景色改為淺綠色
• 如果視口寬度為 480 像素或更寬，顯示一個浮動到頁面左側的菜單

實例解釋：CSS 媒體查詢

CSS 媒體查詢 - 更多實例

• 根據屏幕寬度設置不同的背景色
• 響應式的導航菜單
• 使用浮動的響應式列
• 使用彈性盒的響應式列
• 通過媒體查詢隱藏元素
• 響應式字體大小
• 響應式圖片庫
• 響應式網站
• 根據瀏覽器方向改變頁面布局
• 最小寬度到最大寬度

實例解釋：CSS 媒體查詢實例

CSS 響應式 Web 設計

• 響應式網格視圖
• 為臺式機、筆電和手機添加斷點
• 典型的斷點
• 響應式圖像
• 響應式視頻
• 響應式框架：W3.CSS
• 響應式框架：Bootstrap

實例解釋：CSS 響應式 Web 設計

CSS 網格

• 網格布局
• 網格元素
• 網格列間隙
• 網格行
• 網格容器
• 網格項目

實例解釋：CSS 網格

工具箱

CSS 參考手冊

CSS 實例

CSS 測驗

CSS 課外書

贊助商鏈接