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-position:00;

可以缩写为一句:

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

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

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简写/优化技巧

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

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

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

  5. 10个CSS简写技巧

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

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

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

  7. CSS优化技巧

    CSS是页面效果呈现中非常重要的组成部分,它包括颜色.大小尺寸.背景和字体等.写CSS很简单很容易,但是要想写出精炼的CSS代码还是有很多技巧的. 下面就是技巧7则: . 合并多个相同属性: 比如很多 ...

  8. JavaScript 性能优化技巧分享

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...

  9. SEO优化技巧总结

    SEO优化技巧总结 一:了解搜索引擎 基础知识 搜索引擎:由蜘蛛程序沿着链接爬行和抓取网上的大量页面,存进数据库,经过预处理,用户在搜索框 输入关键词后,搜索引擎排序从数据库中挑选出符合搜索关键词要求 ...

随机推荐

  1. uva 12096 The SetStack Computer

    点击打开链接uva 12096 思路: STL模拟 分析: 1 题目给定5种操作,每次输出栈顶集合的元素的个数 2 利用stack和set来模拟,set保存集合的元素.遇到push的时候直接在stac ...

  2. myecplise 打开报错 Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'myf'. Java.lang.NullPointerException

    Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'myf'.Java.l ...

  3. 收藏一部山地车教学视频,Fabien Barel主讲及动作示范

    视频是由曾多次获得UCI速降赛的冠军车手Fabien Barel主讲及动作示范,讲解山地车越野的装备以及基本动作.视频中的要点说明我已经手录为文本,如果视频中没有看清的地方,也可以看文字. 骑行装备 ...

  4. IOS 使用webview 显示 doc/docx/xls/pdf等

    在一款项目里添加阅读各种文档功能 那么对在线的文档或者是下载后的文档 进行阅读,比如 doc/docx/xls/pdf等文件 有两种方法总结如下: 1. - (void)viewDidLoad { [ ...

  5. 【Android 界面效果38】android:inputType常用取值

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content&q ...

  6. 【网络编程】之十二、wsaeventselect+线程池 服务器实现

    #include<WinSock2.h> #include<iostream> using namespace std; #pragma comment(lib, " ...

  7. cxGrid使用汇总1

    这些都不是原创,只是平时收集到资料然后整理的,有些可能百度一下到处都是而且还大同小异也有些不是很好找,现在贴出来希望给那些用到cxGrid的人会有所帮助 1. 去掉cxGrid中台头的Box 解决:在 ...

  8. [转]如何烧录tizen镜像文件?(图文教程)

    http://blog.csdn.net/flydream0/article/details/9179143 上一篇文章我已讲过如何制作镜像文件(http://blog.csdn.net/flydre ...

  9. python15-day1课堂随机

    print("Hello world") #变量定义:一个在内存储存数据的容器#意义:为什么有变量,因为它保存程序执行的中间结果或状态以供后面的低吗进行调用 day1 = 200+ ...

  10. PHP插件技术-插件钩子(hooks)分析

    最近准备做一个开源的个人博客系统,因为在构想中要添加插件功能,所以就研究了一下插件功能的实现方法. 插件的功能按照本人自己的理解就是对已有的程序进行功能方面的添加以及改进,插件要与程序所提供的接口进行 ...