CSS——(3)樣式
文字樣式
| 屬性 | 說明 |
|---|---|
| font-family | 字型型別 |
| font-size | 字型大小 |
| font-weight | 字型粗細 |
| font-style | 字型斜體 |
| color | 顏色 |
1️⃣字型型別font-family
font-family:字型名;
說明：
字型名指的是“微軟雅黑”、“宋體”、“Times New Roman”等。
舉例：font-family:微軟雅黑;
2️⃣ 字型大小font-size
語法：
font-size:畫素值;
舉例：font-size:15px;
3️⃣ 字型顏色color
語法：
color:關鍵字/顏色值;
說明：
顏色的表示方式有四種：
- a. rgb 模式 r 紅色 g 綠色 b 藍色 紅綠藍三原色可以組成n多顏色 rgb取值範圍（0-255）
- b. 直接寫顏色的名稱
- c. 十六進位制 #9f0000 （最常用）
- d. rgba(紅色，綠，藍，透明度) a的取值範圍0-1 0表示完全透明 1 表示不透明
舉例：color:blue;
4️⃣ 字型粗細font-weight
語法：
font-weight:取值;
說明：
對於中文網頁來說，font-weight屬性一般僅用到bold、normal這兩個屬性值完全就可以了，粗細值不建議使用數值（100~900）。
舉例：font-weight:bold;
5️⃣ 字型斜體font-style
在CSS中，使用font-style屬性來定義字型傾斜效果
語法：
font-style:取值;
說明：
font-style屬性的取值如下表：
| font-style屬性值 | 說明 |
|---|---|
| normal | 預設值，正常體 |
| italic | 斜體，這是一個屬性 |
| oblique | 將字型傾斜，將沒有斜體變數（italic）的特殊字型，要應用oblique |
文字樣式
一、CSS段落屬性
| 屬性 | 說明 |
|---|---|
| text-decoration | 下劃線、刪除線、頂劃線 |
| text-transform | 文字大小寫 |
| font-varient | 將英文文字轉換為“小型”大寫字母 |
| text-index | 段落首行縮排 |
| text-align | 文字水平對齊方式 |
| line-height | 行高 |
| letter-spacing | 字距 |
| word-spacing | 詞距 |
1、text-decoration
在CSS中，使用text-decoration屬性來定義字型下劃線、刪除線和頂劃線。
語法：
text-decoration:屬性值;
說明：
text-decoration屬性取值如下表：
| 屬性值 | 說明 |
|---|---|
| none | 預設值，可以用這個屬性值也可以去掉已經有下劃線或刪除線或頂劃線的樣式 |
| underline | 下劃線 |
| line-through | 刪除線 |
| overline | 頂劃線 |
2、text-transform
在CSS中，使用text-transform屬性來轉換文字的大小寫，這個是針對英文而言，因為中文不存在大小寫之分。
語法：
text-transform:屬性值;
說明：
text-transform屬性取值如下表：
| text-transform屬性值 | 說明 |
|---|---|
| none | 預設值，無轉換髮生 |
| uppercase | 轉換成大寫 |
| lowercase | 轉換成小寫 |
| capitalize | 將每個英文單詞的首字母轉換成大寫，其餘無轉換髮生 |
3、font-variant
使用font-variant屬性只有一個作用：把文字設定成小型大寫字母，這也是針對英文而言，因為中文不存在大小寫之分。
語法：
font-variant：normal/small-caps;
說明：
font-variant屬性取值如下表：
| font-variant屬性值 | 說明 |
|---|---|
| normal | 預設值，正常效果 |
| small-caps | 小型大寫字母的字型 |
4、text-indent
我們可以使用CSS的text-indent屬性來控制文字首行的縮排。
語法：
text-indent:畫素值;
說明：
在CSS初學階段，主要使用畫素作單位
5、text-align
在CSS中，使用text-align屬性控制文字的水平方向的對齊方式：左對齊、居中對齊、右對齊。
語法：
text-align:屬性值;
說明：
text-align屬性取值如下表：
| text-align屬性 | 說明 |
|---|---|
| left | 預設值，左對齊 |
| center | 居中對齊 |
| right | 右對齊 |
6、line-height
line-height屬性指的是行高，而不是行間距。
語法：
line-height:畫素值;
7、letter-spacing
語法：
letter-spacing:畫素值;
說明：
-
letter-spacing控制的是字間距，每一箇中文文字作為一個“字”，而每一個英文字母也作為一個“字”！
-
預設情況下，letter-spacing幾乎都用不上，直接採用瀏覽器預設樣式就可以了。
8、word-spacing
語法：
word-spacing:畫素值;
說明：
定義詞間距，以空格為基準進行調節，如果多個單詞被連在一起，則被word-spacing視為一個單詞；如果漢字被空格分隔，則分隔的多個漢字就被視為不同的單詞，word-spacing屬性此時有效。
邊框樣式
一、邊框屬性
要設定一個元素的邊框必須要設定以下3個方面：
- （1）border-width邊框的寬度；
- （2）border-style邊框的外觀（實線，或者虛線）；
- （3）border-color邊框的顏色；
1、border-width
語法：
border-width:畫素值;
2、border-style
border-style屬性用於設定邊框的外觀，例如實線邊框和虛線邊框。
語法：
border-style:屬性值;
說明：
❗ 雖然border-style屬性值很多，但是大部分我們都用不上。一般情況下，我們用到solid和dashed這兩個屬性值就夠了
3、border-color
border-color屬性用來定義邊框的顏色。
語法：
border-color:顏色值
二、邊框屬性簡潔寫法
設定一個元素的邊框就要設定3個屬性：border-width、border-style和border-color。如下：
border-width:1px;
border-style:solid;
border-color:Red;
這種寫法費時費力，導致程式碼量多。因此我們邊框CSS樣式有一個簡潔的寫法：
border:1px solid Red;
背景樣式
一、背景顏色
1、background-color屬性
在CSS中，使用background-color屬性來定義元素的背景顏色。
語法：
background-color:顏色值;
二、背景影象
背景影象屬性如下：
| 屬性 | 說明 |
|---|---|
| background-image | 定義背景影象的路徑 |
| background-repeat | 定義背景影象顯示方式，例如縱向平鋪、橫向平鋪 |
| background-position | 定義背景影象在元素哪個位置 |
| background-attachment | 定義背景影象是否隨內容而滾動 |
1、background-image屬性
在CSS中，使用background-image屬性來定義元素的背景圖片。
語法：
background-image:url("影象地址");
2、background-repeat屬性
在CSS中，使用background-repeat屬性可以設定背景影象是否平鋪，並且可以設定如何平鋪。
語法：
background-repeat:取值;
說明：
background-repeat屬性取值如下：
| 屬性值 | 說明 |
|---|---|
| no-repeat | 表示不平鋪 |
| repeat | 預設值，表示在水平方向（x軸）和垂直方向（y軸）同時平鋪 |
| repeat-x | 表示在水平方向（x軸）平鋪 |
| repeat-y | 表示在垂直方向（y軸）平鋪 |
3、background-position屬性
背景位置屬性用於設定背景影象的位置，這個屬性只能應用於塊級元素和替換元素。其中替換元素包括img、input、textarea、select和object。
語法：
background-positon:畫素值/關鍵字;
說明：
語法中的取值包括兩種，一種是採用畫素值，另一種是關鍵字描述。
1️⃣ 取值為畫素值
x（數值）：設定網頁的橫向位置，單位為px
y（數值）：設定網頁的縱向位置，單位為px
2️⃣ 關鍵字
| 屬性值 | 說明 |
|---|---|
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
4、background-attachment屬性
在CSS中，使用背景附件屬性background-attachment可以設定背景影象是隨物件滾動還是固定不動。
語法：
background-attachment:scroll/fixed;
說明：
background-attachment 屬性只有2個屬性值。scroll表示背景影象隨物件滾動而滾動，是預設選項；fixed表示背景影象固定在頁面不動，只有其他的內容隨滾動條滾動。
參考文章：https://blog.csdn.net/wuyxinu/article/details/103583618