css 常用屬性縮寫

2021-06-28 00:50:07 字數 2284 閱讀 3844

使用縮寫可以幫助減少你css檔案的大小,更加容易閱讀。css縮寫的主要規則如下:

顏色

16進製制的色彩值,如果每兩位的值相同,可以縮寫一半,例如:

#000000可以縮寫為#000;#336699可以縮寫為#369;
盒尺寸

通常有下面四種書寫方法:

property:value1; 表示所有邊都是乙個值value1;

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3

property:value1 value2 value3 value4;

四個值依次表示top,right,bottom,left

方便的記憶方法是順時針,上右下左。具體應用在margin和padding的例子如下:

margin:1em 0 2em 0.5em;

邊框(border)

邊框的屬性如下:

border-width:1px;

border-style:solid;

border-color:#000;

縮為一句:border:1px solid #000;

語法是border:width style color;

背景(backgrounds)

背景的屬性如下:

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

縮為一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

語法是background:color image repeat attachment position;

你可以省略其中乙個或多個屬性值,如果省略,該屬性值將用瀏覽器預設值,預設值為:

color: transparent

image: none

repeat: repeat

attachment: scroll

position: 0% 0%

字型(fonts)

字型的屬性如下:

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"lucida grande",sans-serif;

可以縮寫為一句:font:italic small-caps bold 1em/140% "lucida grande",sans-serif;

規則一:必須宣告 font-size 和 font-family 的值。 規則二:所有值必須按如下順序宣告。

1. font-weight、font-style、font-variant 不分先後;

2. 然後是 font-size;

3. 最後是 font-family。

注意,如果你縮寫字型定義,至少要定義font-size和font-family兩個值。

列表(lists)

取消預設的圓點和序號可以這樣寫list-style:none;

list的屬性如下:

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以縮寫為一句:list-style:square inside url(image.gif);

CSS縮寫屬性整理

順序任意,除了border style必須設定外,其餘值可以省略為預設值。只能設定全域性邊框,可以用border top border left等簡寫屬性來覆蓋修改區域性 以下屬性可採用任何順序,且都是可選屬性 background clip background attachment backgr...

常用CSS縮寫語法

顏色16進製制的色彩值,如果每兩位的值相同,可以縮寫一半,例如 000000可以縮寫為 000 336699可以縮寫為 369 盒尺寸通常有下面四種書寫方法 property value1 表示所有邊都是乙個值value1 property value1 value2 表示top和bottom的值是...

10 CSS的屬性縮寫

一些css屬性允許使用一串值代替許多屬性,值使用空格分開。margin,pdding和border width允許合併 margin top width,margin right width,margin bottom width等等,形式像這樣 property top right bottom ...