css 单位简单介绍_html/css_WEB-ITnose
本来在写css3 attr介绍 逐渐发现css单位需要好好介绍下
本文不是w3c翻译 保留原文的基础上 做出自己的理解为主
参考 http://www.w3.org/TR/2015/CR-css-values-3-20150611/
Abstract
This CSS3 module describes the common values and units that CSS properties > accept and the syntax used for describing them in CSSproperty definitions.
CSS is a language for describing the rendering of structured documents
(such as HTML and XML) on screen, on paper, in speech, etc.
摘要
这个css3模块描述了css属性的常用值和单位和在css属性定义时使用它们的语法。
css是一种用于描述结构化文档（如 HTML 和 xml）的呈现语言，常见于在屏幕上,在纸上,演讲等。
Introduction The value definition field of each CSS property can contain keywords,
data types (which appear between ), and information on how they
can be combined. Generic data types ( being the most widely
used) that can be used by many properties are described in this
specification, while more specific data types (e.g., )
are described in the corresponding modules.
每个css属性可以包括keywords, data types(出现在中间)，它们如何组合。通用数据类型（被最广泛使用）被最多属性描述 而其他一些更为特定的数据类型(如)描述了相应的模块。
1.1. Module Interactions
This module replaces and extends the data type definitions in [CSS21]
sections 1.4.2.1, 4.3, and A.2.
模块的交互
这个模块取代[css21]的相关章节
Value Definition Syntax The syntax described here is used to define the set of valid values
for CSS properties. A property value can have one or more components.
值定义语法
这里描述的语法用于定义一组有效值的CSS属性。属性值可以有一个或多个组件
2.1. Component value types
Component value types are designated in several ways:
without quotes (e.g. auto)
, etc.).
same name (e.g., , , etc.).
In this case, the type name is the property name (complete with
quotes) between the brackets. Such a type does not include CSS-wide
keywords such as inherit.
case, the non-terminal name appears between , as in
. Notice the distinction between and
: the latter is defined as the value of the
border-width property, the former requires an explicit expansion
elsewhere. The definition of a non-terminal is typically located
near its first appearance in the specification.
组件值类型
组件值类型指定的在几个方面
Some property value definitions also include the slash (/), the comma
(,), and/or parentheses as literals. These represent their
corresponding tokens. Other non-keyword literal characters that may
appear in a component value, such as “+”, must be written enclosed in
single quotes.
一些属性值定义也包括 (/) 逗号 (,)
Commas specified in the grammar are implicitly omittable in some circumstances, when used to separate optional terms in the grammar. Within a top-level list in a property or other CSS value, or a function’s argument list, a comma specified in the grammar must be omitted if:
For example, if a function can accept three arguments in order, but
all of them are optional, the grammar can be written like:
example(first? , second? , third? )
如果一个函数需要三个参数，可以写成这样
example(first? , second? , third? )
Given this grammar, writing example(first, second, third) is valid, as
is example(first, second) or example(first, third) or example(second).
However, example(first, , third) is invalid, as one of those commas
are no longer separating two options; similarly, example(,second) and
example(first,) are invalid. example(first second) is also invalid, as
commas are still required to actually separate the options.If commas were not implicitly omittable, the grammar would have to be
much more complicated to properly express the ways that the arguments
can be omitted, greatly obscuring the simplicity of the feature.
正确的
example(first, second) or example(first, third) or example(second)
错误的
example(first, , third) is invalid, example(,second) and example(first,)
All CSS properties also accept the CSS-wide keyword values as the sole
component of their property value. For readability these are not
listed explicitly in the property value syntax definitions. For
example, the full value definition of border-color is {1,4} |
inherit | initial | unset (even though it is listed as {1,4}).
所有属性也接受css-wide关键词值作为组件的属性。为了便于阅读 这些都不是明确列出的属性值语法定义。
比如 border-color 的值定义是 {1,4} | inherit | initial | unset
2.2. Component value combinators
Component values can be arranged into property values as follows:
Juxtaposing components means that all of them must occur, in the
given order.A double ampersand (&&) separates two or more components, all of
which must occur, in any order.A double bar (||) separates two or more options: one or more of them
must occur, in any order.A bar (|) separates two or more alternatives: exactly one of them
must occur.Brackets ([ ]) are for grouping.
组件值被安排到组件值必须遵循
所有组件遵循顺序
&& 分离两个或多个组件
|| 分离两个或多个options
| 分离两个或多个替代选择
[] 分组
Juxtaposition is stronger than the double ampersand, the double
ampersand is stronger than the double bar, and the double bar is
stronger than the bar. Thus, the following lines are equivalent:a b | c || d && e f
[ a b ] | [ c || [ d && [ e f ]]]
并列（e f） > && > || > |
For re-orderable combinators (||, &&), ordering of the grammar does
not matter: components in the same grouping may be interleaved in any
order. Thus, the following lines are equivalent:a || b || c
b || a || c
|| && 中的内容顺序并不重要
2.3. Component value multipliers
Every type, keyword, or bracketed group may be followed by one of the
following modifiers:An asterisk (*) indicates that the preceding type, word, or group
occurs zero or more times.A plus (+) indicates that the preceding type, word, or group occurs
one or more times.A question mark (?) indicates that the preceding type, word, or
group is optional (occurs zero or one times).A single number in curly braces ({A}) indicates that the preceding
type, word, or group occurs A times.A comma-separated pair of numbers in curly braces ({A,B}) indicates
that the preceding type, word, or group occurs at least A and at
most B times. The B may be omitted ({A,}) to indicate that there
must be at least A repetitions, with no upper bound on the number of
repetitions.A hash mark (#) indicates that the preceding type, word, or group
occurs one or more times, separated by comma tokens (which may
optionally be surrounded by white space and/or comments). It may
optionally be followed by the curly brace forms, above, to indicate
precisely how many times the repetition occurs, like #{1,4}.An exclamation point (!) after a group indicates that the group is
required and must produce at least one value; even if the grammar of
the items within the group would otherwise allow the entire contents
to be omitted, at least one component value must not be omitted.For repeated component values (indicated by *, +, or #), UAs must
support at least 20 repetitions of the component. If a property value
contains more than the supported number of repetitions, the
declaration must be ignored as if it were invalid.
每一类型、关键字或相等的组可能是紧随其后的是一个修饰符
花括号带数字({,B})表明前面的type,word,或group出现1到B次
感叹号(!),一组表明,集团要求必须至少产生一个值,即使语法组内的物品会让整个内容省略,至少一个组件值不能省略。
2.4. Combinator and Multiplier Patterns
There are a small set of common ways to combine multiple independent
component values in particular numbers and orders. In particular, it’s
common to want to express that, from a set of component value, the
author must select zero or more, one or more, or all of them, and in
either the order specified in the grammar or in any order.All of these can be easily expressed using simple patterns of
combinators and multipliers:
Note that all of the "any
order" possibilities are expressed using combinators, while the "in
order" possibilities are all variants on juxtaposition.
一个属性值可能有多个组件组成
2.5. Component values and white space
Unless otherwise specified, white space and/or comments may appear
before, after, and/or between components combined using the above
combinators and multipliers.
以上就是一些w3c对文档 还有属性的一些基本定义
2.6. Property value examples
Below are some examples of properties with their corresponding value definition fields
现在对图中一些提出解释
- 'orphans' 定义是 就可以设置为3
- 'text-align' 定义是 left 或 right 或 center 或 justify 就可以设置为'center'
- 'padding-top' 定义是 | 就可以设置为'5%'
- 'outline-color' 定义是 | invert 就可以设置为'#fefefe'
- 'text-decoration' 定义是 none | (underline || overline || line-through
|| blink) ||的表示这个属性可以同时放一个或多个 就可以设置为'overline underline' - 'font-family' 定义是[ | ]# 这个表示这是一个组合值 有点像list 至少要写一个 可以写多个 就可以设置为'"Gill Sans", Futura, sans-serif'
- 'border-width' 定义是[ | thick | medium | thin]{1,4} 这个表示那你可以写1到4次 每次可以使用或者thick或者medium或者thin 就可以设置为'2px medium 4px'
- 'text-shadow' 定义是[inset? [{2,4} && ?]]# | none
这个表示text-shadow可以有几组 inset带问号表示可写可不写 后面表示可以写2到4种颜色 颜色可选 就可以 '3px 3px rgba(50,50,50, .5), inset 3px 0px 1px 2px #092302'
3.1. Pre-defined Keywords
In the value definition fields, keywords with a pre-defined meaning
appear literally. Keywords are CSS identifiers and are interpreted
ASCII case-insensitively (i.e., [a-z] and [A-Z] are equivalent).For example, here is the value definition for the border-collapse
property:
Value: collapse | separate
And here is an example of its
use:
table { border-collapse: separate }
预定义关键字 是预留的有意义的关键字 不区分大小写
3.1.1. CSS-wide keywords: initial, inherit and unset
As defined above, all properties accept the CSS-wide keywords, which
represent value computations common to all CSS properties.The initial keyword represents the value specified as the property’s
initial value. The inherit keyword represents the computed value of
the property on the element’s parent. The unset keyword acts as either
inherit or initial, depending on whether the property is inherited or
not. All of these keywords are normatively defined in the Cascade
module. [CSS3CASCADE]Other CSS specifications can define additional CSS-wide keywords.
css比较广泛可以使用的关键字有 initial, inherit, unset
initial 设置为初始值
inherit 表现父元素计算后样式
unset 表现和initial和inherit类似
3.2. Author-defined Identifiers: the type
Some properties accept arbitrary author-defined identifiers as a
component value. This generic data type is denoted by ,
and represents any valid CSS identifier that would not be
misinterpreted as a pre-defined keyword in that property’s value
definition. Such identifiers are fully case-sensitive, even in the
ASCII range (e.g. example and EXAMPLE are two different, unrelated
user-defined identifiers).
就是自定义标示符 不清楚什么用 有一个链接
关于的一些解释
The CSS-wide keywords are not valid s. The default
keyword is reserved and is also not a valid .
Specifications using must specify clearly what other
keywords are excluded from , if any?for example by
saying that any pre-defined keywords in that property’s value
definition are excluded. Excluded keywords are excluded in all ASCII
case permutations.When parsing positionally-ambiguous keywords in a property value, a
production can only claim the keyword if no other
unfulfilled production can claim it.
不能使用css默认关键字
For example, the shorthand declaration animation: ease-in ease-out is
equivalent to the longhand declarations animation-timing-function:
ease-in; animation-name: ease-out;. ease-in is claimed by the
production belonging to
animation-timing-function, leaving ease-out to be claimed by the
production belonging to animation-name.
官方的例子有点难懂 custom-ident在自定义动画用到
/* @keyframes name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state */ animation: slidein 3s ease-in 1s 2 reverse both paused;
slidein就是啦
3.3. Quoted Strings: the type
Strings are denoted by and consist of a sequence of
characters delimited by double quotes or single quotes. They
correspond to the production in the CSS Syntax Module
[CSS3SYN].Double quotes cannot occur inside double quotes, unless escaped (as
"\"" or as "\22"). Analogously for single quotes ('\'' or '\27').
content: "this is a 'string'.";
content: "this is a \"string\".";
content: 'this is a "string".';
content: 'this is a \'string\'.'
引用字符串:类型
css 都是字符串啦 不过css string类型是用单引号 或 双引号括起来的内容
It is possible to break strings over several lines, for aesthetic or
other reasons, but in such a case the newline itself has to be escaped
with a backslash (). The newline is subsequently removed from the
string. For instance, the following two selectors are exactly the
same:a[title="a not s\
o very long title"] {/.../}
a[title="a not so very long title"] {/.../}Since a string cannot directly represent a newline, to include a newline > in a string, use > the escape "\A". (Hexadecimal A is the line feed
character in Unicode (U+000A), but represents the generic notion of
"newline" in CSS.)
string 如果碰到换行使用\
还有一种情况 html中某段属性换行了需要使用\A模拟换行
\A模拟换行 codepen地址
3.4. Resource Locators: the type
A URL is a pointer to a resource and is a functional notation denoted
by . The syntax of a is:= url( * )
Below is an example of a URL
being used as a background image:
body { background: url("http://www.example.com/pinkish.gif") }
是有 url( *) 组成的 可以为零次或多次
In addition to the syntax defined above, a can sometimes be
written in other ways:For legacy reasons, a can be written without quotation marks
around the URL itself. This syntax is specially-parsed, and produces a
rather than a function syntactically. [CSS3SYN]Some CSS contexts, such as @import, allow a to be represented by a
instead. This behaves identically to writing a url() function
containing that string. Because these alternate ways of writing a
are not functional notations, they cannot accept any
s.
大家写url内内容是不要忘加引号 @import 不需要url function表达式 而且由于没有使用 url 函数 所以不能使用
3.4.1. Relative URLs
In order to create modular style sheets that are not dependent on the
absolute location of a resource, authors should use relative URLs.
Relative URLs (as defined in [URL]) are resolved to full URLs using a
base URL. RFC 3986, section 3, defines the normative algorithm for
this process. For CSS style sheets, the base URL is that of the style
sheet itself, not that of the styled source document. Style sheets
embedded within a document have the base URL associated with their
container.When a appears in the computed value of a property, it is
resolved to an absolute URL, as described in the preceding paragraph.
The computed value of a URL that the UA cannot resolve to an absolute
URL is the specified value.For example, suppose the following rule: body { background:
url("tile.png") } is located in a style sheet designated by the URL:http://www.example.org/style/basic.css The background of the source
will be tiled with whatever image is described by
document’s
the resource designated by the URL:http://www.example.org/style/tile.png The same image will be used
.
regardless of the URL of the source document containing the
url 可以使用相对路径
3.4.2. URL Modifiers
The url() function supports specifying additional s,
which change the meaning or the interpretation of the URL somehow. A
is either an or a function.This specification does not define any s, but other
specs may do so.
url() 支持 css3 草案 还没有定义什么的 你们参照其他规范啦 什么 什么 的
Numeric Data Types Properties may restrict numeric values to some range. If the value is
outside the allowed range, the declaration is invalid and must be
ignored.CSS theoretically supports infinite precision and infinite ranges for
all value types; however in reality implementations have finite
capacity. UAs should support reasonably useful ranges and precisions.
属性可能限制数值范围。如果该值超出允许范围,声明是无效的,必须被忽略。
css 理论上支持无限精度和无限范围为所有值类型,然而在现实中实现有限的能力。UA System 应该支持合理有用的范围和精度。总之 css 又不是语言啦
4.1. Integers: the type
Integer values are denoted by . An integer is one or more
decimal digits 0 through 9 and corresponds to a subset of the
production in the CSS Syntax Module [CSS3SYN]. The
first digit of an integer may be immediately preceded by - or + to
indicate the integer’s sign.
整数类型 可以使用 -表示负数 +表示正数
4.2. Real Numbers: the type
Number values are denoted by . A number is either an
or zero or more decimal digits followed by a dot (.) followed by one
or more decimal digits and optionally an exponent composed of "e" or
"E" and an integer. It corresponds to the production in
the CSS Syntax Module [CSS3SYN]. As with integers, the first character
of a number may be immediately preceded by - or + to indicate the
number’s sign.
数字类型 包括小数 整数啦 有符号啦
4.3. Percentages: the type
A percentage value is denoted by , and consists of a
immediately followed by a percent sign %. It corresponds to
the production in the CSS Syntax Module [CSS3SYN].Percentage values are always relative to another value, for example a
length. Each property that allows percentages also defines the value
to which the percentage refers. The value may be that of another
property for the same element, a property for an ancestor element, or
a value of the formatting context (e.g., the width of a containing
block).
类型啦 取值有父元素 或者 格式化上下文 决定
4.4. Numbers with Units: dimensions
A dimension is a immediately followed by a unit identifier.
It corresponds to the production in the CSS Syntax
Module [CSS3SYN]. Like keywords, unit identifiers are ASCII
case-insensitive.CSS uses dimensions to specify distances (), durations
(), frequencies (), resolutions (), and
other quantities.
css number 还可以带单位
Distance Units: the type Lengths refer to distance measurements and are denoted by in
the property definitions. A length is a dimension. However, for zero
lengths the unit identifier is optional (i.e. can be syntactically
represented as the 0).Properties may restrict the length value to some range. If the value
is outside the allowed range, the declaration is invalid and must be
ignored.While some properties allow negative length values, this may
complicate the formatting and there may be implementation-specific
limits. If a negative length value is allowed but cannot be supported,
it must be converted to the nearest value that can be supported.In cases where the used length cannot be supported, user agents must
approximate it in the actual value.There are two types of length units: relative and absolute.
css type 有绝对的 有相对的 不过都并不是准确的
5.1. Relative lengths
Relative length units specify a length relative to another length.
Style sheets that use relative units can more easily scale from one
output environment to another.The relative units are:
Child elements do not inherit the relative values as specified for their
parent; they inherit the computed values.
相对单位 大体是字体 viewport 总之要有一个参照物
5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units
The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc, q) and the visual angle unit (px):
px 是绝对单位 不过不是说就一定准确