Day: July 7, 2016

你应该知道的一些事情——CSS权重

本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know,以及作者相关信息 作者:Vitaly Friedman 译者:99 除了浮动之 外,css权重问题是你要了解的,最复杂的一个概念之一。css每条规则权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。为了 减少调试bug的时间,你需要了解浏览器是怎样解析你的代码的。为了完成这个目标,你需要对权重是如何工作的,有一个清楚的认识。很多Css出现问题的场 景,都是某处定义了一个更高权重的规则,导致此处规则不生效。 Css权重问题并不简单,而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题,我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨论关于css权重的主要问题,包括例子,规则,原理,通用解决方案以及一些资源。 CSS权重:概述 权重决定了哪一条规则会被浏览器应用在元素上。 权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。 权重的级别划分时包含了所有的css选择器 如果两个选择器作用在同一元素上,则权重高者生效。 权重的级别根据选择器被划分为四个分类:行内样式,id,类与属性,以及元素。 你可以通过CSS权重之争进一步了解CSS权重。 你也可以通过CSS Specificity for Poker Players进一步了解CSS权重。 如果两个选择器权重值相同,则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大,会取代前面的CSS规则) 如果两个选择器权重值不同,则权重大的规则被计算到权重中 如果一条规则包含了更高权重的选择器,那么这个规则权重更高 最后定义的规则会覆盖所有跟前面冲突的规则 内联样式表含有比别的规则更高的权重 Id选择器的权重比属性选择器更高 你可以使用id来增大权重 类选择器比任意数量的元素选择器都高 通配符选择器跟继承来的样式,他们的权重以 0,0,0,0来计算 你可以用css权重计算器来计算权重。… Read More

CSS语法和CSS优先级

语法 层叠样式表( Cascading Stylesheet ,简称CSS ), 其基本目标是让浏览器以指定的特性去绘制页面元素,比如颜色,定位,装饰。CSS的语法反映了这个目标,由下面两个部分构建: 属性( property)是一个标识符,用可读的名称来表示其特性。 值(value)则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合,它有正式的语法和语义定义,被浏览器引擎实现。 CSS 声明 CSS的核心功能是将CSS属性设定为特定的值。一个属性与值的键值对被称为”声明“(declaration) 。CSS引擎会计算页面上每个元素都有哪些声明,并且会根据结果绘制元素,排布样式。 在CSS中,属性和值对大小写都是敏感的。属性与值之间以英文冒号 ‘:’ (U+003A COLON)隔开。属性与值前面、后面与两者之间的空白不是必需的,会被自动忽略。 目前CSS中有 100 多个属性 , 并且几乎有无限多个不同的值。并非所有的属性与值的配对都是被允许的, 每个属性都定义了它的合法值。如果值对给定的属性而言非法时,声明就会被视为无效的,整个声明就会被CSS引擎忽略。 CSS 声明块 声明会按照块的形式被组合。声明块(declaration block)以英文左大括号(‘{‘ U+007B LEFT CURLY BRACKET)开始,以英文右大括号 ‘}’ (U+007D RIGHT CURLY BRACKET)结束。块有时会嵌套,所以开始与结束大括号必须要匹配。 声明块里面的声明之间使用英文分号(’;’  U+003B SEMICOLON)隔开。声明块可能为空,也就是包含空的声明。声明之间的空格会被忽略,声明块里最后一个声明可以不用分号,不过建议加上,以方便扩展声明块。… Read More