CSS簡介
CSS 英文全稱【cascading style sheet】 漢語意思：層疊樣式表
作用：CSS 用於美化網頁，還可以進行網頁布局
【前端三層是什么？】
前端三層分為：HTML（結構層）CSS（樣式層）JavaScript（行為層）
總結：
CSS 前端人當中稱之為“樣式層”，可以對網頁進行美化【比如文字設置顏色、設置文字大小、設置文字字體】，可以進行網頁的頁面布局
書寫規則
CSS （層疊樣式表，簡稱樣式）根據在網頁中書寫的位置不同，分為3種：行內樣式、內嵌樣式和外鏈樣式
1.1 行內樣式寫法：
- 任意標簽【容器級別標簽和文本級別標簽】都可以添加行內樣式
- 需要在雙標簽、單標簽的開始標簽位置書寫
- 在開始標簽名字后面，別忘記有空格，給這個標簽添加一個style（英文：樣式，風格）屬性
- style屬性值得寫法：樣式屬性名字 + ：+ 樣式屬性的屬性值 + ；
- 別忘記在樣式屬性值后面加一個分號，代表當前這一個樣式設置完畢，進行下一個樣式屬性
- 一個標簽可以同時設置多個樣式，多個樣式之間用分號隔開
示例如下：
效果如下：
1.2 常用的行內樣式
在制作網頁的時候，我們經常和網頁中的文字打交道，比如設置文字顏色、文字大小、文字的字體
1.2.1 color
- 主要作用：設置文字顏色
- 屬性值：英文單詞或16進制的數字
1、英文單詞
注：一個樣式一般只書寫一次，如果書寫多次，右側覆蓋左側樣式
示例如下：
效果如下：
2、16進制數字
- 生活中比較常用的是10進制數字（逢十進一）而16進制的數字是逢16進一
- 組成：0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f（英文不區分大小寫）
- 16進制的顏色表示不用記憶，參考W3C 網站即可
- 鏈接：https://www.w3school.com.cn/html/html_colors.asp
- 如果 color 樣式的屬性值為16進制數字，書寫格式以 # 開始，以分號結束
示例如下：
效果如下：
1.2.2 font-size
- font-size ：字體大小
- 主要作用：設置文字大小
- 屬性值：數字 + px單位（px-- pixel 像素）
示例如下：
- 谷歌瀏覽器，一般標簽默認文字大小是16px，最小字體是12px，如果比12px 小，系統默認顯示12px
- IE 瀏覽器，一般標簽默認文字大小是16px，最小字體是1px，如果比1px 小，系統默認顯示1px
- 任意瀏覽器的字體大小都是上不封頂的，注意：比如 h 系列標簽，默認字體大小，還有一些瀏覽器是自帶默認樣式的
谷歌與IE 的對比圖 ：
1.2.3 font-family
- font-family: 中文含義：字體、系列
- 主要作用：設置文字字體
- 文字：分為中文、英文
1、常用中文字體：
微軟雅黑、方正粗黑宋簡體，楷體
示例如下：
效果如下：
2、常用英文字體：
Arial、Comic、Sans MS、Webdings
- 谷歌默認字體是微軟雅黑
- 語法注意事項：
- 屬性值外層需要加一對單引號
- 可以同時設置多個字體，多個字體間用逗號隔開，從左到右，前面字體覆蓋后面字體設置
- 英文字體不用記憶
- 如果文字內容為純英文，設置多個英文字體，前者覆蓋后者
- 文字內容為文字 + 英文，設置多個中英文字體，從左到右找到第一個符合自己字體進行設置
示例如下：
效果如下：
1.2.4 盒模型樣式
- 盒模型樣式包括：width、height、background-color；
- width：設置樣式寬度，屬性值：數字 + px單位
- height: 設置樣式高度，屬性值：數字 + px單位
- background-color : 設置樣式背景顏色，屬性值與color一致，為英文單詞或16進制
- 網頁的執行順序：從上到下，從左到右
示例如下：
效果如下：
