Java開發4年，拿到這份文件死啃2個月，跳槽阿里工資double，瞬間40K
CSS(Cascading Style Sheets)
CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用於設定HTML頁面中的文字內容（字型、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。
CSS以HTML為基礎，提供了豐富的功能，如字型、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設定不同的樣式。
CSS樣式規則
使用HTML時，需要遵從一定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：
在上面的樣式規則中:
1.選擇器用於指定CSS樣式作用的HTML物件，花括號內是對該物件設定的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的物件設定的樣式屬性，例如字型大小、文字顏色等。
4.屬性和屬性值之間用英文“:”連線。
5.多個“鍵值對”之間用英文“;”進行區分。
font-size:字號大小
font-size屬性用於設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。具體如下：
font-family:字型
font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文字的字型設定為微軟雅黑，可以使用如下CSS樣式程式碼：
p{ font-family:"微軟雅黑";}
可以同時指定多個字型，中間以逗號隔開，表示如果瀏覽器不支援第一個字型，則會嘗試下一個，直到找到合適的字型。
1. 現在網頁中普遍使用14px+。
2. 儘量使用偶數的數字字號。ie6等老式瀏覽器支援奇數會有bug。
3. 各種字型之間必須使用英文狀態下的逗號隔開。
4. 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號。當需要設定英文字型時，英文字型名必須位於中文字型名之前。
5. 如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
6. 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示。
在 CSS 中設定字型名稱，直接寫中文是可以的。但是在檔案編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。
方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。
方案二： 在 CSS 直接使用 Unicode 編碼來寫字型名稱可以避免這些錯誤。使用 Unicode 寫中文字型名稱，瀏覽器是可以正確的解析的。font-family: "\5FAE\8F6F\96C5\9ED1"，表示設定字型為“微軟雅黑”。
可以通過escape() 來測試屬於什麼字型。
| 字型名稱 | 英文名稱 | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書 | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細明體 | MingLiU | \7EC6\660E\4F53 |
| 新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
為了照顧不同電腦的字型安裝問題，我們儘量只使用宋體和微軟雅黑中文字型
font-weight:字型粗細
字型加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。
font-weight屬性用於定義字型的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。
小技巧：
數字 400 等價於 normal，而 700 等價於 bold。 但是我們更喜歡用數字來表示。
font-style:字型風格
字型傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。
font-style屬性用於定義字型風格，如設定斜體、傾斜或正常字型，其可用屬性值如下：
normal：預設值，瀏覽器會顯示標準的字型樣式。
italic：瀏覽器會顯示斜體的字型樣式。
oblique：瀏覽器會顯示傾斜的字型樣式。
小技巧：
平時我們很少給文字加斜體，反而喜歡給斜體標籤（em，i）改為普通模式。
font:綜合設定字型樣式 (重點)
font屬性用於對字型樣式進行綜合設定，其基本語法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。div{ /*font-style:italic; font-weight:700; font-size:16px; font-family:"MicrosoftYaHei";*/ /*複合屬性寫法，font:font-stylefont-weightfont-size/line-heightfont-family;*/ font:italic70016px"MicrosoftYaHei"; }
注意：其中不需要設定的屬性可以省略（取預設值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
字型樣式應用：
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>字型屬性</title> <style> body{ font-family:"宋體",Arial,Helvetica,sans-serif; } .size{ font-size:12px; } .bold{ font-weight:700; /*font-weight:bold;700後面不要加單位，等價於bold，都是加粗效果*/ /*實際開發中提倡使用數字*/ } h4{ font-weight:400; /*font-weight:normal;與400等價，恢復正常粗細值*/ } .xieti{ font-style:italic; } em{ font-style:normal; } </style> </head> <body> <h4>蘭陵美酒鬱金香</h4> <pclass="size">玉碗盛來琥珀光</p> <pclass="bold">但使主人能醉客</p> <p>不知何處是他鄉</p> <pclass="xieti">上課時候的你</p> <em>下課時候的你</em> </body> </html>
開發者工具（chrome）
此工具是我們的必備工具，以後程式碼出了問題，我們首先第一反應就是：
“按F12”或者是 “shift+ctrl+i” 開啟 開發者工具。
選單： 右擊網頁空白出---檢視
小技巧：
-
ctrl+滾輪 可以 放大開發者工具程式碼大小。
-
左邊是HTML元素結構 右邊是CSS樣式。
-
右邊CSS樣式可以改動數值和顏色檢視更改後效果。