Vegetable Chicken Contest Round 1
阿新 • • 發佈：2022-03-24
一、基礎認知
1.1 CSS的介紹
CSS：層疊樣式表（Cascading style sheets） CSS的作用：給頁面中的HTML標籤設定樣式
例：
CSS：層疊樣式表（Cascading style sheets） CSS的作用：給頁面中的HTML標籤設定樣式
1.2 CSS語法規則
CSS寫在style標籤中，style標籤一般寫在head標籤裡面，title標籤下面
例：
1.3 CSS初體驗
常見的屬性：
| CSS常見屬性 | 作用 |
|---|---|
| color | 文字顏色 |
| font-size | 字型大小 |
| background-color | 背景顏色 |
| width | 寬度 |
| height | 高度 |
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 p{ 11 color: blue; 12 font-size: 30px; 13 background-color: black; 14 width: 200px; 15 height: 200px; 16 } 17 </style> 18 </head> 19 20 <body> 21 <p>hello,world!</p> 22 </body> 23
注意：
1. CSS的標點都是英文 狀態下的
2. 每一個鍵值對寫完之後，最後需要寫分號
2.1 CSS引入方式
內嵌式： CSS寫在style標籤中
提示：style標籤雖然可以寫在頁面任意位置，但是通常約定寫在head標籤中
外聯式：CSS寫在一個單獨的.CSS檔案中
提示： 需要通過link標籤在網頁中引入
<link rel="stylesheet" href="">
行內式：CSS寫在標籤的style屬性中
<p style="color: blue;">hello,world!</p>
小結：CSS常見三種引入方式的特點區別有哪些（書寫位置，作用範圍，使用場景）？
| 引入方式 | 書寫位置 | 作用範圍 | 使用場景 |
|---|---|---|---|
| 內嵌式 | CSS寫在style標籤中 | 當前頁面 | 小案例 |
| 外聯式 | CSS寫在單獨的CSS檔案中.通過link標籤引入 | 多個頁面 | 專案中 |
| 行內式 | CSS寫在標籤的style屬性中 | 當前標籤 | 配合js使用 |
二、基礎選擇器 1.1 選擇器的作用： 選擇頁面中對應的標籤（找它），方便後續設定樣式（改它） 1.2 標籤選擇器 結構：標籤名 { CSS屬性名:屬性值; } 作用：通過標籤名，找到頁面中所有這類標籤，設定樣式 注意點： 1. 標籤選擇器選擇的是一類標籤，而不是單獨某一個 2. 標籤選擇器無論巢狀關係有多深，都能找到對應的標籤
1.2類選擇器
結構：.類名 { css屬性名：屬性值； } 作用：通過類名，找到頁面中所有帶有這個類名的標籤，設定樣式 注意點： 1. 所有標籤上都有class屬性，class屬性的屬性值稱為類名（類似於名字） 2. 類名可以由數字、字母、下劃線、中劃線組成，但不能以數字或者中劃線開頭 3. 一個標籤可以同時有多個類名，類名之間以空格隔開 4. 類名可以重複，一個類選擇器可以同時選中多個標籤 3. id選擇器 結構：#id屬性值 { css屬性名：屬性值； } 作用：通過id屬性值，找到頁面中帶有這個id屬性值的標籤，設定樣式 注意點： 1. 所有標籤上都有id屬性 2. id屬性值類似於身份證號碼，在一個頁面中是唯一的，不可重複的！ 3. 一個標籤上只能有一個id屬性值 4. 一個id選擇器只能選中一個標籤
4. 萬用字元選擇器 結構：* { css屬性名：屬性值； } 作用：找到頁面中所有的標籤，設定樣式 注意點： 1. 開發中使用極少，只會在極特殊情況下才會用到 2. 在小頁面中可能會用於去除標籤預設的margin和padding
三、字型和文字樣式 1.1 字型大小 屬性名：font-size 取值：數字 + px 注意點： 谷歌瀏覽器預設文字大小是16px 單位需要設定，否則無效 1.2 字型粗細 屬性名：font-weight 取值： 關鍵字： 正常：normal 加粗：bold 純數字：100~900的整百數： 正常：400 加粗：700 注意點： 不是所有字型都提供了九種粗細，因此部分取值頁面中無變化 實際開發中以：正常、加粗兩種取值使用最多。 1.3 字型樣式（是否傾斜） 屬性名：font-style 取值： 正常（預設值）：normal 傾斜：italic 1.5 字體系列 font-family 屬性名：font-family 常見取值：具體字型1,具體字型2,具體字型3,具體字型4,...,字體系列 具體字型："Microsoft YaHei"、微軟雅黑、黑體、宋體、楷體等…… 字體系列：sans-serif、serif、monospace等…… 渲染規則： 1. 從左往右按照順序查詢，如果電腦中未安裝該字型，則顯示下一個字型 2. 如果都不支援，此時會根據作業系統，顯示最後字體系列的預設字型 注意點： 1. 如果字型名稱中存在多個單詞，推薦使用引號包裹 2. 最後一項字體系列不需要引號包裹 3. 網頁開發時，儘量使用系統常見自帶字型，保證不同使用者瀏覽網頁都可以正確顯示 1.6 字型font相關屬性的連寫 屬性名：font (複合屬性) 取值： font : style weight size family; 省略要求：只能省略前兩個，如果省略了相當於設定了預設值 注意點：如果需要同時設定單獨和連寫形式 要麼把單獨的樣式寫在連寫的下面 要麼把單獨的樣式寫在連寫的裡面 1.7 字型相關屬性總結 字型大小： font-size 數字+px 字型粗細：font-weight 正常：normal 或 400 加粗：bold 或 700 字型樣式：font-style 正常：normal 傾斜：italic 字體系列：font-family 具體字型1,具體字型2,具體字型3,具體字型4,...,字體系列 字型連寫：font font : style weight size family; 2.1 文字縮排 屬性名：text-indent 取值： 數字+px 數字+em（推薦：1em=當前標籤的font-size的大小） 2.2 文字水平對齊方式 屬性名：text-align 取值：left左對齊 ；center居中對齊；right右對齊 注意點：如果需要讓文字水平居中，text-align屬性給文字所在的標籤設定 2.3 水平居中方法總結 text-align：center text-align：center 能讓那些元素居中？ 1. 文字 2. span，a標籤 3. input，img標籤 如果需要讓以上元素水平居中，text-align；center 需要給以上元素的父元素設定 2.4 文字修飾 屬性名：text-decoration 取值： underline 下劃線；line-through 刪除線；overline 上劃線；none 無裝飾線； 注意點： 開發中會使用text-decoration：none；清除a標籤預設的下劃線 3.1 行高 作用：控制一行的上下行間距 屬性名：line-height 取值：px+數字 /倍數（當前標籤font-size的倍數） 應用： 1. 讓單行文字垂直居中可以設定line-height：文字父元素高度 2. 網頁精準佈局時，會設定line-height：1 可以取消上下間距 行高與font，注意覆蓋問題 font：style weight size/line-height family；