Summary of knowledge points about css front-end

The following brings you a summary of CSS front-end knowledge points. The content is quite good, so I will share it with you now and give it as a reference.

1. The concept of css: (CascadingStyleSheet)

Advantages: 1. Separation of content and performance. (The content of the web page can be separated from the presentation by using 5. Use css independent of the web page

##2. Selector

##1. Tag selector

Tag name{{ Attribute: Attribute value;｝

2. Class selector.Class name｛Attribute: Attribute value;｝

3. id selector

#ID name｛Attribute: attribute value;｝

4. Union selectorTag name,.Class name,#ID name｛Attribute:Attribute value;｝

5. Descendant selectorThe descendant selector is written by writing the outer label in front and the inner label in the back. Separate with spaces. When tags are nested, the inner tag becomes the descendant of the outer tag.

P span{ attribute: attribute value;}

tag is nested within the tag.

tag, separated by spaces

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

Tag name. Class name｛｝

7. Global selection *{style;}

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

3. Introduced in HTML Methods of css style1. Inline,

<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 type and link type, (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 between the two is: the link loads the style first and then the page, and the import is the other way around

4. Priority of styles

Between basic selectors :ID selector>Class selector>Tag selector

Between style sheets: Inline styles>Inline styles>External styles

Between Css styles: In the same In the selector, if there are two identical statements, the latter statement will overwrite the previous statement,

5. Box model

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

6. Float attribute

Float: value (left, right, none, inherit (not supported by IE and not recommended) )Another attribute clear used in combination with the float attribute is used to determine which side of the element does not allow other floating elements. The clear attribute has 5 values, as follows:

Left does not allow floating elements on the left side

Right: does not allow floating elements on the right side Both: does not allow floating elements on the left and right sides

None default value, allowed Floating elements 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 used to clear floats, the both attribute value is often used, that is:

Clear:both;

7. Positioning attribute:

1. Absolute positioning

position:absolute; z-index:2;(Stacking order)

background-color: background color. Transparent represents a transparent background color

background-attachment: Determine whether the background image scrolls with the class content, set to fixed to be fixed, scroll to scroll; 2. Relative positioning: position: relative ;

8. Control element display mode

1. Display mode display: value

2. Process the elements in the box Overflow: overflow: value

3. Set the shape of the cursor: cursor:pointer (little hand)4. Hyperlink style: a:link{color:#ff0000;} //Unvisited link

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

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

a:active{color:#FF00FF}//The selected link

Defining style must Yes: linkàvisitedàhoveràactive

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

display:block;convert to block-level elements;

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

The above is the detailed content of Summary of knowledge points about css front-end. For more information, please follow other related articles on the PHP Chinese website!