A brief introduction to css units_html/css_WEB-ITnose

CSS Values ​​and Units Module Level 3

I was originally writing an introduction to css3 attr and gradually realized that css units need a good introduction

This article is not a w3c translation and is based on my own understanding of the original text

参考 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.

Abstract

This css3 module describes the properties of css Common values ​​and units and the syntax for using them when defining CSS properties.
CSS is a presentation language used to describe structured documents (such as HTML and XML), commonly seen on the screen, on paper, in speeches, etc.

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.

Each css attribute can include keywords, data types (appearing between < and >), and how they are combined. Generic data types (the most widely used) are described by the most attributes, while other more specific data types (such as < spacing-limit >) describe the corresponding modules.

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.

Interaction of modules

This module replaces the relevant chapters of [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.

Value Definition Syntax
The syntax described here is used to define a set of valid values ​​for CSS property. An attribute value can have one or more components

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.

Component value type
The component value type is specified in several aspects

Keywords (such as auto, disc, etc.)

Basic data Types appearing in

have the same value as a property bearing the same name. Since such type names are property names

are non-terminals and do not share the same name as a property in In this case

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.

Some attribute value definitions also include (/ ) comma(,)

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

If a function requires three parameters, it can be written like this
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.

Each type, keyword, or equal group may be followed by a modifier

The asterisk (*) indicates that the preceding type, word, or group appears zero One or more times

Plus sign ( ) indicates that the preceding type, word, or group appears one or more times

Question mark (?) indicates that the preceding type, word, or group is Optional (occurs zero or once)

Curly brackets with numbers ({A}) indicates that the preceding type, word, or group appears A times

Curly brackets with numbers ({A} ,B}) indicates that the previous type, word, or group appears A to B times,
Curly brackets with numbers ({,B}) indicates that the previous type, word, or group appears 1 to B times

Hash mark (#) indicates that the preceding type, word, or group occurs one or more times

Exclamation mark (!), a group indicates that the group requirement must produce at least one value, even if the syntax within the group Items will cause the entire content to be omitted, at least one component value cannot be omitted.

A group of exclamation points (!) indicates that the group requirement must produce at least one value, and even if the syntax of items within the group would cause the entire content to be omitted, at least one component value cannot be omitted.

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.

An attribute value may be composed of multiple components

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.

The above are some w3c has some basic definitions of properties for documents
2.6. Property value examples

Below are some examples of properties with their corresponding value definition fields

Now for some of the pictures in the picture Provide an explanation

• 'orphans' can be set to 3 if it is defined
• 'text-align' can be set to 'center' if it is defined as left or right or center or justify
• 'padding-top' is defined as | and can be set to '5%'
• 'outline-color' is defined as | invert and can be set to '#fefefe'
• ' text-decoration' is defined as none | (underline || overline || line-through
  || blink) || means that this attribute can be placed one or more at the same time and can be set to 'overline underline'
• The definition of 'font-family' is [ | ]# This means that this is a combination value, a bit like a list. You need to write at least one, you can write multiple, and you can set it to '"Gill Sans", Futura, sans-serif'
• 'border-width' is defined as [ | thick | medium | thin]{1,4}. This means that you can write 1 to 4 times. Each time you can use either thick or medium or thin, you can set it to '2px medium. 4px'
• 'text-shadow' is defined as [inset? [{2,4} && ?]]# | none
  This means that text-shadow can have several groups of inset with a question mark indicating whether it can be written or not. Write the following to indicate that you can write 2 to 4 colors. You can choose '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 }

Predefined keywords are reserved meaningful keywords that are case-insensitive

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.

The keywords that can be widely used in css include initial, inherit, unset
initial is set to the initial value
inherit shows the calculated style of the parent element
unset behaves similarly to initial and 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 是绝对单位 不过不是说就一定准确