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

更新日期: 2018-01-19阅读: 2.5k标签: css技巧

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


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;


链接: https://www.fly63.com/article/detial/375

20 个 CSS高级样式技巧汇总

使用技巧会让人变的越来越懒,没错,我就是想让你变懒。下面是我收集的CSS高级技巧,希望你懒出境界。黑白图像、使用:not()在菜单上应用/取消应用边框、页面顶部阴影、逗号分隔的列表、使用负的 nth-child 选择项目、对图标使用 SVG....

分享几个CSS技巧

分享几个CSS技巧包括:创建剪切动画、优化动画性能、实现长宽比、垂直居中等

你应该知道的简单易用的CSS技巧

作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于CSS的技巧,希望对你能有帮助。每个单词的首字母大写一般我们会用JS实现,其实CSS就可以实现。

三个非常棒的CSS技巧,完全在项目中代替Js

本文介绍三个非常棒棒的CSS技巧,完全可以在你的项目中代替JavaScript,一起来看看这些技巧吧。:active伪类与CSS数据上报、超实用超高频使用的:empty伪类、用好:only-child伪类

前端开发需要知道的 10 个CSS技巧

个人觉得 CSS 是每个前端开发人员都必须掌握的基础,以完成相应的交互和终端设备的响应。在项目开发中,有些容易被忽略的小问题带来项目后期的胶水代码。本文总结一些项目开发中CSS的10个小技巧。

100 个鲜为人知的 CSS 技巧汇总整理合集

金三银四找工作的旺季来了,在过去的一段时间里,我花了很多时间将之前的一些基础知识做了整理,希望这些内容能够帮助你在面试的时候,稍微顺利一些。因此,我将整理好的这 100 个 CSS 知识技巧分享给你

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!