CSS的简写形式合集

50 0

注:| 符号为空格!

font:italic(font-style:字体倾斜样式)|small-caps(font-variant:小型大写字母)|bold(font-weight:字体粗细)|12px(font-size:字体大小)/1.5em(line-height:行高)|arial,verdana(font-family:字体);

例:

完整写法:font:italic small-caps bold 12px/1.5em arial,verdana;

简单写法:font: 12px arial,verdana; [字体大小必须在前面!]

简写形式必须要有font-size和font-family两个属性,其他的可以不写,他们会自动使用默认值,且font-size和line-height同时存在的时候用“/”分隔开!


background: #333(background-color:背景颜色)|url(XXX.JPG)[background-image:背景图片]|no-repeat(background-repeat:重复图像)|fixed(background-attachment:图片是否固定)|0(background-position:图片的位置)/contain(background-size:图片大小)|border-box(background-origin:图片延伸到的范围)|border-box(background-clip:背景图片裁剪的范围);

完整写法:background: #333 url(xxx.jpg) no-repeat fixed 0/contain border-box border-box;

简单写法:

  1. background: #333 url(xxx.jpg) no-repeat fixed 0/cover;
  2. background: #333 url(xxx.jpg) no-repeat;

在设置背景图片位置和大小的时候,中间用“/”符号隔开!


animation:XXX(animation-name:动画名称)|.3s(animation-duration:动画的完成时间)|ease-out(animation-timing-function:动画的缓动效果,和transform的transition一样!)|1s(animation-delay:动画延时开始的时间)|infinite(animation-iteration-count:设置动画的循环次数,直接写次数或者infinite无限次)|alternate(animation-direction:是否应该轮流反向播放动画);

完整写法:animation: xxx .3s ease-in 0s 5 normal;

简单写法:animation: xxx .3s;

0

相关文章

微信收款码
微信收款码