摘要：本來在寫介紹逐漸發現單位需要好好介紹下本文不是翻譯保留原文的基礎上做出自己的理解為主參考摘要這個模塊描述了屬性的常用值和單位和在屬性定義時使用它們的語法。

參考 
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 >), 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(出現在<和>中間)，它們如何組合。通用數據類型（被最廣泛使用）被最多屬性描述 而其他一些更為特定的數據類型(如< spacing-limit >)描述了相應的模塊。

  
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:

keyword values (such as auto, disc, etc.), which appear literally,
without quotes (e.g. auto)

basic data types, which appear between < and > (e.g., ,
, etc.).

types that have the same range of values as a property bearing the
same name (e.g., <‘border-width’>, <‘background-attachment’>, 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.

non-terminals that do not share the same name as a property. In this
case, the non-terminal name appears between < and >, as in
. Notice the distinction between and
<‘border-width’>: 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.

組件值類型
組件值類型指定的在幾個方面

關鍵詞（如 auto, disc, etc.)

基本數據類型 出現在<和》

類型有相同的值作為屬性軸承相同的名稱 既然這樣 類型的名字是屬性名

非終結符,不共享相同的名稱作為財產 在這種情況下

  
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.

每一類型、關鍵字或相等的組可能是緊隨其后的是一個修飾符

星號(*)表示前面出現的type,word,或group出現零次或多次

加號(+)表示前面出現的type,word,或group出現1次或多次

問號(?)表明前面的type,word,或group是可選的(發生零個或一次)

花括號帶數字({A})表明前面的type,word,或group出現A次

花括號帶數字({A,B})表明前面的type,word,或group出現A到B次,
花括號帶數字({,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).

就是自定義標示符 不清楚什么用 有一個鏈接
關于< custom-ident >的一些解釋

  
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.

< custom-ident > 不能使用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就是< custom-ident >啦

  
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 > 是有 url(< string > < url-modifier >*) 組成的 可以為零次或多次

  
In addition to the syntax defined above, a  can sometimes be

  written in other ways:
  
  
For legacy reasons, a < url > can be written without quotation marks

  around the URL itself. This syntax is specially-parsed, and produces a

  < url-token > rather than a function syntactically. [CSS3SYN]
  
  
Some CSS contexts, such as @import, allow a < url > to be represented by a

  < string > instead. This behaves identically to writing a url() function

  containing that string. Because these alternate ways of writing a

  < url > are not functional notations, they cannot accept any

  < url-modifier >s.

大家寫url內內容是不要忘加引號 @import 不需要url function表達式 而且由于沒有使用 url 函數 所以不能使用 < url-modifier >

  
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

  document’s  will be tiled with whatever image is described by

  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() 支持 < url-modifiers > 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.

< interger > 整數類型 可以使用 -表示負數 +表示正數

  
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.

< number > 數字類型 包括小數 整數啦 有符號啦

  
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).

< percentage > 類型啦 取值有父元素 或者 格式化上下文 決定

  
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 < length > 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 是絕對單位 不過不是說就一定準確