CSS简化指的是将原本多行的代码精简为一行,也成为网页代码优化。其好处是减小CSS文件大小,提升页面的打开速度,使代码更容易阅读,有利于维护。下面我们来介绍10个常见的CSS简化技巧:
以下原文出自你好站长论坛 http://www.cloudhttp.net/thread-19-1-1.html
1. 边框(border)
边框的属性如下:
- border-width:1px;
- border-style:solid;
- border-color:#000;
我们可以简写成:
- border:1px solid #000;
2. 盒子大小(margin、padding)
margin指的是盒子外边距,padding指的是盒子内边距。两者优化的方法是一样的:
- margin-top:1px;
- margin-right:2px;
- margin-bottom:3px;
- margin-left:4px;
我们可以简写成:
- margin:1px 2px 3px 4px;
3. 字体(font)
字体的属性如下:
- 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;
4. 背景(Backgrounds)
背景的属性如下:
- background-color:#f00;
- background-image:url(background.gif);
- background-repeat:no-repeat;
- background-attachment:fixed;
- background-position:00;
我们可以简写成:
- background:#f00 url(background.gif) no-repeat fixed 0 0;
5. 列表(list)
取消默认的圆点和序号的代码是 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);
6. 省略最后一个分号
一般CSS每行代码最后都会有一个分号:
- #nav{
- border-top:4px solid #333;
- font-style: normal;
- }
省略最后一个分号的简写方式为:
- #nav{
- border-top:4px solid #333;
- font-style: normal
- }