使用缩写形式,促进CSS代码的精简

css

  一些CSS属性允许使用一串值代替许多属性,值使用空格分开。

  margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。

  所以下面的:

p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

  可以写成:

p {
    border-width: 1px 5px 10px 20px;
}

  border-width,border-color,border-style同样可以合并到一起,例如:

p {
    border: 1px red solid;
}

  (同样可以运用到border-top,border-right等等)
 
  如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。

  字体属性同样可以使用font属性合并。

p {
    font: italic bold 1em/1.5 courier;
}

  (上面"/1.5"是 line-height的值)
 
  把它们总结在一起,试下下面的代码:

p {
    font: 1em/1.5 "Times New Roman", times, serif;
    padding: 3em 1em;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 1em 5em;
}

时间: 2024-11-10 05:32:01

使用缩写形式,促进CSS代码的精简的相关文章

css 缩写: 浅谈css代码的简化缩写

现在很多人所用的CSS代码都很冗赘,其实很多都可以简化缩写的.这次就根据自己所知道的来跟大家谈谈有关CSS代码的简化缩写问题. 1.所有CSS代码只要用一个style标记就可以了,没必要每段都加一个,简直是多余.例如: body{background:url("") repeat fixed!important;} .bodybg{background:url("") no repeat no scroll!important;} 可以简化合并为: body{bac

CSS代码缩写精简实例

一些CSS属性允许使用一串值代替许多属性,值使用空格分开. margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序. 所以下面的代码: p { border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px

网页标准化:CSS代码缩写精简实例

一些CSS属性允许使用一串值代替许多属性,值使用空格分开. margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序. 所以下面的代码: p { border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px

高效整洁CSS代码

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:   1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注意的是,请不要使用全局Reset: *{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距.在此

CSS代码缩写技巧

css|技巧 Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web

CSS代码缩写技巧_CSS/HTML

Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑

高效整洁CSS代码原则

核心提示:CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则 CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注意的是,请

编写出色CSS代码的13个建议

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注意的是,请不要使用全局Reset: *{ margin:0; padding:0; }  这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距.在此建

一行CSS代码就可以把IE6彻底制服

刚刚登甲发来一个文章,看到只要一行代码,就可以把IE6弄死. <style>*{position:relative}</style><table><input></table> 如果你现在用的是IE6你可以试一下.点击下边的运行代码按钮; 如果点了后没有死, 让说明你的IE不是6; 方法一: <!--Easy IE Crash by Hamachiya2 (http://www.ddvip.com/junk/ie_crash.html)--