Css3属性简写

2019.10.28
评论

*属性简写常用于多属性时,切勿在单一或者少属性时使用简写属性,如:

//不推荐
padding: 10px 0 0 0;
 
//推荐
padding - top:10px;
 

一.font

*使用时至少含有family和size属性

语法

font: font-style font-variant font-weight font-size/line-height font-family
  • font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜)
  • font-variant (字体变化): normal(正常)、small-caps(小体大写字母)
  • font-weight (字体粗细): 是normal(正常)、bold(加粗)、100-900(数字区间)

列: font: normal normal 300 20px/40px 隶书;


二.padding

语法

padding: top right bottom left;

列: padding: 10px 20px 3px 10px;


三.background

语法

background: color image repeat attachment position/size origin clip;
  • background-color(背景颜色)
  • background-image(背景图片)
  • background-repeat (背景重复)
  • background-attachment(背景固定)
  • background-position(背景定位)
  • background-size(背景尺寸)
  • background-origin(背景框定位)
  • background-clip(背景区域)

列: background: #fff url(aa.jpg) no-repeat fixed center/cover border-box content-box;


四.animation

语法

animation: name duration timing-function delay iteration-count direction;
  • animation-name(动画名称)
  • animation-duration(动画执行时间)
  • animation-timing-function(动画执行速度曲线)
  • animation-delay(动画延时执行时间)
  • animation-iteration-count(动画执行次数)
  • animation-direction(动画是否轮流反向播放)

待续.