柚子快報(bào)激活碼778899分享：HTML CSS3美化網(wǎng)頁元素

http://yzkb.51969.com/

目錄

一、字體樣式

二、文本樣式

三、偽類樣式

四、列表樣式

五、背景樣式

1、背景顏色

2、背景圖片

一、字體樣式

font-family 字體樣式

font-size ? 字體大小

px像素

em根據(jù)父容器字體大小改變(em*父級(jí)字體大小px)

rem根據(jù)根元素字體大小改變(rem*根元素字體大小px)

font-style ? 字體風(fēng)格(傾斜)

font-weight ? 字體粗細(xì)

?

簡寫：

font：風(fēng)格 粗細(xì) 大小 類型

二、文本樣式

color 文本顏色

單詞，十六進(jìn)制，rgb，rgba(透明度從0-1)

text-align 內(nèi)容水平移動(dòng)(在塊級(jí)元素中生效)

left 左(默認(rèn)) right 右 center居中

line-height 設(shè)置行高

text-decoration 文本裝飾

none 默認(rèn)，不要錢

underline 下劃線

overline 上劃線

line-throught 刪除線 (也可以用del標(biāo)簽)

vertical-align 垂直對(duì)齊方式

vertical-align屬性:middle居中、top上、bottom下

text-shadow 文字陰影

color顏色 x-offset坐標(biāo) y-offset坐標(biāo) blur-radius模糊程度;

三、偽類樣式

超鏈接偽類

偽類名稱含義示例a:link未單擊訪問時(shí)超鏈接樣式a:link{color:#9ef5f9;}a:visited單擊訪問后超鏈接樣式a:visited {color:#333;}a:hover鼠標(biāo)懸浮其上的超鏈接樣式a:hover{color:#ff7300;}a:active鼠標(biāo)單擊未釋放的超鏈接樣式a:active {color:#999;}

設(shè)置偽類的順序：a:link->a:visited->a:hover->a:active

四、列表樣式

去除列表前小黑點(diǎn)

1.list-style-type

2.list-style-image

值說明語法示例none無標(biāo)記符號(hào)list-style- type:none;disc實(shí)心圓，默認(rèn)類型list-style- type:disc;circle空心圓list-style- type:circle;square實(shí)心正方形list-style- type:square;decimal數(shù)字list-style- type:decimal

五、背景樣式

1、背景顏色

background-color

2、背景圖片

background-image 背景圖片 url路徑

background-repeat 是否平鋪

repeat：沿水平和垂直兩個(gè)方向平鋪

no-repeat：不平鋪，即只顯示一次

repeat-x：只沿著水平方向平鋪

repeat-y：只沿著垂直方向平鋪

background-position 圖像位移

background-position: X Y

水平方向的關(guān)鍵詞：

left、center、right

垂直方向的關(guān)鍵詞：

top、center、bottom

background 簡寫：背景顏色 背景圖像路徑 背景位置 是否平鋪

background-size 圖像大小

auto ? 默認(rèn)值，使用背景圖片保存原樣

percentage ? ? 當(dāng)使用百分值時(shí)，不是相對(duì)于背景的尺寸大小來計(jì)算的，而是相對(duì)于元素寬度來計(jì)算的

cover ? 整個(gè)背景圖片放大填充了整個(gè)元素

contain ? 讓背景圖片保持本身的寬高比例，將背景圖片放到寬度或者高度正好適應(yīng)所定義背景的區(qū)域

?

使用百分比%

background：linear-gradient 背景顏色漸變

background:linear-gradient(方向、顏色...)

background:-webkit-linear-gradient(left top ,#0070c0,#cc0000)

漸變兼容

IE瀏覽器是Trident內(nèi)核，加前綴：-ms-

Chrome瀏覽器是Webkit內(nèi)核，加前綴：-webkit-

Safari瀏覽器是Webkit內(nèi)核，加前綴：-webkit-

Opera瀏覽器是Blink內(nèi)核，加前綴：-o-

Firefox瀏覽器是Mozilla內(nèi)核，加前綴：-moz-

柚子快報(bào)激活碼778899分享：HTML CSS3美化網(wǎng)頁元素

http://yzkb.51969.com/

參考文章