css常用的简写技巧_css background简写css border 简写css font属性简写等

Posted 2020-12-09 ypppt

css样式中有很多简写方式，比如：设置背景，字体，边框，盒子等。我们都可以把css代码合并为一行，这篇文章将总结有哪些属性支持css简写。

 

1、背景background属性 

background-color:#F00;
background-image:url(header_bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;

上面的可以简写为：

background:#F00 url(header_bg.gif) no-repeat fixed left top;

简写的顺序为：background-color | background-image | background-repeat | background-attachment | background-position  

 

2、字体font属性

font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:‘宋体‘,arial,verdana;

上面的可以简写为：  

font:normal small-caps bold 14px/1.5em ‘宋体‘,arial,verdana;

顺序：font-style | font-variant | font-weight | font-size | line-height | font-family（注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。）

  

3、外边距和内边距margin&padding属性

margin-top:4px;
margin-right:0;
margin-bottom:1.5em;
margin-left:-12px;

简写等级于

margin:4px 0 1.5em -12px;

a、当4个值顺序：margin-top | margin-right | margin-bottom | margin-left（注：padding属于的简写和margin完全一样。 ）

b、当为3个值的时候：省略的“左”值等于“右”值,如下：

margin:1px 2px 3px;
/*等价于：margin:1px 2px 3px 2px*/

c、当为2个值的时候：上下2边等于第一个值，左右2边等于第二个值，即省略的“下”值等于“上”。

d、当为1个值的时候：上下左右值都一样。

 

4、边框border属性

border-width:1px;
border-style:solid;
border-color:#CCC;

等价于：

border:1px solid #CCC;

顺序：border-width | border-style | border-color  

 

5、列表样式list-style属性

list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);

等价于

list-style:square outside url(bullet.gif);

顺序：list-style-type | list-style-position | list-style-image  

 

6、颜色color属性

color:#000000;
color:#336699;

等价于：

color:#000;
color:#369;

说明:简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:#010101, #223345, #FFF000

51220网站目录 https://www.51220.cn

7、圆角border-radius属性

border-top-left-radius ：50%；
border-top-right-radius  ：50%；
border-bottom-right-radius：50%；
border-bottom-left-radius：50%；

等价于 

border-radius:50%;

说明：

四个值：分别表示左上角、右上角、右下角、右下角 。
两个值：第一个值表示左上角、右下角；第二个值表示右上角、左下角。 
三个值：第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。
一个值：4个角都一样

 考虑兼容性的写法：

border-radius:50%; 
-moz-border-radius:50%;
-webkit-border-radius:50%;
-o-border-radius:50%;

 

8、过渡transition 属性

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

等介于：

transition:width 1s linear 2s;

考虑兼容性的写法：

transition:width 1s linear 2s;   
-moz-transition:width 1s linear 2s;     
-webkit-transition:width 1s linear 2s;  
-o-transition:width 1s linear 2s;