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

站长手记 作者: 2024-08-28 15:50:01
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;

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;

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

margin-top:4px;
margin-right:0;
margin-bottom:1.5em;
margin-left:-12px;
margin:4px 0 1.5em -12px;
margin:1px 2px 3px;
/*等价于:margin:1px 2px 3px 2px*/

4、边框border属性

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

5、列表样式list-style属性

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

6、颜色color属性

color:#000000;
color:#336699;
color:#000;
color:#369;

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;
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70202.html
background属性 css css样式