文章目錄
CSS的知識點語句有些遺忘了……趕緊複習一下
一、文本相關屬性
1、設置字體屬性font-family
font-family:name1,[name2],[name3]
name：字體的名稱，name2、name3備用字體
2、設置字號屬性font-size
font-size:length
length指字體的尺寸，由數字和長度單位組成，可以是相對單位，也可以是絕對單位，絕對單位不會隨着顯示器的變化而變化
下表是一些絕對單位
| 長度單位 | 說明 |
|---|---|
| in | inch，英寸 |
| cm | Centimeter，釐米 |
| mm | Millimeter，毫米 |
| pt | point，印刷的點數，1pt等價於1/72inch |
| pc | pica，1pc = 12pt |
相對單位有：
- 相對長度單位px：是一個長度單位，表示在瀏覽器上1個像素的大小
- 絕對長度單位em和ex：1 em表示的長度是其夫標記中字母m的標準寬度，1 ex表示字母 x 的標準高度
3、設置文字顏色屬性color
color:color
指具體的顏色值，顏色值的表示方法可以是顏色的英文單詞、十六進制、RGB或者HSL
4、設置文字的水平對齊方式屬性text-align
text-align:left|center|right|justify
- left：左對齊
- center：居中對齊
- right：右對齊
- justify：兩端對齊
5、設置段首縮進屬性text-indent
text-indent:length
length就是由百分比數值或浮點數和單位標識符組成的長度值，允許爲負值。
二、背景相關屬性
1、添加背景顏色屬性background-color
background-color:color|transparent
color代表背景的顏色，transparent表示背景顏色透明
2、添加HTML5中標記的背景圖片background-image
background-image:url()
背景圖像放在網頁的最底層，文字和圖片等都位於其上
3、設置圖像的平鋪方式background-repeat
background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y
下表是各個屬性值的含義：
| 屬性 | 含義 |
|---|---|
| inherit | 從夫標記機成background-repeat屬性的設置 |
| no-repeat | 背景圖像只顯示一次，不重複 |
| repeat | 在水平和垂直方向上重複顯示背景圖像 |
| repeat-x | 只沿x軸方向重複顯示背景圖像 |
| repeat-y | 只沿y軸方向重複顯示背景圖像 |
4、設置背景圖像是否隨頁面內容滾動background-attachment
background-attachment:scroll|fixed
- scroll：當頁面滾動時，背景圖像跟着頁面一起滾動
- fixed：將背景圖像固定在頁面的可見區域
5、設置背景圖像在頁面中的位置background-position
background-position:length|precentage|top|center|bottom|left|right
屬性值解釋如下表所示
| 屬性值 | 含義 |
|---|---|
| length | 設置背景圖像於頁面邊距水平或垂直方向的距離，單位爲cm\mm\px等 |
| percentage | 根據頁面標記框的寬度和高度的百分比放置背景圖像 |
| top | 設置背景圖像頂部居中顯示 |
| center | 設置背景圖像居中顯示 |
| bottom | 設置背景圖像底部居中顯示 |
| left | 設置背景圖像左部居中顯示 |
| right | 設置背景圖像右部居中顯示 |
三、列表相關屬性
- list-style：簡寫屬性，把所有用於列表的屬性設置一個聲明中
- list-style-image：將圖像設置爲列表項標誌
- list-style-position：設置列表項的標誌在文本以內或以外
- list-style-type：設置列表項標誌的類型