10个CSS简写技巧让你的工作效率大大提高

| 2018-02-08 17:15:44

CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。


1、属性值为0


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

padding: 10px 5px 0px 0px;


试试这样吧:


padding: 10px 5px 0 0;


2、外边距(margin)


margin-top

margin-right

margin-bottom

margin-left

简写顺序为顺时针方向(上、右、下、左),如:margin: 1px 2px 3px 4px;


其中四边都相等时可简写为一个,如:margin: 1px;


当上下、左右分别相等时,也可简写,如:margin: 1px 2px; 代表上下1px,左右2px


只有左右相等时,可简写为:margin: 1px 2px 3px;


但只有上下相等时不可简写。


3、内边距(padding)


padding-top

padding-right

padding-bottom

padding-left

例:


复制代码

h1 {

  padding-top: 10px;

  padding-right: 0.25em;

  padding-bottom: 2ex;

  padding-left: 20%;

  }

复制代码

规则与外边距相同,在此就不细说了。


4、移除选择器


选择器是你在为一些元素应用CSS样式时的基本方法,比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。


div#logowrap

尝试扔掉多余的选择器吧:


#logowrap

在这个例子中所谓的那个选择器就是div


5、边框(border)


边框的属性如下:


border-width:1px;

border-style:solid;

border-color:#000;

可以缩写为一句:

border:1px solid #000;

语法 border:width style color;


6、背景


背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数,你可能会写成:


background-image: url(“logo.png”);

background-position: top center;

background-repeat: no-repeat;

其实可以写成:


background: url(logo.png) no-repeat top center;


7、字体(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两个值。


8、列表


取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square;

list-style-position:inside;

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

可以写成:


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


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


10、圆角半径(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:6px 6px 0;

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

border-radius:6px 6px 0;

语法 border-radius:topleft topright bottomright bottomleft


文 / 网盛    阅:88

免费获取网站建设与品牌策划方案报价

在线预约享受建站8

  • 公司名称
  • 手机号码
  • 网站类型
  • 所在城市
  • 联系人
  • 需求

在线
客服

在线客服服务时间:9:00-17:00

客服
热线

0571-88228136
- 024-83959235
建站服务热线

关注
微信

关注官方微信
顶部