Summary of knowledge points about CSS Frontend

Below for everyone to bring a CSS front end knowledge Point summary. Content is very good, now share to everyone, but also for everyone to make a reference.

1, the concept of CSS: (cascadingstylesheet cascading style sheet)

Pros: 1. Separation of content from performance. (with the content of the Web page XHTML can be separated from the appearance)

2. Appearance unification

3. Rich Style

4. Reduce the page code

5. Use Web-independent CSS

2. Selector

1. Tag Selector

Tag name {attribute: property value;}

2. Class Selector

. class Name {attribute: property value;}

< tag name class= "class name" > label content </tag name >

3. ID Selector

#ID名称 {property: property value;}

4. Set Selector

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

5. Descendant Selector

The descendant selector is written in front of the outer label, with the inner label written in the back and separated by a space. When a tag is nested, the inner label becomes the descendant of the outer label.

P span{Property: property value;}

<p> tag nested <span> tags.

The <span tag is a descendant of the ><p> tag, separated by a space

6. Intersection selector (Note: There is no space between the intersection selectors) This can be determined to be a certain label

Label name. Class Name {}

7. Global Selector

*{style;}

Comments in CSS can only be/* comments */form;

3. Ways to introduce CSS styles in HTML

1. In-line,

<H1 style= "font-size:18px" >
2. Embedded,

Write a style in the head

<style type= "Text/css" >H1{font-size:18px;}</style>
3. Import and link, (external CSS style)

LINK Type:

<link href= "Style.css" rel= "Stylelensheet" type= "Text/css"/>
Import Type:

<style type= "Text/css" > @import "style.css";</style>
The difference is that the link is loaded before loading the page, the import is the reverse

4. Priority of the style

Between basic selectors: ID selector > class selector > tag Selector

Between style sheets: inline style > Inline style > External style

Between CSS styles: in the same selector, two identical declarations, and the latter declaration overrides the previous one,

5. Box model

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

6. Floating Properties

Float: Value (left,right,none,inherit (ie does not support deprecated))

Another property that is used in conjunction with the Float property is clear, which determines that the side of the element does not allow other floating elements, and the value of the clear property is 5, as follows:

Left does not allow floating elements

Right: Floating elements are not allowed on the left

Both: Floating elements are not allowed on left and right

None default, allowing floating elements to appear on both sides

Inherit: Specifies that the value of the clear attribute should be inherited from the parent element, IE is not supported and is not recommended for use. Typically used to clear floats, the use of the both property value is more common, namely:

Clear:both;

7. Positioning Properties:

1. Absolute positioning

Position:absolute; Z-index:2; (stacking order)

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

Background-attachment: Determines whether the background image follows the class-volume scrolling, is set to fixed, scroll for scrolling;

2. Relative positioning: position:relative;

8. Control element Display mode

1. Display mode displays: value

2. Handling overflow in the box: overflow: value

3. Set the shape of the cursor: cursor:pointer (small hand)

4. Hyperlink style:

A:link{color: #ff0000;}//Links not visited

A:visited{color: #00CC00}//visited link

A:hover{color: #000FF}//The mouse pointer over the link

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

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

Experience: An inline tag can be contained in a block-level tag and become a child of its own, which in turn is not true.

 Display:block; Convert to block-level elements;