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:width style color;

border:1px solid #000;

 三、背景(Backgrounds)

  背景的属性如下:

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

可以缩写为一句:

语法是background:color image repeat attachment position;

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

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

  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);

  六、颜色(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 0 0;

  八、最后一个分号

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

#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;

可以简写成:

语法 border-radius:topleft topright bottomright bottomleft

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

10个CSS简写/优化技巧的更多相关文章

  1. 10个CSS简写/优化技巧-摘自网友

    10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...

  2. 10个CSS简写及优化技巧

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

  3. 10个CSS简写技巧让你永远受用

    转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的 ...

  4. 10个CSS简写技巧

    CSS简写就是指将多行的CSS属性声明化成一行,又称为css代码优化.CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处.臃肿而杂乱的CSS样式表会使你遇到问题是难以调试.尤其 ...

  5. CSS简写及如何优化技巧

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

  6. 适合PHP学习者的学习路线 10个PHP优化技巧

    适合PHP学习者的学习路线: (1) 熟悉HTML/CSS/JS..网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉 (2) 理解动态语言的概念和运做机制,熟悉基本的PHP语法 (3) ...

  7. (转)网站速度优化技巧:Nginx设置js、css过期时间

    网站速度优化技巧:Nginx设置js.css过期时间 原文:http://www.webkaka.com/blog/archives/Nginx-set-the-expiration-time-for ...

  8. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  9. CSS性能优化的8个技巧

    本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...

随机推荐

  1. ORACLE之PACKAGE

    刚学pl/sql编程,写了两个package.pkg_temp_fn和pkg_temp_fn2.内容涉及pl/sql基本语法,游标,存储过程(in,out),函数(有返回值). pkg_temp_fn ...

  2. New MVC World

    Note: /Controllers:controllers respond to input from the browser,decide what to do with it,and retur ...

  3. Jersey(1.19.1) - JSON Support

    Jersey JSON support comes as a set of JAX-RS MessageBodyReader<T> and MessageBodyWriter<T&g ...

  4. Linux 命令 - ftp: 网络文件传输工具

    命令格式 ftp [-pinegvd] [host] 命令参数 -A 传输文件模式为主动模式. -p 传输文件模式为被动模式. -i 关闭交互模式. -n 关闭自动登录功能. -e 不记录历史命令. ...

  5. Slickflow.NET 开源工作流引擎基础介绍(五) -- 会签加签高级特性介绍

    前言:会签和加签是常见审批流程模式,在引擎中,对这两种流程模式做了分别定义和实现,其中也用到了Workflow Pattern的Multiple Instance(多实例) . 1. 会签和加签的定义 ...

  6. JS定位PDF页码。

    由于项目中的PDF文章段落标题有些是英文,对其翻译后需要定位到具体的页码. 查询相关资料及进行尝试后发现可以用如下方法可以实现 function gotoPage(page) {            ...

  7. Sql server 查询

    --Student(S#,Sname,Sage,Ssex) 学生表 --Course(C#,Cname,T#) 课程表 --SC(S#,C#,score) 成绩表 --Teacher(T#,Tname ...

  8. DOS批处理命令-SET命令

    SET是专门用来创建.设置.查看或删除环境变量. 总结了下,SET的使用语法一般有下面几种 1.SET 变量名=变量值 这边有一点要注意的,就是变量名和变量值中间的等号两端不需要也不能有空格 看看下面 ...

  9. String.IsNullOrWhiteSpace和String.IsNullOrEmpty的区别

    以前刚入行的时候判断字符串的时候用 string a="a"; a==""; a==null; 后来发现了String.IsNullOrEmpty感觉方便了好多 ...

  10. yum的一些用法

    对于配置仓库这里就不做讲解了,这里只是列出比较实用的yum的用法 yum install packagename                #安装软件包 yum remove  packagena ...