1.CSS介紹
知識點 | 核心內容 | 重點 |
CSS定義 | 層疊樣式表，用于內容修飾和樣式展現 | 英文全稱cascading style sheets |
CSS作用 | 實現HTML內容與樣式分離，提高開發效率 | 對比傳統HTML元素單獨設置樣式的低效方式 |
學習建議 | 掌握常用功能即可，重點在打通前后端數據通道 | 與前端開發者的學習深度要求對比 |
CSS官方資源 | 包含基礎/中級/高級教程、響應式設計等完整體系 | 離線手冊使用技巧（Ctrl+滾輪縮放） |
樣式分離優勢 | 統一修改多元素樣式，避免重復勞動 | 通過三個table案例說明維護效率差異 |
2.CSS快速入門
知識點 | 核心內容 | 重點 |
CSS基礎語法 | style標簽內定義CSS規則，通過選擇器（如div）匹配HTML元素并設置樣式屬性（寬度、高度、背景色等） | 分號分隔多屬性；最后屬性分號可省略但建議保留 |
樣式復用優勢 | 集中定義樣式后，所有匹配元素自動生效；修改樣式屬性可全局同步更新（如顏色、尺寸） | 傳統方法（行內樣式）VS CSS集中控制效率對比 |
常用CSS屬性 | width、height、background-color的單位（如px）及寫法規范 | 屬性值必須帶單位（如300px）；顏色值可用名稱或十六進制代碼 |
開發工具技巧 | 瀏覽器快捷鍵調整頁面縮放（Ctrl+滾輪）；IDE報錯提示（如缺少分號） | 分號缺失報錯關鍵詞：expected |
3.CSS語法
知識點 | 核心內容 | 重點 |
CSS基本語法結構 | 由選擇器和聲明兩部分組成 | 選擇器類型區分（元素/類/ID選擇器） |
聲明部分構成 | 屬性+值組成，多個聲明用分號分隔 | 最后一個聲明分號可省略但建議保留 |
代碼規范建議 | 每行只寫一個屬性聲明 | 單行多屬性寫法雖有效但不推薦 |
調試技巧 | 通過修改顏色/大小驗證樣式生效 | 顏色調試法為實用經驗 |
CSS注釋寫法 | /* 注釋內容 */ 類似Java語法 | 與HTML注釋<!-- -->區分 |
開發工具特性 | IDE自動格式化多屬性為分行顯示 | 格式化功能體現行業規范 |
4.字體顏色和邊框
知識點 | 核心內容 | 重點 |
CSS顏色表示方法 | 三種指定顏色的方式： 1. 英文單詞（如red）; 2. 16進制（如#00ff00）; 3. RGB三原色（如rgb(255,0,0)） | 16進制與RGB的書寫格式差異; - 16進制需加#前綴; - RGB需用rgb()函數包裹 |
CSS邊框屬性 | border的復合寫法： - 寬度（如1px）; - 樣式（如solid/dashed）; - 顏色（如blue） | 樣式關鍵字易混淆; - solid（實線） vs dashed（虛線） |
寬度/高度單位 | 支持兩種單位： 1. 固定像素（如300px）; 2. 百分比（如50%） | 百分比單位的計算基準; - 相對于父容器尺寸 |
代碼演示邏輯 | 1. 顏色切換示例（紅→綠→自定義）; 2. 邊框樣式切換（實線→虛線）; 3. 響應式寬度（百分比動態調整） | 實操順序影響理解; - 需先定義元素再添加樣式 |
5.背景顏色和字體樣式
知識點 | 核心內容 | 重點 |
背景顏色設置 | 使用background-color屬性設置元素背景色 | 屬性名是background-color而非background |
div基礎樣式 | 通過width和height設置元素尺寸 | 單位需統一使用px等標準單位 |
字體大小控制 | 使用font-size屬性調整文字尺寸 | 注意瀏覽器默認字體大小差異 |
字體粗細設置 | 通過font-weight:bold實現粗體效果 | 需區分bold與數值(700等)的等效性 |
字體類型指定 | 用font-family設置字體族(如微軟雅黑) | 字體可用性依賴用戶本地安裝 |
邊框基礎樣式 | border:1px solid black三要素組合 | 順序/單位/顏色值的規范寫法 |
CSS選擇器應用 | 通過元素選擇器(如div)定位目標元素 | 類選擇器與ID選擇器的優先級差異 |
6.div和文本居中
知識點 | 核心內容 | 重點 |
div居中 | 使用margin-left: auto; margin-right: auto;實現div水平居中 | 注意與text-align: center的區別（后者僅控制文本） |
文本居中 | 使用text-align: center屬性控制文本水平對齊 | 可替換為left/right實現不同對齊方式 |
自適應特性 | 居中的div會隨頁面寬度變化自動保持居中位置 | 需理解auto值的自適應計算原理 |
7.超鏈接去下劃線和表格細線
知識點 | 核心內容 | 重點 |
超鏈接去下劃線 | 使用CSS的text-decoration: none屬性去除超鏈接默認下劃線 | text-decoration屬性值理解（none/underline/overline等） |
表格細線控制 | 通過組合選擇器統一設置table, tr, td的邊框樣式，配合border-collapse: collapse消除間隙 | 組合選擇器優先級 vs 單獨選擇器 |
CSS組合選擇器 | 使用逗號分隔的多元素選擇器實現樣式復用（如table, tr, td） | 選擇器作用范圍與樣式繼承關系 |
8.無序列表去掉樣式
知識點 | 核心內容 | 重點 |
列表去修飾 | 使用list-style: none去除無序列表默認符號 | 區分有序列表和無序列表的默認樣式差異 |
CSS樣式應用 | 通過<style>標簽內聯樣式控制列表顯示 | 內聯樣式與外部樣式表的優先級比較 |
實際開發案例 | 京東首頁大量使用ul/li結構但隱藏默認符號 | 電商網站導航結構的實現方式 |
代碼演示 | ul { list-style: none }完整實現代碼 | 不同瀏覽器對列表樣式的兼容性處理 |
9.CSS使用方式(1) 行內樣式
知識點 | 核心內容 | 重點 |
CSS的三種使用方式 | 行內樣式(style屬性直接設置) | 代碼臃腫 vs 外部樣式表的維護性 |
行內樣式示例 | <div style="width:300px; height:100px; background-color:#color"> | 分號分隔多個樣式屬性 |
行內樣式缺點 | 代碼量大、可讀性差、維護困難(需逐個修改相同樣式) | 修改背景色需改動多處代碼 |
樣式復用場景 | 相同樣式需在多個元素重復定義 | 與外部樣式表的DRY原則對比 |
10.CSS使用方式(2) head標簽style指定
知識點 | 核心內容 | 重點 |
CSS的第二種使用方式 | 在head標簽中使用style標簽定義CSS樣式 | style標簽必須包含type屬性 |
樣式定義方法 | 通過選擇器(如div、span)統一管理多個元素的樣式 | 選擇器優先級問題 |
div元素樣式 | 設置寬度(300px)、高度(100px)、背景色 | 像素單位與百分比單位的區別 |
span元素樣式 | 使用border屬性設置邊框(1px solid red) | border簡寫屬性順序 |
內聯樣式與內部樣式表對比 | 內部樣式表更方便統一管理多個元素 | 樣式優先級：內聯 > 內部 > 外部 |
11.CSS使用方式(3)?引入外部CSS文件
知識點 | 核心內容 | 重點 |
CSS外部引入方式 | 通過<link>標簽引入獨立CSS文件 | rel屬性必須寫 vs type屬性可選 |
link標簽屬性 | rel="stylesheet"表示關聯樣式表; href指定CSS文件路徑 | relation單詞拼寫與縮寫(rel) |
路徑引用方式 | 支持相對路徑和絕對路徑 | 京東案例展示完整域名路徑 |
多文件引入 | 可重復使用link標簽引入多個CSS文件 | 樣式疊加時的優先級問題 |
開發實踐建議 | 實際開發推薦外部引入方式; 教學演示常用內聯樣式(style標簽) | 開發與教學的差異點 |
12.CSS元素選擇器
知識點 | 核心內容 | 重點 |
CSS選擇器 | 元素選擇器（如div、h1、p等）是最基礎的選擇器，直接匹配HTML元素 | 優先級規則（元素選擇器 vs 其他選擇器） |
元素選擇器特點 | 修飾所有匹配的HTML元素（如所有h1統一應用樣式） | 作用范圍全局性 vs 其他選擇器的局部性 |
CSS應用方式 | 示例中使用內嵌樣式（第二種方式），實際開發推薦外部樣式表（第三種方式） | 開發規范與實際場景差異 |
選擇器優先級對比 | 元素選擇器優先級低于類選擇器/ID選擇器 | 權重計算規則（!important > 行內 > ID > 類 > 元素） |
13.ID選擇器
知識點 | 核心內容 | 重點 |
ID選擇器定義 | 為特定ID的HTML元素指定樣式，通過#定義 | 與元素選擇器的區別：ID唯一性 vs 元素選擇器的全局性 |
ID選擇器語法 | #id值 {樣式規則}，需先在元素標簽中定義id="自定義值" | 需注意：ID值不能重復，否則報錯（duplicated ID） |
使用場景 | 需對單個元素個性化修飾時使用（如僅修改某一h1標簽樣式） | 對比：元素選擇器會修飾所有同類標簽 |
優先級沖突 | 未直接解答，但暗示ID選擇器優先級高于元素選擇器（需后續講解） | 易混淆點：多選擇器共存時的樣式覆蓋規則 |
代碼示例 | 通過#css1 {color: gold}和#css2 {color: green}演示差異化樣式 | 關鍵細節：ID值需與代碼中的定義嚴格匹配（區分大小寫） |
14.類選擇器
知識點 | 核心內容 | 重點 |
類選擇器（Class Selector） | 通過class屬性選擇并統一修飾一組元素，語法為.class名 {樣式} | 與ID選擇器（唯一性）和元素選擇器（全局性）的區別 |
元素選擇器（Element Selector） | 通過標簽名（如div）全局修飾所有同類元素 | 無法針對性修飾部分元素 |
ID選擇器（ID Selector） | 通過id屬性唯一修飾單個元素，語法為#id名 {樣式} | id不可重復，與class的復用性對比 |
選擇器應用場景對比 | 唯一修飾用ID，全局修飾用元素選擇器，部分修飾用類選擇器 | 三類選擇器的優先級問題（ID > Class > Element） |
類選擇器實操示例 | 1. 元素添加class屬性（如class="css1"）; 2. 樣式表中定義.css1 {color: pink;} | 類名可重復使用，需用.前綴聲明 |
15.組合選擇器
知識點 | 核心內容 | 注意事項 | 應用示例 |
組合選擇器 | 讓多個選擇器共用同一CSS樣式，語法為選擇器1, 選擇器2 {屬性:值} | 需用逗號分隔選擇器，且各選擇器需符合原有命名規范（如類選擇器用.，ID選擇器用#） | div.class01, #id01 {width:300px; border:1px solid red} |
樣式復用優勢 | 避免重復代碼，類似面向對象的繼承思想（共通用父類，差異單獨寫） | 與單獨寫多段樣式對比：維護性差（需同步修改多處） | 表格案例中class01和id01共用寬/高/邊框樣式 |
優先級問題 | 未展開講解，但提示后續會分析元素/類/ID選擇器的優先級規則 | 需注意組合選擇器內部各選擇器的優先級仍獨立計算 | “元素同時有元素/類/ID選擇器時需判斷優先級” |
16.選擇器的優先級
知識點 | 核心內容 | 重點 |
CSS選擇器優先級規則 | 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器 | 優先級與代碼書寫順序無關，需通過權重計算判定 |
行內樣式演示 | 通過style屬性直接定義（如color: red），優先級最高 | 即使存在ID/類選擇器，仍優先生效 |
ID選擇器演示 | 通過#id定義（如#id1 { color: yellow }），優先級次之 | 需注意與類選擇器的權重差異（ID權重更高） |
類選擇器演示 | 通過.class定義（如.class1 { color: green }），優先級低于ID | 易與元素選擇器混淆（類選擇器權重更高） |
元素選擇器演示 | 通過標簽名定義（如div { color: brown }），優先級最低 | 常作為基礎樣式，易被其他選擇器覆蓋 |
動態驗證案例 | 通過逐步移除不同選擇器，觀察樣式變化驗證優先級 | 關鍵結論：行內 > ID > 類 > 元素（與順序無關） |
17.CSS練習
知識點 | 核心內容 | 重點 |
CSS基礎概念 | CSS指層疊樣式表（Cascading Style Sheets） | 外部樣式表引用方法（<link>標簽） |
外部樣式表引用 | 通過<link>標簽在HTML的<head>部分引用 | type屬性可省略，href必須存在 |
內部樣式表定義 | 使用<style>標簽在HTML中定義 | 與行內樣式（style屬性）易混淆 |
行內樣式（內聯樣式） | 通過元素的style屬性直接定義 | 優先級高于外部和內部樣式表 |
CSS語法規則 | 選擇器 + 聲明塊（如body { color: red; }） | 元素選擇器（如h1）與類/ID選擇器區別 |
CSS注釋 | 使用/* 注釋內容 */ | 與HTML注釋（<!-- -->）區分 |
背景顏色控制 | background-color屬性 | 與文本顏色（color）屬性區分 |
文本樣式控制 | color（顏色）、font-size（尺寸）、font-weight（粗體） | font-weight: bold與<strong>標簽效果差異 |
超鏈接樣式 | text-decoration: none去除下劃線 | 需覆蓋瀏覽器默認樣式 |
邊框定制化 | border-width按上、右、下、左順時針順序定義 | 多值語法（如10px 1px 5px 20px） |
邊距與間距 | margin-left控制左邊距，padding定義內容與邊框間距 | padding不支持負值 |
列表樣式 | list-style-type定義項目符號（如square） | 與無序列表（<ul>）默認樣式對比 |
CSS優先級 | 行內樣式 > 內部樣式 > 外部樣式 | !important強制覆蓋規則 |
實踐方法論 | 通過案例測試CSS屬性效果（如邊框寬度順序驗證） | 靈活運用開發者工具調試 |
)
