unit1 first met CSS3

1. Basics of CSS

1. Concept

The cascading style sheet
expresses the computer language of HTML or XHTML document style:
including setting of font, color, margin, height, width, background image, web page positioning, etc.

2. Purpose

1. Appearance beautification
2. Layout and positioning

3. Advantages

1. The content and performance are separated.
2. The performance of the web page is unified and easy to modify.
3. Rich styles make the page layout more flexible.
4. Reduce the amount of code of the web page, increase the browsing speed of the web page and save the network bandwidth.
5. Use the independent page CSS, which helps web pages to be indexed by search engines

2. How to define css

1. The tag selector is directly applied to HTML tags.
2. The class selector can be used multiple times in the page.
3. The ID selector can only be used once in the same page.

Method 1: Internal style

Put the style in the style tag of the html page (style in the head)

1. Tag selector

1 ) Label selection: use the label name as the name of the selector
label name { style list; }

2. Class selector

2) Class selector: use the class name of the label as the name of the selector
. The class name of the label { style list; } Supplement: All labels have class attributes

3. id selector

3) id selector: use the id value of the tag as the name of the
selector #id name { style list; } Supplement: all tags have id attributes, and the id attribute value is unique

Method 2: External style

The second way of css definition: external style sheet (recommended)
              1. Create a .css file
              2. Write a list of styles in the .css file (3 types of selectors)
              3.                      Import an external style sheet
                     1) link (recommended)
2) import Must be placed in the style tag (not recommended)

Import method

The difference between linking and importing:
1. The <link><link/> tag belongs to XHTML, and @import belongs to CSS2.1
2. The CSS file that uses the <link/> link is first loaded into the web page, and then compiled and displayed
3. , Use the CSS file imported by @import, the client displays the HTML structure, and then load the CSS file into the web page.
4. @import is unique to CSS2.1 and is invalid for browsers that are not compatible with CSS2.1

• Import

• Link

Method 3: In-line style sheet

The third way of css definition: inline style sheet (not recommended-poor reusability)
              1. All tags have a style attribute
              2. The style attribute value is a style list

3. Priority

1. The priority of style sheets

Style sheet priority:
inline style sheet>internal style sheet>external style sheet

2. The priority of the selector

The priority of the
selector id selector> class selector> label selector
Note: The priority of the selector does not follow the principle of proximity.

4. CSS advanced selector

1. Level selector

/* Descendant selector*/
 /*body p{ background: red; }*/ /*Sub-selector*/ /*body>p{ background: pink; }*/ /*/!*Adjacent brother selector* !/*/ /*.active + p{ background: green; }*/ /*/!*Universal selector*!/*/ .active~p{ background: yellow; } <body> 1 2 3 4 <ul> <li> 4 </li> <li>

 5
 </li>
 <li>
 6
 </li>
</ul>

</body>

1. EF descendant selector

E : parent element
F: child element
Select the matched F element, and the matched F element (child element and grandchild element) is included in the matched E element.

2. E>F sub-selector

Select the matched F element, and the matched F element is a child element of the matched E element

3. E+F adjacent brother selector

Select the matched F element, and the matched F element is immediately after the matched E element.

4. E~F Universal Brother Selector

Select the matched F element, and all the matched F elements after the matched E element

2. Pseudo class selector

1、E F:first-child

Select element F of the first child element of parent element E

2、E F:last-child

Element F as the last child element of the parent element

3、E F:nth-child(n)

Select the nth child element F of the parent element E

4、E F:first-of-type

Select the first element of the specified type F in the parent element of E

5、E F:last-of-type

Select the last element of the specified type F in the parent element E

6、E F:nth-of-type(n)

Select the nth element with the specified type F in the parent element E

7、E F:nth-last-child(n)

Select the nth child element from the bottom of the parent element E, and the child element type is F.
This selector is just the opposite of the calculation order of the E:nth-child(n) selector. But the usage method is the same.
Among them: nth-last-child(1) always matches the last element, which is equivalent to last-child.

8、E F: nth-last-of-type(n)

Select the penultimate child element of type F of parent element E

9、only-child

Select the only child element of the parent element E, and the child element type is F

10、only-of-type

Select the only child element of type F from the parent element E.

3. Attribute selector

1 、 E [attr]

Select matching E elements with attribute attr

2、E[attr=val]

Select to match the E element with the attribute attr, and the attribute value is val (where val is case-sensitive)

3、E[attr^=val]

Select the matching element E, and the E element defines the attribute attr, whose attribute value is any string starting with val

4、E[attr$=val]

Select the matching element E, and the E element defines the attribute attr, whose attribute value is any string ending in val

5、E[attr*=val]

Select the matching element E, and the E element defines the attribute attr, and its attribute value contains "val", in other words, the string val matches any position in the attribute value

CSS3 Chapter 1 Review Notes