常用CSS样式缩写语法

Xiaomo

分类: 前端探索 911 13

缩写CSS样式的好处:

对于浏览者而言,缩写可以减少CSS代码量,进而减少CSS文件体积,有利于访问者更快的打开网页;对于开发者而言,CSS代码量少,阅读简洁明了;对于网站服务器而言,在相同带宽下可以承受更多的访问请求。

常用CSS样式表缩写语法总结

盒尺寸(padding、margin)
常见margin与padding边距缩写margin外边距与padding内边距是制作布局时常用到的两个属性,在传统写法上,我们通常使用以下形式:

.box{
   width:300px;
   height: 300px;
   background: #eee;
   margin-left: 20px;
   margin-right: 30px;
   margin-top: 40px;
   margin-bottom: 50px;
}

padding也是如此,而在css缩写中,可以使用缩写的编写方式,margin及padding的缩写在默认状态下需要提供4个参数,按顺序分别为上、右、下、左。例:

.box{
   width:300px;
   height: 300px;
   background: #eee;
   /*外边距连写*/
   margin:20px 30px 40px 50px;
}

注意:margin及padding的缩写比较特殊一点,方便的记忆方法是顺时针,上右下左。
通常有下面四种书写方法(这里拿margin做例子):

/*顺序*/
/*从上开始,顺时针转;margin:上 右 下 左*/
/*上下左右都相等: margin: 5px(上下左右)*/
margin: 5px;
/*上下相等, 左右相等: margin: 5px(上下) 15px(左右)*/
margin: 5px 15px 5px 15px;
/*上下不等,左右相等: margin: 5px(上) 10px(左右) 20px(下)*/
margin: 5px 10px 20px 10px
/*上下左右都不相等: margin: 20px(上)   30px(右)   40px(下)  50px(左)*/
Margin: 20px  30px   40px  50px;



边框(border)
border边框缩写border对象本身是一个非常复杂的对象,包含了四条边的不同宽度、不同颜色及不同样式,所以border对象提供的缩写形式相对来说也要丰富很多,不仅可以对整个对象进行border缩写,也可以对单独某一个边进行缩写,
对于整个对象而言,可以使用如下的格式进行缩写:

border:border-width border-style border-color 

代码示例:

.box{border:5px solid red;}

通过上面的属性,我们就可以把样式针对整个对象或者每一个边都设置不同的样式


.box{
   width: 300px;
   height: 390px;
   background: #999;
   border-top-style: solid;   /*线型*/
   border-top-color: #ff0000;     /*边框颜色*/
   border-top-width: 5px;   /*宽度*/ 
   /*边框属性连写*/
   border-top: #ff0000 solid 5px;   
   /*四个边框值相同的写法*/
   border:12px solid red;    
   /*单独边框并且设置不同的样式*/ 
   border-top: red solid 5px; 
   border-right: 12px dotted #ffc0cb;
   border-buttom: 12px dotted #191970;
   border-left: 5px dashed #00ffff;
}

注意:border缩写样式没有顺序要求,但线型(border-style)为必写项。


除了对于边框整体及4个边单独的缩写之外,border还为我们提供了对于
border-style、border-width以及border-color的单独缩写方式,语法格式如下:

border-width:top right bottom left;
border-color:top right bottom left; 
border-style:top right bottom left; 

代码示例:

.box{
   border-width:1px 2px 3px 4px;
   border-color:blue white red green; 
   border-style:solid dashed; 
}



背景(Background)
背景的属性如下:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;


背景缩写用于针对背景控制的相关属性进行缩写,其语法格式如下:
background:background-color background-image background-repeat background-attachment background-position
根据以上语法,可以缩写为一句:

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

注意:background属性连写的时候没有顺序要求,但url为必写项。


color颜色缩写css对于颜色代码也提供了简单的缩写模式,主要针对16进制颜色代码。
16进制代码传统写法一般使用#ABCDEF,ABCDEF分别代表6个 16进制数,css的颜色缩写必须符合一定要求,
当A与B数字相同,C与D数字相同,E与F数字相同时,可以使用颜色缩写,
例:


p{color:#ffffff;}
/* 可以缩写为*/
p{color:#fff;}
p{color:#2255bb;}
/* 可以缩写为*/
p{color:#25b;} 



字体(fonts)
字体的属性如下:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;


font字体缩写字体缩写是针对字体样式的缩写形式,包含字体、字号等属性,使用方法如下:

font:font-style font-variant font-weight font-size line-height font-family 

根据以上语法,可以缩写为一句:

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意:font:后边写属性的值。一定按照书写顺序。文本属性连写文字大小(font-size)和字体(font-family)为必写项。


列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:circle;
list-style-position:inside;
list-style-image:url(image.gif);


list列表缩写list缩写是针对list-style-type、list-style-position等用于ul的list属性,
语法格式如下:

list-style:list-style-type list-style-position list-style-image 

代码示例:
根据以上语法,可以缩写为一句

ul {list-style:disc outside none;} 



这里顺便提一句,有很多样式都涉及到了四边的问题,这里统一说明。
四边的简写一般如下:selector {property: value}
value:top | right | bottom | left

具体可以参考上面的marginborder属性!(←这里的marginborder属性可以点击噢(〃’▽’〃))


最后,偷偷告诉大家,学好css最需求的就是多看多写多实践,
那样才能学的好,记得住。٩(๑❛︶❛๑)۶

  • 5人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
css、样式缩写

作者简介:Xiaomo

学无止境,生命不息,折腾不止!

共 13 条评论关于 “常用CSS样式缩写语法”

Loading...