The fourth chapter: Primary Knowledge CSS3

The 1.CSS rule consists of two parts, the selector and the declarator

The declaration must be placed in {} and the declaration can be one or more

Each declaration consists of a property and a value separated by a colon, and each statement separated by a colon

Attention:

The last statement of the CSS, used to end the ";" Can not write, but based on the standards of the standard thinking of the proposal the end of the last statement ";" Write it.

2. Inline style

Setting the CSS style directly on the style property provides a common way to change the style of all HTML elements

Grammar:

<H1 style= Application of "color:red" >style attribute

<p style= "Font-size:14px;color:green;" > Set styles directly in HTML tags </p>

　　

3. Internal style

Write the CSS code in the

4. External style

is to save the CSS code as a separate stylesheet file, the file extension fame. class in the page reference external style can be

HTML file external styles are available in two ways-linked and imported

1) Link Type:

<link href= "... css" rel= "stylesheet" type= "Text/css"

<!--

Rel= "stylesheet" means using this external style on this page

Type=text/css refers to the type of file that is the style sheet text

href= "... css" file location

-

2) Import an external style sheet

Importing external style imported styles using @import in HTML pages must be placed in the <style> tab and <style> tags must be placed in

<style>

@import URL (".... css")

</style>

<!--where the @import import file must precede a symbol, the URL ("... css") represents the style file location--

3) Link type and import type difference

The 1.<link/> tag belongs to the XHTML category and @import is a special css2.1.

2. Using the,<link/> link CSS client to browse the Web page, the CSS page is loaded into the Web page, the compilation is displayed, so this situation shows that the page is the same as the user expected even if the speed is slow is the same effect

3. Using the @import import CSS file client when browsing the Web page, the HTML structure is presented before the external CSS files loaded into the Web page of course, and ultimately the same as the <link/> link effect is only when the slow speed of the web will show no CSS unified layout of the HTML page, This will give the user a bad feeling this is also the main reason most Web sites use to connect external style sheets

5. Priority of Style:< nearest principle >

Inline elements > Internal style sheets > external style Sheets

Note: The code is executed one at a-if the inner style is declared first than the outer style, the outer style has precedence

6.CSS3 Selector

Tag Selector class selector and ID selector

1) class Selector

Class Selector is < tag name class "Class name" > label content </tag name >

. green{

font-size:20px;

color:red;

}

<p class= "Green" >hhhh</p>

2) ID Selector

#green {

font-size:20px;

color:red;

}

<p id= "Green" >hhhh</p>

NOTE: The ID selector can only be used once, that is, the same ID property can be set only once on the same page, and the class selector can be used multiple times on the page

3) Preference of selectors

ID selector >class class selector > tag Selector

7.CSS3 Advanced Selector

1. Hierarchy Selector

1) E F descendant selector selects the matched F element, and the matched F element is included in the matched E element

2) E>f Select the matched f element, and the matching f element is the child element of the E element.

3) e+f adjacent sibling selector selects the matched F element, and the matched F element is only after the matched E element

4) e~f Universal Sibling Selector selects the matched F element, and all matched f elements after the matched E element

Note: 1) The General Brotherhood selector is selected by the E element next to the following sibling element, which is one or more elements;

2) Adjacent Brothers Select the F element that is only the e element, where only one element is selected

8. Structure pseudo-Class selector

1) e:first-child element E as the first child element of a parent element

2) e:last-child element E as the last child element of the parent element

3) e f:nth-child (n) Select the nth element F (n can be 1/2/3) of the parent element E with the keyword even odd

4) E:first-of-type Select a parent element with the first E element of the specified type

5) E:last-of-type Select the parent element with the last E element of the specified type

6) E f:nth-of-type (n) Select the nth F element with the specified type within the parent element

Note: E f:nth-child (n) and E F:nth-of-type (n) are used with the following key points in mind:

1) E f:nth-child (n) search from the first element in the parent, no type

2) E F:nth-of-type (n) First look at the type in the parent and look at the position.

9. Property Selector

1) e[attr] matches the E element with the attribute attr

2) e[attr=val] Select match E element with attribute attr and attribute value bit Val (where Val is case-sensitive)

3) E[attr^=val] Select Match element E, and the e element defines the attribute attr, where the property value is any string that begins with Val

4) E[attr$=val] Select Match element E, and the e element defines the attribute attr, where the property value is any string ending in Val

5) E[attr*=val] Select Match element E, and the e element defines the attribute attr, which contains the word "Val", the string Val matches any position in the attribute value

Fourth: initial knowledge CSS3