用html+css可以很方便的進行網頁的排版佈局，但不是每一種屬性或者代碼我們都銘記於心，最近我把CSS中的常用代碼進行了歸納總結，方便自己以後查看，同時也分享給大家，希望對你們有用。

一.文本設置

1、font-size: 字號參數

2、font-style: 字體格式

3、font-weight: 字體粗細

4、顏色屬性color:

參數注意使用網頁安全色

二、超鏈接設置

text-decoration: 參數

主要用途是改變瀏覽器顯示文字鏈接時的下劃線。

參數取值範圍：

underline：為文字加下劃線

overline：為文字加上劃線

line-through：為文字加刪除線

blink：使文字閃爍

none：不顯示上述任何效果

三、背景

1、背景顏色padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; border-left: 1px solid rgb(128, 128, 128); background: rgb(238, 238, 238); box-shadow: rgba(7, 17, 27, 0.05) 0px 4px 8px 0px; box-sizing: border-box; border-radius: 8px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微軟雅黑, Tahoma, Arial, sans-serif;">2、背景圖片

background-image: url(URL)

URL就是背景圖片的存放路徑，none表示無。

3、背景圖片重複background-repeat: 參數

參數取值範圍：

no-repeat：不重複平鋪背景圖片

repeat-x：使圖片只在水平方向上平鋪

repeat-y：使圖片只在垂直方向上平鋪

如果不指定背景圖片重複屬性，瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

4、背景圖片固定背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時轉移瀏覽者的注意力，一般都設為固定

background-attachment: 參數

參數取值範圍：

fixed：網頁滾動時，背景圖片相對於瀏覽器的窗口而言，固定不動

scroll：網頁滾動時，背景圖片相對於瀏覽器的窗口而言，一起滾動

四、區塊

1、單詞間距

word-spacing: 間隔距離

2、字母間距

letter-spacing: 字母間距

3、文本對齊

text-align: 參數

參數的取值：

left：左對齊

right：右對齊

center：居中對齊

justify：相對左右對齊

4、垂直對齊

vertical-align: 參數

top：頂對齊

bottom：底對齊

text-top：相對文本頂對齊

text-bottom：相對文本底對齊

baseline：基準線對齊

middle：中心對齊

sub：以下標的形式顯示

super：以上標的形式顯示

5、文本縮進

text-indent: 縮進距離

12px相當於一個文字距離

6、空格

white-space: 參數

normal 正常

pre 保留

nowrap 不換行

7、顯示樣式

display: 參數

參數取值範圍：

block：塊級元素，在對象前後都換行

inline：在對象前後都不換行

list-item：在對象前後都換行，增加了項目符號

none：無顯示

五、方框

1、height 高度2、width 寬度3、padding 內邊距4、margin 外邊距5、float（浮動）：可以讓塊級元素在一行中排列，例如橫向菜單。 6、clear 清除浮動

六、邊框

1、樣式

border style 參數

邊框樣式的參數：

none：無邊框

dotted：邊框為點線

dashed：邊框為長短線

solid：邊框為實線

double：邊框為雙線

2、寬度

border width 參數

3、顏色border color 參數

七、列表

list-style-type 列表樣式

不同瀏覽器的列表符可能不相同，可能會影響到網頁，所以網頁中的列表大多都是由背景圖片顯示。控制用戶界面的樣式

八、鼠標

cursor：鼠標形狀參數

CSS鼠標形狀參數表：

鼠標形狀：CSS代碼

style="cursor:hand" 手形style="cursor:crosshair" 十字形style="cursor:text" 文本形style="cursor:wait" 沙漏形style="cursor:move" 十字箭頭形： style="cursor:help" 問號形style="cursor:e-resize" 右箭頭形style="cursor:n-resize" 上箭頭形style="cursor:nw-resize" 左上箭頭形style="cursor:w-resize" 左箭頭形style="cursor:s-resize" 下箭頭形style="cursor:se-resize" 右下箭頭形style="cursor:sw-resize" 左下箭頭形