經常使用CSS代碼大全（工做必備）

用html+css能夠很方便的進行網頁的排版佈局，但不是每一種屬性或者代碼咱們都銘記於心，最近我把CSS中的經常使用代碼進行了概括總結，方便本身之後查看，同時也分享給你們，但願對大家有用。

 

一.文本設置

1、font-size: 字號參數

2、font-style: 字體格式

3、font-weight: 字體粗細

4、顏色屬性

color: 參數

注意使用網頁安全色

 

2、超連接設置

text-decoration: 參數

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

參數取值範圍：

underline：爲文字加下劃線

overline：爲文字加上劃線

line-through：爲文字加刪除線

blink：使文字閃爍

none：不顯示上述任何效果

 

3、背景

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;">二、背景圖片

background-image: url(URL)

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

3、背景圖片重複

background-repeat: 參數

參數取值範圍 ：

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

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

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

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

4、背景圖片固定

背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。若是不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網頁的滾動而滾動。爲了不過於花哨的背景圖片在滾動時轉移瀏覽者的注意力，通常都設爲固定

background-attachment: 參數

參數取值範圍：

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

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

 

4、區塊

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：無顯示

 

5、方框

1、height 高度

2、width 寬度

3、padding 內邊距

4、margin 外邊距

5、float（浮動）：可讓塊級元素在一行中排列，例如橫向菜單。

6、clear 清除浮動

 

6、邊框

1、樣式

border style 參數

邊框樣式的參數：

none：無邊框

dotted：邊框爲點線

dashed：邊框爲長短線

solid：邊框爲實線

double：邊框爲雙線

2、寬度

border width 參數

3、顏色

border color 參數

 

7、列表

list-style-type 列表樣式

不一樣瀏覽器的列表符可能不相同，可能會影響到網頁，因此網頁中的列表大多都是由背景圖片顯示。

控制用戶界面的樣式

 

8、鼠標

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" 　　左下箭頭形