Summary of CSS front-end knowledge points (must read)

1. The concept of css: (Cascading Style Sheet)

Advantages: 1. Separation of content and presentation. (Using xhtml, the content of the web page can be separated from the presentation)

2. Unified representation

3. Rich styles

4. Reduce web page code

5. Use CSS that is independent of the web page

2. Selector

1. Tag selector

Tag name {attribute:attribute value;}

2. Class Selector

.class name{attribute:attribute value;}

<Tag name class="class name">Tag content</Tag name>

3. ID selector

#ID name{attribute:attribute value;}

4. Union Selector

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

5. Descendant Selector

The descendant selector is written by writing the outer tag first and the inner tag after, separated by spaces. When tags are nested, the inner tags become descendants of the outer tags.

P span{attribute:attribute value;}

The <span> tag is nested inside the <p> tag.

The <span tag is a descendant of the <p> tag, and the two are separated by a space.

6. Intersection selector (note: there is no space between intersection selectors) This can determine a certain tag

Tag name.Class name{}

7. Global Selector

*{style;}

Comments in CSS can only be in the form of /* comment */;

3. How to introduce CSS styles into HTML

1. Inline style,

<h1 style="font-size:18px"></h1>

2. Embedded,

Write the style in the head

<style type="text/css">

H1{font-size:18px;}

</style>

3. Import and link (external css style)

Linked:

<link href=”style.css” rel=”stylesheet” type=”text/css”/>

Import:

<style type="text/css"> @import"style.css";</style>

The difference between the two is that the link loads the style first and then the page, while the import is the opposite.

4. Style Priority

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

Between style sheets: inline style > embedded style > external style

Between Css styles: In the same selector, if there are two identical declarations, the latter one will overwrite the previous one.

5. Box Model

The total size of the box model = border-width-padding + margin + content size (width or height)

6. Floating properties

Float: value (left, right, none, inherit (not supported by IE, not recommended))

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

Left does not allow floating elements on the left side

Right: No floating elements are allowed on the right side

Both: floating elements are not allowed on the left or right side

None is the default value, allowing floated elements to appear on both sides

Inherit: Specifies that the value of the clear attribute should be inherited from the parent element. IE browser does not support it and is not recommended. Generally, when clearing floats, the both attribute value is often used, that is:

Clear:both;

7. Positioning attributes:

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 scrolls with the content. Set it to fixed for fixed and scroll for scrolling.

2.Relative positioning: position:relative;

8. Control element display mode

1. Display mode display: value

2. Handle overflow in the box: overflow: value

3. Set the cursor shape: cursor: pointer (little hand)

4. Hyperlink style:

a:link{color:#ff0000;} //Unvisited link

a: visited{color:#00CC00}//Visited links

a:hover{color:#000FF}//Move the mouse pointer to the link

a:active{color:#FF00FF}//Selected link

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

Experience: Inline tags can be included in block-level tags and become their child elements, but the reverse is not true.

display:block; Convert to a block-level element;

The above summary of CSS front-end knowledge points (must-read) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/izhongwei/archive/2016/06/09/5572443.html