CSS属性简写和选择器的优先级问题

几个常用 CSS 属性的简短写法

精简 CSS 代码有很多种方法,但其中最常用的方法可能就是使用属性的简短形式。

具有简短写法的 CSS 属性很多,但是常用的属性无外乎字体、列表、背景、边框、透明等几种,所以在此对这几种属性的简短写法做个归纳,备忘。
font 属性

font 属性涉及到字体、字号、行高等好几个属性,使用简短写法的时候可以节省好多代码量。虽然并非所有属性都要定义,但是一般来说 font-size 和 font-family 是必不可少的,以下是 font 的几个属性与其对应的默认值

  1. /* font 各属性与默认值 */
  2. font-variantnormal;
  3. line-heightnormal;
  4. font-family: varies;
  5. font-weightnormal;
  6. font-stylenormal;
  7. font-sizemedium;

以上 6 个属性可以合并成一行,根据 W3C 规范,各属性前后排列顺序依次为:

  1. /* 字体各属性前后顺序 */
  2. font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

再看以下几个示例:

  1. font14px Georgia, serif;
  2. font14px/1.4 Georgia, serif;
  3. fontitalic lighter 14px/1.4 Georgia, serif;
  4. fontitalic small-caps lighter 14px/1.4 Georgia, serif;

可以看到,一行代码就可以代替一段代码,而且看起来还更优雅一些,就是单独查找某个属性的时候有点不太方便,看着眼花。
list 属性

list 有三个属性,这三个属性分别定义:type、image 和 position,它们的属性名和默认值分别如下:

  1. list-style-typedisc;
  2. list-style-imagenone;
  3. list-style-positionoutside;

只有三个属性,并不复杂,但是我们仍然可以将这三个属性合并为在一行中,根据 W3C 规范,写法如下:

  1. /* list 属性简短写法 */
  2. list-style: [list-style-type] [list-style-position] [list-style-image];
  3. /* 示例 */
  4. list-stylenone;
  5. list-styledisc;
  6. list-styledisc outside;
  7. list-styledisc outside url(bg.png);
© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容