Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification And Inheritance. In order to make the original text better understand, so add some examples, if there are mistakes, please point out.

Writing in the front

When translating Chapter 6, do a translation of URLs and URIs in Chapter 4 “Syntax and Basic Data Types” to give a general idea of the terms when referring to them later.

URLs and URIs,

URI values in this specification (uniform resource identifiers (uris), see [RFC3986], including urls, urns, and so on) are represented as < URI >. The functional symbol used to specify urIs in attribute values is “URL ()”, as follows:

body { background: url("http://www.example.com/pinkish.png")}Copy the code

The URI value is in the format of the URL (followed by optional whitespace, then the optional single quote ‘or double quote’ character, then the URI itself, then the optional single quote ‘or double quote’ character, followed by optional Spaces, and finally followed). The two quote characters must be the same.

An example without quotes:

li { list-style: url(http://www.example.com/redball.png) disc }
Copy the code

Certain strings that appear in unquoted uris, such as parentheses, space characters, single quotes, and double quotes, must be escaped with backslashes, so the final URI value is a URI symbol :(,).

Depending on the type of URI, it is also possible to write the above characters as URI-escapes (urI-escapes) (where “(” escapes to” %28 “, “) escapes to “%29”, and so on). , as described in [RFC3986].

Note that the COMMENT symbol cannot appear in other symbols: therefore “URL (/x/pic.png)” represents the URI “/x/pic.png”, not the URI “pic.png”.

To create modular stylesheets that do not depend on the absolute location of resources, authors can use relative URIs. Relative uris (defined in [RFC3986]) are resolved to full uris using a base URI. Section V of RFC 3986 defines the canonical algorithm for this process. For CSS style sheets, the base URI is the URI of the style sheet, not the URI of the source document.

For example, suppose the following rule:

body { background: url("yellow")}Copy the code

In the style sheet specified by the URI:

www.example.org/style/basic…

The background of the source document’s body will be URI (www.example.org/style/yello…

User agents may differ when dealing with invalid URIs or when specifying urIs for unavailable resources.

Assigning Property Values, Cascading, and Inheritance

directory

  • Specified value, calculated value, and actual value
    • Specified values
    • Computed Values
    • Used values
    • Actual values
  • Inheritance by Inheritance
    • Inherit the value
  • @ import rules
  • Cascade
    • Cascading Order
    • ! Important rules
    • Calculate the specificity of the selector
    • Precedence of non-CSS Presentational properties

1 Specifies the value, calculated value, and actual value

Once the User Agent parses a document and builds the Document tree, it assigns a value for each attribute applied to the target media type for each element in the document tree.

The final value of the property is computed in four steps: first the value is determined by the specification (the specified value), then parsed to a value for inheritance (the calculated value), converted to an absolute value if necessary (the use value), and finally converted to the actual value based on the constraints of the local environment.

1.1 the specified value

First, the user agent must assign a specified value to each attribute based on the following mechanism (priority order) : 1. If the result of the cascade is a value, it is used as the specified value. 2. If the attribute of the element is inherited and the element is not the root of the document tree, the computed value of its parent element is used as the specified value. 3. Otherwise, use the initial value of this attribute as the specified value. The initial value of each attribute is specified during the attribute definition.

1.2 Calculated Value (TODO)

The specified value is resolved to the calculated value during the cascade; For example, URIs will be resolved as absolute values, em and EX will be calculated as pixels or absolute lengths. Computing a value does not require the user agent to render the document.

The calculated value of an URIs that the user agent cannot resolve to absolute URIs is the specified value.

The calculated value of the determination property is specified by the line on the calculated value in the property definition. If the specified value is inherit, refer to Inheritance for the definition of the calculated value.

As defined by Applies To, its calculated value exists even if the attribute is not applied To the element. However, some attributes may define the calculated value of an element’s attribute based on whether the attribute is applied to that element.

1.3 use value

The calculated values are processed as much as possible without formatting the document. However, certain values can only be determined at document layout time. For example, if you set the width of an element to a specific percentage of its contained blocks, you cannot determine its width until you determine the width of the contained blocks. Using values is the result of taking calculated values and parsing all remaining dependencies into absolute values.

1.4 the actual value

The use value is in principle a value for rendering, but the user agent may not be able to use this value in a given environment. For example, a user agent may only render borders with integer pixel widths, so it may have to approximate the calculated widths, or it may force the user agent to use black and white shadows instead of full color. The actual value is some approximate used value.

2 inheritance

As described above, in the document tree, the child elements of an element will inherit some attribute values from the parent element. Each attribute defines whether or not it can be inherited.

Suppose there is an H1 element that contains an emphasis element (EM) :

<H1>The headline <EM>is</EM> important!</H1>
Copy the code

If no color is specified for the EM element, the emphasized “is” inherits the color of its parent element, so if the H1 element is blue, the EM element will be blue as well.

When inheritance occurs, the element inherits the calculated value. The computed value from the parent element becomes both the specified and computed value of the child element.

For example, given the following stylesheet:

body { font-size: 10pt }
h1 { font-size: 130% }
Copy the code

Document snippet:

<BODY>
  <H1>A <EM>large</EM> heading</H1>
</BODY>
Copy the code

The font-size attribute of the H1 element will have a calculated value of 13pt (130% times 10pt, the value of the parent element). The EM element will also have a calculated value of 13pt, since it inherits the calculated value of font size. If the user agent does not have a 13pt font available, the actual values for H1 and EM font size may be, for example, 12pt.

Note that inheritance will follow the document tree and will not be intercepted by anonymous boxes.

2.1 inheritance value

Each property may have a cascading value of Inherit, which means that, for a given element, it uses the same specified value as the same property of its parent element. The inherit value can be used to enforce inheritance of values or for properties that are not normally inherited.

If the inherit value is set on the root element, the property is assigned its initial value.

In the following example, the color and background attributes are set on the body element. On all other elements, the color value will inherit and the background will be transparent. If these styles are part of the user’s style sheet, then a white background with black text will be enforced in the document.

body {
  color: black ! important; 
  background: white ! important; {} *color: inherit ! important; 
  background: transparent ! important;
}
Copy the code

3 @ import rules

The @import rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rule must precede all other rules (except the @charset rule (if it exists)). For information on when user agents need to ignore @import, see Parsing. The keyword @import must be followed immediately by the URI of the stylesheet to include. Strings are also allowed and will be parsed as if the URL () had been wrapped around them.

The following lines have the same meaning and illustrate two syntax for @import (one with url() and one with a bare string) :

@import "mystyle.css";
@import url("mystyle.css");
Copy the code

To avoid user agents that can avoid retrieving resources for unsupported media types, authors can specify @import rules that rely on certain media. These conditions are represented by the media type separated by the specified comma after the URI.

The following rule illustrates how to make the @import rule media-specific:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
Copy the code

Without specifying any media type, the import is unrestricted. This has the same effect as specifying all for the media type. The import takes effect only if the target media type matches the media type list.

The target media type matches the media type list if one of the items in the media type list is the target media type or if the media type list is all.

Note that the media Type query [MEDIAQ] extends the syntax of the media type list and the definition of matching.

When importing the same style sheet in more than one location or linking it to a document, the user agent must treat each style sheet as a separate style sheet (or as they wish to do).

4 cascade

Stylesheets can come from three different sources: authors, users, and user agents.

  • Author: The author specifies the style sheet for the source document according to the conventions of the document language. For example, in HTML, stylesheets can be included in documents or external links.
  • Users: Users can specify style information for specific documents. For example, a user can specify a file that contains a style sheet, or a user agent can provide an interface to generate a user style sheet (or act as if it were).
  • User agents: All user agents that meet the requirements apply a default style sheet (or behave like them). The default stylesheet for the user agent should conform to the general description of the document language to display elements of the document language (for example, for visual browsers, the EL element in HTML is italicized). For recommended default style sheets for HTML documents, see A Sample Style Sheet for HTML.

Note that users can modify system Settings (for example, system color) that affect the default stylesheet. However, some user agent implementations make it impossible to change values in the default stylesheet.

The stylesheets from these three sources will overlap in scope and affect each other in a cascading relationship.

CSS cascades assign weights to each style rule. When multiple rules are applied, the rule with the largest weight takes precedence.

By default, rules in author stylesheets have more weight than rules in user stylesheets. But, for! The important rule has the opposite priority. All user and author rules have more weight than the rules in UA’s default stylesheet.

4.1 Cascading Sequence

To find values for element/attribute combinations, the user agent must apply the following sort order:

  1. Find all declarations of related elements and attributes that apply to the target media type. The declaration applies if the associated selector matches the element in question and the target media type matches the list of media types on all @Media rules that contain the declaration and all links along the path of the stylesheet.
  2. Sort by importance (common or important) and source (author, user, or user agent). In ascending order:
    1. User agent Statement
    2. User General Statement
    3. Author general Statement
    4. Author’s Important Statement
    5. User Important Statement
  3. Order rules of the same importance and origin by selector specificity:More specific selectors will override more general selectors. Pseudo-elements and pseudo-classes are treated as normal elements and classes, respectively.
  4. Finally, sort in the order specified: if two declarations have the same weight, source, and specificity, the later declarations prevail. Declarations in the imported stylesheet are considered to precede any declarations in the stylesheet itself.

In addition to individual statements! In addition to the important setting, this policy gives the author’s style sheet a higher weight than the user’s style sheet. The user agent must give the user the ability to turn off the influence of a particular author style sheet, for example through a drop-down menu. Compliance with UAAG 1.0 checkpoint 4.14 can satisfy this condition [UAAG10].

4.2! Important rules

CSS attempts to create a functional balance between author and user style sheets. By default, rules in the author style sheet override rules in the user style sheet (see Cascading Rule 3).

But, for the sake of balance,! Important declaration (delimiter! And the keyword important follows this declaration) takes precedence over normal declarations. Both author and user stylesheets may be included! Important declaration, and user! The important rule overrides the author! Important rules. This CSS functionality improves the accessibility of documents by giving users control over specific requirements (large fonts, color combinations, etc.).

Declare an abbreviated property (such as background) as! Important is equivalent to declaring all of its children as! Important.

In the following example, the first rule in the user stylesheet contains! Important declaration, which overrides the corresponding declaration in the author style sheet. As marked as! Important, so the second declaration has a higher priority. However, the third rule in the user style sheet is not! Important, so it takes precedence over the second rule in the author style sheet (which happens to set the style on the abbreviation property). Again, since rule number two is! Important, so the third author style sheet rule takes precedence over the second author style sheet rule. This suggests that! The important declaration is also functional in the author style sheet.

/* From the user's style sheet */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }

/* From the author's style sheet */
p { text-indent: 1.5 em ! important }
p { font: normal 12pt sans-serif ! important }
p { font-size: 24pt }
Copy the code
4.3 Calculate the specificity of the selector

The specificity of the selector is calculated as follows:

  • If the source of the declaration is a style attribute rather than a rule with a selector (= a), the count is 1; Otherwise, the count is 0. (In HTML, the value of the element’s style property is the element’s style sheet rule. These rules have no selectors, so a = 1, b = 0, C = 0, d = 0.)
  • Count the number of ID attributes in the selector (= b)
  • Count the number of other attributes and pseudo-classes in the selector (= c)
  • Count element names and pseudo-elements in the selector (= d)

Specificity is based only on the form of the selector. In particular, even if the ID attribute is defined as ID, selectors of the form “[id = p33]” are considered attribute selectors (a = 0, b = 0, C = 1, d = 0) in the DTD of the original file.

Specificity is obtained by concatenating the four digits A-B-C-D (in a number system with a large cardinal number).

Some cases:

* {} /* a=0 b=0 c=0 d=0 -> nine =0 c=0 d=1 -> nine =0 c=0 d=1 -> nine =0 {} / * = 0 b = 0 c = 0 d = 2 - > specificity = 0,0,0,2 * / ul li {} / * = 0 b = 0 c = 0 d = 2 - > specificity = 0,0,0,2 * / ul ol li + {} / * A =0 b=0 C =0 D =3 -> nine =0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> nine =0,0,1,1 */ ul OL Li.red {} /* a=0 b=0 c=1 d=3 -> auus =0,0,1,3 */ li.red A = 0 # x34y {} / * b = c = 0 1 d = 0 - > specificity = 0,1,0,0 * / style = "" / * a = b = 0 c = 0 1 d = 0 - > specificity = 1,0,0,0 * / < HEAD > <STYLE type="text/css"> #x97z { color: red } </STYLE> </HEAD> <BODY> <P ID=x97z style="color: green"> </BODY>Copy the code

In the example above, the color of the P element is green. Because of cascading rule 3, the declaration in the style attribute overrides the declaration in the style element because it is more specific.

4.4 Priority of non-CSS implicit rendering attributes

The UA can choose to adopt presentation attributes in the HTML source document. If so, these attributes are converted to the corresponding CSS rules, with specificity equal to zero, and treated as if they were inserted at the beginning of the author’s style sheet. Therefore, they may be overridden by subsequent stylesheet rules. During the transformation phase, this policy will make it easier to co-exist with style sheets with style attributes.

For HTML, any attribute that is not in the following list should be treated as a render attribute: Abbr, Accept-Charset, Accept, AccessKey, Action, Alt, Archive, Axis, Charset, Checked, Cite, Class, Classid, code, Codebase, codeType, C Olspan, COORds, data, datetime, Declare, defer, dir, disabled, encType, for, headers, href, hreflang, HTTP-equiv, ID, ISmap, label, lang, Language, Longdesc, MaxLength, Media, Method, Multiple, Name, Nohref, Object, onblur, onchange, onclick, ondblclick, onfocus, onKeydow N, onKeyPress, onKeyUp, onload, onLOAD, onMouseDown, onMousemove, onMouseout, onmouseover, onmouseup, onreset, onSelect, onSubmit, on Unload, onunload, Profile, Prompt, ReadOnly, REL, Rev, RowSPAN, Scheme, Scope, Selected, Shape, SPAN, SRC, Standby, Start, Style, Summary , Title, Type (except on LI, OL and UL Elements), USEMap, value, ValueType, version.

For other languages, all document language-based styles must be converted to the appropriate CSS and cascades of input at the user agent level, or, like HTML presentation hints, are treated as author-level rules, with zero specificity, placed at the beginning of the author style sheet.

The following user style sheet overwrites the font-weight of b elements in all documents and the color of font elements with the color attribute in XML documents. But it does not affect the color of any FONT element in an HTML document that has a color attribute.

b { font-weight: normal; }
font[color] { color: orange; }
Copy the code

However, the following rule overwrites the color of font elements in all documents:

font[color] { color: orange ! important; }
Copy the code