欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css 单位简单介绍_html/css_WEB-ITnose

程序员文章站 2022-04-11 22:58:32
...
CSS Values and Units Module Level 3

本来在写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:

  • keyword values (such as auto, disc, etc.), which appear literally,
    without quotes (e.g. auto)
  • basic data types, which appear between (e.g., ,
    , etc.).
  • types that have the same range of values as a property bearing the
    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.
  • non-terminals that do not share the same name as a property. In this
    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.
  • 组件值类型
    组件值类型指定的在几个方面

  • 关键词(如 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).

    就是自定义标示符 不清楚什么用 有一个链接
    关于的一些解释

    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
    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() 支持 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 是绝对单位 不过不是说就一定准确