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

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

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

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

CSS Code复制内容到剪贴板
  1. /* font 各属性与默认值 */  
  2. font-variant: normal;   
  3. line-height: normal;   
  4. font-family: varies;   
  5. font-weight: normal;   
  6. font-style: normal;   
  7. font-size: medium;  

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

CSS Code复制内容到剪贴板
  1. /* 字体各属性前后顺序 */  
  2. font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];  

再看以下几个示例:

CSS Code复制内容到剪贴板
  1. font: 14px Georgia, serif;   
  2. font: 14px/1.4 Georgia, serif;   
  3. font: italic lighter 14px/1.4 Georgia, serif;   
  4. font: italic small-caps lighter 14px/1.4 Georgia, serif;  

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

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

CSS Code复制内容到剪贴板
  1. list-style-type: disc;   
  2. list-style-image: none;   
  3. list-style-position: outside;  

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

CSS Code复制内容到剪贴板
  1. /* list 属性简短写法 */  
  2. list-style: [list-style-type] [list-style-position] [list-style-image];   
  3.   
  4. /* 示例 */  
  5. list-style: none;   
  6. list-style: disc;   
  7. list-style: disc outside;   
  8. list-style: disc outside url(bg.png);  

一如既往的简单,基本上就是简写了 list 属性的名称,然后按顺序排列一下属性的值即可。
background 属性

很多样式表中都会多次定义 background 属性,每次都要重复其 5 个属性的话,那代码量可会成倍的增加呢。下面是其 5 个属性名及其默认值:

CSS Code复制内容到剪贴板
  1. /* background 的各属性及其默认值 */  
  2. background-attachment: scroll;   
  3. background-color: transparent;   
  4. background-position: top left;   
  5. background-repeat: repeat;   
  6. background-image: none;  

根据 W3C 规范,将其 5 个属性合并起来的写法如下:

CSS Code复制内容到剪贴板
  1. /* background 属性简短写法 */  
  2. background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];   
  3.   
  4. /* 示例 */  
  5. background: #777;   
  6. background: url(images/bg.png) 0 0;   
  7. background: #777 url(images/bg.png) repeat-x 0 0;   
  8. background: #777 url(images/bg.png) repeat-x fixed 0 0;  

对于 background 简短写法而言,不同的标签的使用方法和效果都有一些细微差别,欲知详情者,请至官方文档查看。
border 属性

border 属性更为简单,它 3 个属性以及默认值如下:

CSS Code复制内容到剪贴板
  1. /* border 各属性及其默认值 */  
  2. border-width: none;   
  3. border-style: none;   
  4. border-color: none;  

根据 W3C 规范,其简短写法如下:

CSS Code复制内容到剪贴板
  1. /* border 属性简短写法 */  
  2. border: [border-width] [border-style] [border-color];   
  3.   
  4. /* 示例 */  
  5. border: 1px solid #111;   
  6. border: 2px dotted #222;   
  7. border: 3px dashed #333;  

当然也可以为 4 个边框定义不同的样式:

CSS Code复制内容到剪贴板
  1. border-bottom: 1px solid #777;   
  2. border-right:  2px solid #111;   
  3. border-left:   2px solid #111;   
  4. border-top:    1px solid #777;  


CSS 选择器的优先级问题

CSS 意为层叠样式表。所谓层叠,就是说,可以用多个 CSS 声明来作用于同一元素,例如用一段 CSS 来定义文字的颜色,用另外一段 CSS 来定义文字的大小,最终达到样式叠加的效果。

这种特性一定程度上使 CSS 可以更为方便的定义样式,但同时也带来了一定的复杂性。例如,当多个样式作用于同一个元素,而且还是作用于同一个属性,元素最终会以何种方式来呈现样式呢?

参考下面这个例子:

CSS Code复制内容到剪贴板
  1. p {   
  2.  color: black;   
  3.  background-color: white;   
  4. }   
  5. div.warning p {   
  6.  color: red;   
  7. }   
  8. div#caution p {   
  9.  color: yellow;   
  10. }   
  11. body#home div p {   
  12.  color: white;   
  13. }  

此样式表中有 4 组选择器,且最终都指向 p 元素,并且每组样式中都有 color 属性。这样一来,可能的情况就是会有多个颜色属性,被施加于同一个 p 元素。问题来了,浏览器最终会以什么样的方式来渲染 p 的颜色呢?后定义的颜色会覆盖掉先定义的颜色吗?

这里就涉及到一个 CSS 选择器优先级的问题,如果有多个选择器作用于某元素的同一个属性,那么浏览器会去计算其对应选择器的优先级,并最终将优先级最高的那个选择器的样式作用于元素。
如何计算优先级呢?

优先级的计算通常遵循如下规则:

    如果某元素被设置了 style 属性,也就是说被设置了行内样式,那么此行内样式将拥有最高的优先级,任何其它外部样式都不能将其覆盖。如果没有被设置行内样式,那么参照下面的第 2 条规则。
    数一下选择器中 ID 选择器的个数,个数最多的,优先级就最高。如果 ID 选择器个数相同,或者压根儿就没有 ID 选择器,那么参照下面的第 3 条规则。
    数一下类选择器(如 .test)的个数,属性选择器(如 [type="submit"])的个数,还有伪类选择器(如 :hover)的个数,然后将个数加起来,总数最多的,这组选择器的优先级就最高。如果总是一样多,或者都为 0,那么参照下面的第 4 条规则。
    数一下标签选择器(如 p)的个数,另外还有伪元素选择器(如 :first-letter)的个数,加起来,总数最多的,优先级就最高。

如果经过上面的计算,优先级还是一样高,那么遵循后出现的样式覆盖先出现的样式之规则。

现在回过头来看先前的例子,那四组选择器的优先级分别为 0001、0012、0102、0103,之所以把优先级数字化,是因为这样更方便比较。按照自然数法则(事实上它们并非自然数)来比较,1 < 12 < 102 < 103,这样一来,它们的优先级孰高孰低,就一目了然了。

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。