使用縮寫可以幫助減少你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 的值。 規則二:所有值必須按如下順序宣告。注意,如果你縮寫字型定義,至少要定義font-size和font-family兩個值。1. font-weight、font-style、font-variant 不分先後;
2. 然後是 font-size;
3. 最後是 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 ...