CSS樣式屬性單詞代碼簡寫方式有哪些

這篇文章將為大家詳細講解有關(guān)CSS樣式屬性單詞代碼簡寫方式有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1、border(CSS邊框)簡寫：

1)、4個邊邊框?qū)挾葹?px，色彩為#000

border-color:#000; border-style:solid; border-width:1px

概略簡寫為：

border:1px solid #000;

2)、單獨上、下、左、左邊框簡寫
左邊：

border-left-color:#000; border-left-style:solid; border-left-width:1px

簡寫：

border-left:1px solid #000

左邊：

border-right-color:#000; border-right-style:solid; border-right-width:1px

簡寫：

border-right:1px solid #000

上邊：

border-top-color:#000; border-top-style:solid; border-top-width:1px

簡寫：

border-top:1px solid #000

下邊：

border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px

簡寫：

border-bottom:1px solid #000

3)、身手性簡寫邊框
無意偶爾只設(shè)置3邊的邊框時刻，我們或者手段性削減代碼量。
假設(shè)我們不設(shè)置上邊框，而其他3邊為1px完成玄色邊框。

傳統(tǒng)代碼：

Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}

簡寫：

Div{border:1px solid #000;border-top:0}

這樣抵達雷同成果也大大地削減CSS代碼量

體會更多css邊框美化膨脹教程。

2、padding（CSS padding）簡寫：

1)、四邊設(shè)置padding內(nèi)補白屬性
古板思想：

Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px

籠統(tǒng)css padding簡寫：

Padding:4px 3px 5px 2px

2）、只對3邊配置padding
要是咱們差遲“上”設(shè)置裝備擺設(shè)padding，別的3邊設(shè)置裝備擺設(shè)padding屬性

古板：

Padding-left:2px;Padding-right:3px;Padding-bottom:5px

簡寫：

Padding:0 3px 5px 2px

3邊不異情況：
古板：

Padding-left:2px;Padding-right:2px;Padding-bottom:2px

簡寫：

Padding:0 2px 2px 2px;

3、margin簡寫

Margin與padding縮寫類似

1）、四邊間距設(shè)置裝備擺設(shè)縮寫：
傳統(tǒng)：

Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;

簡寫：

Margin:4px 3px 5px 2px

2)、四邊設(shè)置間隔雷同縮寫
古板：

Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;

簡寫：

Margin:2px

3）、上下不異、支配雷同

Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;

簡寫：

Margin:5px 2px

4、background簡寫

bac千克round-color:#000;

也許簡寫為

bac公斤round:#000;

bac千克round-image:url(圖片地點)

可簡寫為：

bac公斤round:url(圖片地址)

CSS背景比較經(jīng)常使用的花樣屬性，包孕獨自配置一個后臺顏色、獨自設(shè)置靠山為圖片、單獨配置后盾圖片是否幾回再三，一再是所有幾回再三照舊依據(jù)X橫向或Y縱向反復(fù)。接上來我們先容bac公斤round后援名堂經(jīng)常使用簡寫與把穩(wěn)。

1）、單獨設(shè)置裝備擺設(shè)配景一種色采的背景優(yōu)化

background-color:#CCC

美化為：

background:#CCC

2）、背景為圖片，X橫向頻頻平鋪

bac公斤round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif); 
bac公斤round-position:0 0; background-repeat:repeat-x

簡寫：

bac千克round:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) repeat-x 0 0;

2）、靠山為圖片，Y縱向一再平鋪

bac千克round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif); 
bac公斤round-position:0 0; bac千克round-repeat:repeat-y

CSS簡寫美化為：

bac千克round:url(//www.css5.com.cn/images2012/logo.gif) repeat-y 0 0;

3）、配景為圖片，不反復(fù)平鋪CSS壓縮

bac千克round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif);
bac千克round-position:0 0; background-repeat:no-repeat

簡寫：

background:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) no-repeat 0 0;

4）、配景為圖片，網(wǎng)頁全布景X與Y一再平鋪

bac公斤round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif);

簡寫吞并：

background:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) ;

5）、后援為黑色，圖片向X橫向反復(fù)平鋪

background-color:#CCC;bac千克round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif); 
background-position:0 0; background-repeat:repeat-x;

簡寫兼并：

bac千克round:#CCC url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) repeat-x 0 0;

這里當(dāng)心色彩與圖片前后軌范。

5、font簡寫

font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;

可簡寫為：

font:12px/12px Arial, Helvetica, sans-serif;

關(guān)于“CSS樣式屬性單詞代碼簡寫方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。