CSS style Sheets

One: Why use style sheets? (CSS style sheets control HTML tags, beautify pages)

1.HTML Label appearance style comparison single (default font black)

2. Can beautify the webpage, make the page more beautiful

3. Improve productivity by sharing and using multiple Web pages

4. Implement style and page separation to facilitate team development

div tag: The container Tag CSS control page is available to control the DIV directly

Two: Basic syntax for style sheet hair

<style type= "Text/css" >

　　Selector Selector {

Properties: Property values

......

}

</style>

Three: selector Classification (1. Tag Selector; 2. class selector; 3.id selector;)

1. Tag Selector (label signature {attribute: Property value})

Example: <style type= "Text/css" >

　　p{

Properties: Property values

......

}

</style>

2. Class selector (. Class Name {attribute: Property value}) to define the class name in the code tag (<p class= "R" > </p>)

Example: <style type= "Text/css" >

　　. classname{

Properties: Property values

......

}

</style>

3.id Selector (#id名称 {property: Property value}) to define the ID name in the code tag (<p id= "E" ></p>)

Example: <style type= "Text/css" >

　　#idName {

Properties: Property values

......

}

</style>

4. Collective declaration of selectors

tags, #id名称,. Class Name {property: property value ...}

four: Inheritance and nesting of CSS

　　CSS inheritance refers to: The child tag inherits all the style styles of the parent tag, and can be modified on the basis of the style of the parent tag style, resulting in a new style, which will not affect the parent tag at all

Five: The classification of the style (3 types below)

Ways to control pages using CSS

1. Inline style: Add attribute definitions directly to tags

2. Inline style:

(1) CSS code is written between

(2) Declaration using the <style></style> tag

3. External style sheet

(1) Linking an external style sheet

<link href= "file path and name" rel= "specifies that the relationship is a style sheet (stylesheet)" type= "link style for CSS (TEXT/CSS)" >

(2) Import an external style sheet

<style type= "Text/css" >

<!--

@import URL (the path and name of the external style sheet CSS file);

-

</style>

(3) the difference between linking an external style sheet and importing an external style sheet @import style sheet: Imported into HTML files when HTML is initialized <link> style Sheets: HTML tags require a style when linked import)

[1]: Load order different <link> style sheet : Load @import style sheet at the same time: All pages are downloaded and then loaded

[2]: Compatibility differences @import style sheet:CSS2.1 proposed usage some old browsers do not support (e.g. IE4 browsers below)

[3]: Use the DOM to control the difference in the style of the page (the page uses JavaScript control dom to change the page style @import not supported,<link> is an XHTML label @import CSS provides the way)

Six: The priority of the style (left to right from the following)

1. Inline style sheet--2. Embedded style sheet--3. external style sheet (1) Link external style sheet-(2) Import external style sheet)

CSS style Sheets