点击这里给我发消息 推荐使用1024以上分辨率浏览本站,此处广告位招商……

常用CSS缩写语法总结

08:58 AM 2006-12-21 | 逍遥老鬼 | 日志分类:DIV+CSS

摘自 网页设计师

使用缩写可以帮助减少你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两个值。

列表(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);

Google
 
« 上一篇 下一篇 »
只显示10条记录 相关文章
  1. 关于a:link等伪类的几种写法 [浏览:523, 评论:3]
  2. 【转】图片垂直居中的使用技巧 [浏览:1244, 评论:3]
  3. :before:after这两个伪类到底该怎么用呢? [浏览:1147, 评论:4]
  4. 兼容IE,Firefox的图片自动缩放CSS代码 [浏览:2422, 评论:6]
  5. CSS hack:区分IE6,IE7,firefox [浏览:1791, 评论:2]
  6. 网页标准制作中的两个关于UTF-8编码的问题 [浏览:3234, 评论:9]
  7. [转]Firefox与IE下UL预设标记的异同 [浏览:2276, 评论:1]
  8. 疯子疯子绝对是Html疯子 [浏览:1544, 评论:0]
  9. 一段代码,js替换css的 [浏览:2509, 评论:2]
  10. 把JS与CSS写在同一个文件里 [浏览:2012, 评论:0]
Trackbacks
点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5
2条记录访客评论
收藏先
祝逍遥老鬼圣诞快乐!!!
Post by koo on 2006, 12, 23, 11:32 PM 引用此文发表评论 #1
koo祝祝逍遥老鬼圣诞快乐!!!
Post by koo on 2006, 12, 23, 11:34 PM 引用此文发表评论 #2

发表评论

评论内容(*):