当前位置: 首页 > 知识 >正文

常用CSS缩写语法总结

我们在设计css的时候可以使用CSS缩写,这样可以减少你的CSS文件的大小,更容易阅读和查找。

css缩写的主要规则如下:

margin/padding

通常,你会遇到以下三种情况。

margin-top:1px;

margin-right:10px;

margin-bottom:5px;

margin-left:20px;

margin-top:5px;

margin-right:5px;

margin-bottom:5px;

margin-left:5px;

margin-top:0px;

margin-right:10px;

margin-bottom:0px;

margin-left:5px;

然后我们会在CSS缩写后让你目瞪口呆。以下是结果。

margin:1px 10px 5px 20px;

margin:5px;

margin:0 10px 0 5px;

书写顺序是页边距:右上左下,

在CSS中,值为0时可以省略单位,就像第三种写法一样。

填充和边距基本相同。

怎么样?是不是很惊喜?没错,CSS缩写就是这么来的。

border

通常写道:

border-width:1px;

border-style:solid;

border-color:#000;

缩写后:

border:1px solid #000;

书写顺序:边框:宽度边框线型颜色;

Background

通常写道:

background-image:url(bg.png);

background-color:#00f;

background-repeat:no-repeat;

background-position:0 0;

缩写后:

background:url(bg.png) #00f no-repeat 0 0;

书写顺序:背景:背景图片颜色重复类型的位置;

background:image color repeat position;

Font

通常写道:

Font series:' Song Ti;

font-size:2em;

line-height:180%;

font-weight:800;

缩写后:

Font, 800 2em/180%' Song Ti;

书写顺序:字体:粗体字号/行高字体;

使用字体缩写时,至少要有两项:字号和字体。

字体:字号字体;

Color

通常写道:

color:#000000;

color:#001188;

缩写后:

color:#000;

color:#018;

十六进制颜色值,如果每两位数的值相同,可以缩写一位。

相关文章:
  • 6月28日基金净值:华安新兴消费混合A最新净值0.6002,涨0.37%
  • 5月11日基金净值:富国双债增强债券A最新净值1.0807,涨0.04%
  • 4月10日基金净值:广发稳睿六个月持有混合A最新净值1.0112,跌0.33%_基金频道_证券之星
  • 5月30日基金净值:银华内需精选混合(LOF)最新净值2.631,跌0.27%
  • 5月19日基金净值:南方转型增长混合A最新净值1.918,涨0.47%
  • 4月26日基金净值:华商稳定增利债券A最新净值1.767
  • 华夏纳斯达克100ETF(QDII)净值下跌2.13% 请保持关注
  • 5月11日基金净值:兴全恒益债券A最新净值1.316,涨0.11%
  • 5月8日基金净值:博时科创板三年定开混合最新净值0.8494,涨0.41%
  • 南方小康ETF净值上涨1.10% 请保持关注