Css front-end knowledge point summary

Css front-end knowledge point Summary 1. css concept: (CascadingStyleSheet Cascading Style Sheet)

Advantages: 1. Separation of content and performance. (The content of the webpage can be separated from the representation using xhtml)

2. Unified Representation

3. Rich styles

4. Reduce webpage code

5. Use css independent from webpages

2. Selector

1. Tag Selector

Tag name {property: property value ;}

2. class selector

. Class Name {property: property value ;}

<标签名 class="”类名”"> TAG content

3. id Selector

# ID name {attribute: attribute value ;}

4. Union Selector

Tag Name,. Class Name, # ID name {attribute: property value ;}

5. Descendant Selector

The syntax of the descendant selector is to write the outer tag in front, and the inner tag in the back, separated by spaces. When a label is nested, the label in the inner layer becomes the descendant of the outer tag.

P span {attribute: attribute value ;}

Nested tags in a tag.

The descendant of the tag, which is separated by spaces.

6. Intersection selector (Note: There is no space between them). This can be determined by a tag.

Tag name. Class Name {}

7. Global Selector

* {Style ;}

The comments in Css can only be/* comments;

3. Introduce css styles in HTML

1. In-row,

2. embedded,

Write the style in the head

3. Import and link (external css style)

Link:

Import:

The difference between the two is: the link is to load the style first and then load the page, and the import is vice versa.

4. Style priority

Between Basic selectors: ID selector> class selector> label Selector

Between style sheets: Intra-row style> embedded style> external style

Css styles: In the same selector, two identical declarations, and the other one overwrites the previous one,

5. Box Model

Total box model size = border-width-padding + margin + content size (width or height)

6. Floating attributes

Float: Value (left, right, none, inherit (not recommended for IE ))

Another clear attribute used in combination with the float attribute is used to determine that the side of the element does not allow other floating elements. The clear attribute has five values, as shown below:

Float elements are not allowed on the Left.

Right: Float elements are not allowed on the Right.

Both: Float elements are not allowed on the left and right sides.

The default value of None. Floating elements are allowed to appear on both sides.

Inherit: specifies that the value of the clear attribute should be inherited from the parent element. This attribute is not supported by IE and is not recommended. Generally, both attribute values are used when floating is cleared, that is:

Clear: both;

7. Positioning attributes:

1. Absolute Positioning

Position: absolute; z-index: 2; (stack order)

Background-color: background color. Transparent indicates Transparent background color

Background-attachment: determines whether the background image follows the class-scroll type. It is set to fixed as fixed and scroll as scroll;

2. relative positioning: position: relative;

8. display of control elements

1. display Mode: Value

2. handle overflow in the box: overflow: Value

3. Set the cursor shape: cursor: pointer)

4. hyperlink style:

A: link {color: # ff0000;} // unaccessed link

A: visited {color: #00CC00} // accessed Link

A: hover {color: # 000FF} // move the cursor over the link

A: active {color: # FF00FF} // selected Link

The style must be: link à visited à hover à active

Experience: inline labels can be contained in block-level labels and become their sub-elements. In turn, they are not true.

Display: block; convert to block-level elements;