一、基礎認知 1.1 CSS的介紹
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；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/455426.html
標籤：Html/Css
上一篇：HTML第二天
下一篇：flex這些問題應該被理解