10个CSS简写及优化技巧

   CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。

  下面介绍常见的CSS简写规则:

  一、盒子大小

  这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距:

  margin-top:1px;

  margin-right:2px;

  margin-bottom:3px;

  margin-left:4px;

  你可以简写成:

  margin:1px 2px 3px 4px;

  语法 margin:top right bottom left;

  //四个方向的边距相同,等同于margin:1px 1px 1px 1px;

  margin:1px;

  //上下边距都为1px,左右边距均为2px,等同于margin:1px 2px 1px 2px;

  margin:1px 2px;

  //右边距和左边距相同,等同于margin:1px 2px 3px 2px;

  margin:1px 2px 3px;

  //注意,这里虽然上下边距都为1px,但是这里不能缩写。

  margin:1px 2px 1px 3px;

  二、边框(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-po sition:00;

  可以缩写为一句:

  background:#f00 url(background.gif) no-repeat fixed 0 0;

  语法是background:color image repeat attachment po sition;

  你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  color: transparent

  image: none

  repeat: repeat

  attachment: scroll

  po sition: 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-po sition:inside;

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

  可以缩写为一句:

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

  六、颜色(Color)

  16进制的色彩值,如果每两位的值相同,可以缩写一半。例如:

  Aqua: #00ffff ——#0ff

  Black: #000000 ——#000

  Blue: #0000ff ——#00f

  Dark Grey: #666666 ——#666

  Fuchsia:#ff00ff ——#f0f

  Light Grey: #cccccc ——#ccc

  Lime: #00ff00 ——#0f0

  Orange: #ff6600 ——#f60

  Red: #ff0000 ——#f00

  White: #ffffff ——#fff

  Yellow: #ffff00 ——#ff0

  七、属性值为0

  书写原则是如果CSS属性值为0,那么你不必为其添加单位(如:px/em),你可能会这样写:

  padding:10px 5px 0px 0px;

  试试这样吧:

  padding:10px 5px 00 ;

  八、最后一个分号

  最后一个属性值后面分号可以不写,如:

  #nav{

  border-top:4px solid #333;

  font-style: normal;

  font-variant:normal;

  font-weight: normal;

  }

  可以简写成:

  #nav{

  border-top:4px solid #333;

  font-style: normal;

  font-variant:normal;

  font-weight: normal

  }

  九、字体粗细(font-weight)

  你可能会这样写:

  h1{

  font-weight:bold;

  }

  p{

  font-weight:normal;

  }

  可以简写成:

  h1{

  font-weight:700;

  }

  p{

  font-weight:400;

  }

  十、圆角半径(border-radius)

  border-radius是css3中新加入的属性,用来实现圆角边框。

  -moz-border-radius-bottomleft:6px;

  -moz-border-radius-topleft:6px;

  -moz-border-radius-topright:6px;

  -webkit-border-bottom-left-radius:6px;

  -webkit-border-top-left-radius:6px;

  -webkit-border-top-right-radius:6px;

  border-bottom-left-radius:6px;

  border-top-left-radius:6px;

  border-top-right-radius:6px;

  可以简写成:

  -moz-border-radius:0 6px 6px;

  -webkit-border-radius:0 6px 6px;

  border-radius:0 6px 6px;

  语法 border-radius:topleft topright bottomright bottomleft

时间: 2024-08-31 07:51:58

10个CSS简写及优化技巧的相关文章

CSS常用优化技巧

一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 三.区分大小写 当在XHTML

Web性能优化系列 10个提升JavaScript性能的技巧_javascript技巧

Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程.他是<高性能 Javascript>的作者,这本书值得每个程序员去阅读. 当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为<Speed Up Your Javascript>的演讲. 但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码. 1. 定义局部变量 当

常用的10种CSS BUG解决方法与技巧

最常用的10种CSS BUG解决方法与技巧-浏览器兼容教程 CSS bug是布局中最头疼的问题.我们需要兼顾各种浏览器,以期待获得一致的效果. 非常遗憾的是各厂商之间的竞争导致很多问题的存在.而IE6与IE7在很多问题上也存在着很大的差别. 轻松的解决CSS bug是我们必须掌握的技能.现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧. 希望对您的学习.工作有所帮助,如果您依然有疑问, 一. 针对浏览器的选择器 这些选择器在你需要针对某款浏览器进行css设计时将非常有用

让CSS样式表优化更整洁而简短

  CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益 处.臃肿而杂乱的CSS样式表会使你遇到问题是难以调试.尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降. 今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS,使得代码过 于臃肿.不过没关系,看过本文之后,你一能能掌握CSS代码优化的

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上下文.解析.编译.执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识.   什么是高性能的 JavaScript 代码? 尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型,可以用作参考:RAIL模型. 响应 如果你的应用程序能

详解CSS的规范及技巧

CSS在网页设计中经常使用,有很多朋友还是会写CSS,但是写出来的都不规范,不需要的css样式,可以简介的样式很多很多.     本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充. 一.使用css缩写     使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就

jQuery性能优化技巧分析

 这篇文章主要介绍了jQuery性能优化技巧,较为详细的分析了jQuery的常见使用技巧,非常具有实用价值,需要的朋友可以参考下     本文较为详细分析了jQuery性能优化技巧.分享给大家供大家参考.具体分析如下: 一.使用最新版本的jQuery类库 jQuery新版本会较上个版本进行Bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的. 二.使用合适的选择器 jQuery选择器性能最佳到最差方式如下: id选择器,如$('#id', c

做SEO不得不知的优化技巧

随着百度对竞价排名位置的大幅减少,不少中小企业由于实力不足,失去了在首页展示的机会,转而把眼光转向SEO优化上,希望借助此渠道能将自己的网站在首页上有更好的展示.本文将系统阐述SEO优化原理.优化技巧和优化流程. 搜索引擎的优化原理是蜘蛛过来抓取网页,并放进索引库,之后搜索引擎分析用户搜索意图,然后将符合条件的网页按排名展示给用户.其中,蜘蛛的抓取和放进索引库称为收录,只有网页被收录了才有可能被展示,如果蜘蛛过来抓取但是没有收录,那么网页是没有展示的.   首先,做SEO必须要具备的一些工具如站

英文谷歌游戏站单页面优化技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 福州seo研究院的飞飞seo最近在做英文谷歌游戏站单页优化,做单页优化就是要注重细节,每一个细节也许就是决定排名的重要因素,飞飞seo整理了下优化思路供大家参考 1. 页面结构优化 单页面一般使用DIV+CSS来布局的简单静态页面,代码越精简越好,结构明了. 2.关键词布局及密度 蜘蛛爬行的规律是从左到右从上往下,所以我们关键词布局要根据蜘蛛