Graphic CSS (11): Understand the style sheet Logic

A style sheet can be external, inline, or embedded. links to external style files are generally:
<LINK rel = "stylesheet" type = "text/CSS" href = "xxx.css" Media = "all">

This should be written in the head label. The content is case-insensitive, and the double quotation marks can be single quotation marks or omitted. Explain one by one:

Link: Is a common HTML Tag. It is used not only to link external styles, for example, to specify the icon in the address bar:
<LINK rel = "shortcut icon" type = "image/ICO" href = "My. ICO">

Rel = "stylesheet": (Rel is the abbreviation of relation) indicates that the link file is used for the style sheet. Therefore, the style sheet suffix may not be CSS.

Type = "text/CSS": Link files are in the text format. They should all be in the text format. Maybe there will be binary files later.

Href = "xxx.css": The path can be absolute, relative, remote, or local.

Media = "all": Media has more values (all, aural, Braille, embossed, handheld, print, projection, screen, tty, TV ),
But now it is widely supported: All, screen (for screen rendering), print (for printing ).
Multiple media values can be separated by commas (,), for example, media = "print, screen ".
Its default value should be all (not checked by data), so it can be omitted.

Its simplest syntax can be: <LINK rel = stylesheet href1_xxx.css> it can no longer be saved!

It is also extended, for example:
<LINK rel = "stylesheet" id = "css1" Title = "firstcss" type = "text/CSS" href = "xxx.css" Media = "all">

In JS scripts, you can read these values in the following way (if this is the first link tag ):

Document. getelementsbytagname ("Link "). item (0 ). rel; document. getelementsbytagname ("Link "). item (0 ). ID; document. getelementsbytagname ("Link "). item (0 ). title; document. getelementsbytagname ("Link "). item (0 ). href; document. getelementsbytagname ("Link "). item (0 ). media; document. getelementsbytagname ("Link "). length; // The total number of link tags.

I have seen that some scripts that implement the dynamic switching style use the title attribute.

If multiple external style sheets are linked, which one will be used first?
The answer is simple. Different styles: settings all work, the same style: the latter overwrites the former; the latter @ import and the elements in it are the same.

Inline styles must also be written in the head label. Writing format:
<Style type = "text/CSS">... </style>; often written as: <style>... </style>

You can use @ import to introduce external files in the inline style, for example:

<Style> @ import url(xxx.css); @ import url(xxx.css) screen, print;/* You can also specify the purpose * // * other styles on this page */</style>

Because @ import is relatively late (not supported by old browsers) and cannot be easily controlled by JS, it is not as popular as link.
However, it is convenient to set the style in the page to use the inline style.

Embedded style, such as: <Div style = "Font: bold; color: # f00;">... </div>
This usage is very popular and it is convenient to specify personalized elements, but it makes CSS very stingy.

Which label is the set style used? What labels? It can be divided:
Tag selection, Id selection, class selection, including selection, wildcard selection, and pseudo-class selection (there are more options, which are not currently widely supported and useless ).

Label selection:
SPAN {color: red;} applies to all span labels;
SPAN, div {color: red;} applies to all span and Div labels;

Select ID:
# Id1 {color: red;} applies to all Id = id1 tags;
# Id1, # Id2 {color: red;} will act on all Id = id1 and ID = Id2 tags;
Class selection:
. C1 {color: red;} applies to all class = C1 labels;
. C1,. C2 {color: red;} will be applied to all class = C1 and class = c2 labels;

It is worth mentioning that a label can also specify multiple classes (separated by spaces) at the same time, such:

Include selection:
Div span {color: red;} acts on the span tag of all parent elements that are div;
Div p a {color: red;} acts on all links in P of all div;

Mix the above:
SPAN, div P # id1 {color: red;} will act on the ID = id1 tag and all span tags under P under Div.
Div. C1 {color: Red} will act as the class = C1 label under Div. It will be better understood if there are multiple spaces: div. C1 {color: Red.

Wildcard selection:
For example, * {Background: # DDD; color: # f00;} applies to all elements.
This is more powerful than HTML {Background: # DDD; color: # f00;}. The following figure shows the comparison:

Continue to study wildcard:
If you write. C1 as *. C1; or write # id1 as * # id1, it is not difficult to understand (they have no difference );

But there is a difference between Div {...} and Div! Div * refers to the element under the DIV and does not contain the directly-affiliated content. See the figure below:

Similarly, body * A {...} Does not apply to the direct link under the body:

Pseudo-class selectionSuch:
A: visited {...} (accessed link );
Div: First-letter {...} (the first word in Div ).
They are called "pseudo classes" because they are uncertain.

There is another priority issue, as mentioned above.
The priority of location definition is (from high to low): Embedded-inline-external;
The priority of the selection method is (from high to low): Id selection-class selection-label selection;
If the definition is not repeated, it will be valid. if the definition is repeated, the latter will overwrite the former.

What if the style defined earlier does not need to be overwritten? Use! Important (which has the highest priority). For example:

Summary:
The style sheet is basically followed, and the winter vacation is not imaginary;
Because it is not often used, I feel that I am still in touch with many new things;
It seems that most of my friends in the blog Park are engaged in network programming, and I should not have to say anything about CSS. I am afraid to post it on the homepage to expect correction and supplement.

Related links:

Graphic CSS (1): first create a style sheet test tool

Graphic CSS (2): border-border

Graphic CSS (3): padding (inner margin), margin (outer margin)

Graphic CSS (4): Background-Background

Graphic CSS (5): font-font

Graphic CSS (6): Text-text format

Graphic CSS (7): Size, positioning, cutting, and scroll bar

Graphic CSS (8): float, show, and hide

Graphic CSS (9): List

Graphic CSS (10): Links, inheritance, contraction, mouse pointer, and others (to be supplemented ...)

Graphic CSS (11): Understand the style sheet Logic