Graphical CSS (11): Understanding the logic of style sheets

A style sheet can be external, inline, or embedded; Linked external style files are generally:

<link rel= "stylesheet" type= "Text/css" href= "Xxx.css" media= "All" >

This is written in the head tag, the contents of which are not case-sensitive, and the double quotes can be either single quotes or omitted; Explain one by one:

Link: is a common label for HTML, and it does more than just link external styles, such as specifying an icon for an address bar:

<link rel= "shortcut icon" type= "Image/ico" href= "My.ico" >

Rel= "stylesheet": (rel is the abbreviation of relation) indicates that Link's file is used for the style sheet, so the suffix of the style sheet may not necessarily be CSS.

Type= "text/css": Explanation Link's file is a text format; Now it should all be text format, maybe there will be binary later.

Href= "XXX.CSS": The path can be absolute, relative, remote, local.

Media= "All": Media has more value (all, aural, Braille, embossed, handheld, print, projection, screens, TTY, TV), but it is now widely supported that is: all, Screen (for on-screen rendering), print (for printing).

If you specify multiple values for media to be separated by commas, such as Media = "Print, screen".

Its default value should be all (not checked by data), so it can be omitted.

Its simplest writing can be: <link Rel=stylesheet href=xxx.css> can't save again!

There are also extensions to it, for example:

<link rel= "stylesheet" id= "Css1" title= "Firstcss" type= "Text/css" href= "Xxx.css" media= "All" >

In the JS script, these values can be read 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; // Link 标签总数.

I've seen some scripts that implement dynamic switching styles take advantage of their title attributes.

If Link has more than one external style sheet, which is preferred?

The answer is simple, different styles: The setting all works, the same style: the latter covers the former; The following @import and the elements therein are also the same.

Inline styles are also written in the head tag, written in the form:

<style type= "Text/css" > ... </style>; Often written: <style> </style> in inline style can be used @import introduce external files, such as:

<style>
　@import url(xxx.css);
　@import url(xxx.css) screen, print; /* 也可同时指定用途 */
　/* 本页的其他样式 */
</style>

Because @import come late (old browser does not support), also not easy to be JS control, so it is not as popular as Link.

However, it is convenient to set the inline style in the page style.

Embedded style, such as: <div style= "font:bold; Color: #f00; > ... </div>

This usage is very popular, the designation personalized element is also convenient, just let originally very macroscopic CSS stingy a little bit.

What label is the set style for? Which labels? Basically divided into:

Tag selection, ID selection, class selection, inclusion selection, wildcard selection, pseudo class selection (there are more, there is no universal support, learning is useless).

Label selection:

span {color:red;} will be used for all span labels;

Span, div {color:red;} will be used for all span and div tags;

ID Selection:

#ID1 {color:red} will be used as a label for all ID=ID1;

#ID1, #ID2 {color:red;} will be used for all id=id1 and ID=ID2 labels;

Class Selection:

. c1 {color:red} will be used as a label for all CLASS=C1;

. C1,. c2 {color:red} will be made to all class=c1 and CLASS=C2 labels;

It is worth mentioning that a label can also specify multiple classes (spaces separated), such as: