[CSS+]HTML Learn Data Day 2

推薦《[CSS+]HTML Learn Data Day 2》：作者把經驗掰開揉碎講得很細。下面按要點重新組織一遍，方便你快速抓住重點、用起來。

總有人說前端會被ai替代，這確實是這樣，我更應該學習這些東西，這個時代應該做一個全能的人？應該說是 T 型人才 學習這個是爲了成爲更好ai駕駛員 css這東西不算很複雜，但是特別繁多，這也成爲了最高的學習門檻 歡迎來我的網站觀賞聽歌： 鈴仙醬 建議用電腦打開，手機不會適配。 一、CSS 基礎與選擇器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三種方式，我這次主要使用了 外鏈式 ，配合少量的 行內式 。

總有人說前端會被ai替代，這確實是這樣，我更應該學習這些東西，這個時代應該做一個全能的人？應該說是 T 型人才 學習這個是爲了成爲更好ai駕駛員 css這東西不算很複雜，但是特別繁多，這也成爲了最高的學習門檻 歡迎來我的網站觀賞聽歌： 鈴仙醬 建議用電腦打開，手機不會適配。 一、CSS 基礎與選擇器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三種方式，我這次主要使用了 外鏈式 ，配合少量的 行內式 。 引入方式 語法示例 特點 適用場景 外鏈式 <link rel="stylesheet" href="css/index.css"> 結構與樣式分離，代碼清晰，可複用 正式項目開發 行內式 <div style="color: red;"> 權重高，但代碼混亂，難以維護 臨時測試或極少量的樣式修正 (如 Footer) 內嵌式 <style> ... </style> 寫在 head 中，不推薦用於大項目 單頁面練習 2. 選擇器 (Selectors) 爲了精準地控制頁面上的元素，需要用到選擇器。

總有人說前端會被ai替代，這確實是這樣，我更應該學習這些東西，這個時代應該做一個全能的人？應該說是 T 型人才 學習這個是爲了成爲更好ai駕駛員 css這東西不算很複雜，但是特別繁多，這也成爲了最高的學習門檻 歡迎來我的網站觀賞聽歌： 鈴仙醬 建議用電腦打開，手機不會適配。 一、CSS 基礎與選擇器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三種方式，我這次主要使用了 外鏈式 ，配合少量的 行內式 。 引入方式 語法示例 特點 適用場景 外鏈式 <link rel="stylesheet" href="css/index.css"> 結構與樣式分離，代碼清晰，可複用 正式項目開發 行內式 <div style="color: red;"> 權重高，但代碼混亂，難以維護 臨時測試或極少量的樣式修正 (如 Footer) 內嵌式 <style> ... </style> 寫在 head 中，不推薦用於大項目 單頁面練習 2. 選擇器 (Selectors) 爲了精準地控制頁面上的元素，需要用到選擇器。 選擇器類型 符號 示例 說明 權重 (優先級) 標籤選擇器 無 body {} , img {} 選中頁面所有同名標籤 低 (1) 類選擇器 . .theInf {} 選中所有 class="theInf" 的元素 (最常用) 中 (10) ID 選擇器 # #ND {} 選中唯一 id="ND" 的元素 (如那張特寫的圖) 高 (100) 後代選擇器 空格 .theInf img {} 選中 .theInf 內部所有的 img 疊加計算 僞類選擇器 : :hover 鼠標懸停時的狀態 - 二、佈局 這是今天最大的收穫。

總有人說前端會被ai替代，這確實是這樣，我更應該學習這些東西，這個時代應該做一個全能的人？應該說是 T 型人才 學習這個是爲了成爲更好ai駕駛員 css這東西不算很複雜，但是特別繁多，這也成爲了最高的學習門檻 歡迎來我的網站觀賞聽歌： 鈴仙醬 建議用電腦打開，手機不會適配。 一、CSS 基礎與選擇器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三種方式，我這次主要使用了 外鏈式 ，配合少量的 行內式 。 引入方式 語法示例 特點 適用場景 外鏈式 <link rel="stylesheet" href="css/index.css"> 結構與樣式分離，代碼清晰，可複用 正式項目開發 行內式 <div style="color: red;"> 權重高，但代碼混亂，難以維護 臨時測試或極少量的樣式修正 (如 Footer) 內嵌式 <style> ... </style> 寫在 head 中，不推薦用於大項目 單頁面練習 2. 選擇器 (Selectors) 爲了精準地控制頁面上的元素，需要用到選擇器。 選擇器類型 符號 示例 說明 權重 (優先級) 標籤選擇器 無 body {} , img {} 選中頁面所有同名標籤 低 (1) 類選擇器 . .theInf {} 選中所有 class="theInf" 的元素 (最常用) 中 (10) ID 選擇器 # #ND {} 選中唯一 id="ND" 的元素 (如那張特寫的圖) 高 (100) 後代選擇器 空格 .theInf img {} 選中 .theInf 內部所有的 img 疊加計算 僞類選擇器 : :hover 鼠標懸停時的狀態 - 二、佈局 這是今天最大的收穫。以前排版可能需要用 float 清除浮動，現在用 Flex 可以輕鬆實現從左到右、從上到下的排列。

總有人說前端會被ai替代，這確實是這樣，我更應該學習這些東西，這個時代應該做一個全能的人？應該說是 T 型人才 學習這個是爲了成爲更好ai駕駛員 css這東西不算很複雜，但是特別繁多，這也成爲了最高的學習門檻 歡迎來我的網站觀賞聽歌： 鈴仙醬 建議用電腦打開，手機不會適配。 一、CSS 基礎與選擇器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三種方式，我這次主要使用了 外鏈式 ，配合少量的 行內式 。 引入方式 語法示例 特點 適用場景 外鏈式 <link rel="stylesheet" href="css/index.css"> 結構與樣式分離，代碼清晰，可複用 正式項目開發 行內式 <div style="color: red;"> 權重高，但代碼混亂，難以維護 臨時測試或極少量的樣式修正 (如 Footer) 內嵌式 <style> ... </style> 寫在 head 中，不推薦用於大項目 單頁面練習 2. 選擇器 (Selectors) 爲了精準地控制頁面上的元素，需要用到選擇器。 選擇器類型 符號 示例 說明 權重 (優先級) 標籤選擇器 無 body {} , img {} 選中頁面所有同名標籤 低 (1) 類選擇器 . .theInf {} 選中所有 class="theInf" 的元素 (最常用) 中 (10) ID 選擇器 # #ND {} 選中唯一 id="ND" 的元素 (如那張特寫的圖) 高 (100) 後代選擇器 空格 .theInf img {} 選中 .theInf 內部所有的 img 疊加計算 僞類選擇器 : :hover 鼠標懸停時的狀態 - 二、佈局 這是今天最大的收穫。以前排版可能需要用 float 清除浮動，現在用 Flex 可以輕鬆實現從左到右、從上到下的排列。 1. 開啓 Flex 佈局 只要給父盒子加上 display: flex; ，它就變成了“彈性容器”。

讀完別停：把最觸動你的一條記下來，這周就用上。能落地的閱讀纔算數，歡迎回來聊聊你的實踐結果。 來源｜博客園《[CSS+]HTML Learn Data Day 2》，https://www.cnblogs.com/Reisentyan/p/19374041