Javascript advanced Article 2 CSSXML

CSS, I don't think so .. However, because I am not doing the conference, I will make up for it here. The full name of CSS is cascadingstylesheets. The Chinese name is Cascade style sheet, also called Cascading Style Sheet. The advantage is that the code can be neatly organized and some styles can be processed in batches .... SyntaxHighlighter. all ();

CSS, I don't think so .. However, because I am not doing the conference, I will make up for it here.

The full name of CSS is cascading style sheets. The Chinese name is Cascade style sheet, also called cascading style Sheet. The advantage is that the code can be neatly organized and some styles can be processed in batches.

Basic Syntax:

Annotator :/**/

Selector {attribute: value}: Values of the same attribute are separated by space characters. different attributes are separated by semicolons. Case sensitive.

For example, if you want to customize a style for the table on the page, write table {.....;.....;}

There are many ways to use the selector, So I once again was too lazy to copy it from the Internet:

 

Select Character Mode	Description
*	Match any element. (General selector)
E	Matches any element E (for example, an element of the E type ). (Type selector)
E F	Matches any descendant element F of Element E. (Descendant selector)
E> F	Matches any child element F of Element E. (Sub-Selector)
E: first-child	When Element E is the first child element in its parent element, it matches Element E. (: First-child pseudo class)
E: link E: visited	If E is the source anchpoint of a hyperlink that has not been accessed (: link) or has been accessed (: visited), it matches Element E. (Link pseudo class)
E: active E: hover E: focus	Matches E in the specified user action. (Dynamic pseudo class)
E: lang (c)	If an element of Type E uses (human) Language c (document language determines how the language is determined), it matches the element. (: Lang () pseudo class)
E + F	If an element E is directly before element F, it matches element F. (Near selector)
E [attr]	Matches any element E that has an "attr" attribute set (regardless of its value. (Attribute selector)
E [attr = "warning"]	Matches any element E whose "attr" attribute value is strictly equal to "warning. (Attribute selector)
E [attr ~ = "Warning"]	Matches the list of values whose "attr" attribute values are separated by spaces, and one of them is strictly equal to any element E of "warning. (Attribute selector)
E [lang | = "en"]	Any element E that matches its "lang" attribute with a list of values starting with "en" (from the left. (Attribute selector)
DIV. warning	Only HTML. The usage is the same as that of DIV [class ~ = "Warning"]. (Class selector)
E # myid	Matches any element E whose ID is equal to "myid. (ID selector)

 

 

For more information, see.
CSS priority: in a single page or css file, sometimes multiple definitions are defined for the same element, which needs to be rendered based on the priority. Priorities are classified into the priorities of the externally defined styles and those of other styles.
• The priority of the externally defined style: the algorithm is not mentioned here. The result is simply described as follows: id selector> class selector> attribute selector> pseudo-class selector> element selector> pseudo element selector> global selector> others
• Priorities of other style definitions: Intra-document styles, that is, style =... in the element. This is the most advanced style, and takes precedence over all external style definitions. "! Important "the usage of different versions is biased, so it is not specific. Check it if necessary. Inherited style: This is the style with the lowest priority.
CSS properties: Please refer to the http://www.w3school.com.cn/css/css_reference.asp (feed this is too irresponsible! Drop)
CSS unit: http://www.w3school.com.cn/css/css_units.asp (blogger you are simply a waste of wood ah! Fall !)
(Pretend not to hear)
Next we will go to the application process (￣)
1. The current page is embedded with css styles:


Css test

Title:
Content:

2. embed a css style file:
Create a CSS folder under the project, and then create a CSS file named style.css. This is to make the code neat. Of course, because this is just an example, I only wrote the content in the example.

 

 

 

. TableStyle {
Background: yellow;
Font-size: 14px;
Font-weight: bold;
Border: 1px solid #000000
}
 
It is also easy to reference. You only need to add one line:

Copy code
Rel specifies that the css style table file is added, type specifies the file type, and href specifies the physical address of the file.
3. Modify the css style dynamically.
Finally, it is related to js.
This modification method gets the element and then modifies the attribute. The link attribute can also be modified.
For example, if the id of a link is myStyle and its import file is modified, the method is as follows: