CSS Common knowledge points

1, the introduction of CSS
Cascading Style Sheets

Style Sheets: There are a lot of properties and property values
Cascade: One layer at a layer. Priority level

First: Display the style and HTML separately
The second: HTML properties are very few, CSS inside the style is very powerful

2. CSS and HTML binding method

There are four ways of bonding

The first combination: There is an attribute style in each HTML tag, and the CSS code is written in the style attribute.
Code
<div style= "Color:black;" >aaaaccccbbbb</div>
Format: style= "property Name 1: property value; property Name 2: property value;"

Second combination: Using HTML tags to implement, <style type= "text/css" > CSS code </style>

Code

<style type= "Text/css" >

div {

Background-color:black;
Color:white;
}

p {

Background-color:green;
Color:white;

}
</style>

The third Way of bonding:

First create the CSS file, in the CSS file to write CSS code

Next use HTML tag implementation, <style type= "text/css" > @import url (css path); </style>

Problem: Under some browsers, @import way is problematic the low version browser may not support this way

Fourth combination: The introduction of external resource files, using the header tag is the link tag

First create the CSS file, in the CSS file to write CSS code

Use header tags in HTML link because the external CSS file

<link rel= "stylesheet" type= "Text/css" href= "CSS path"/>

Priority: In general case, from top to bottom, from outside to inside. The priority level is from low to high.

High priority for post-load

Label name {attribute Name 1: attribute value;
Property Name 2: property value;}

3, CSS basic selector

Selector: To change the style of the data in the tag

There are three types of basic selectors

First Type: Tag Selector

Name of the tag as the selector

Code

div {

Background-color:orange;
Color:white;

}

Second type: class selector

Each HTML tag has an attribute Class property, with the value of the class attribute as the selector name

Code

. Shushu {

Background-color:green;
Color:white;
}

The third type: ID Selector

Each HTML tag has a property ID property, with the value of the ID property being the name of the selector

Code

#shushu {
Background-color:green;
Color:white;
}

4. Extension selector for CSS

Association Selector

Nested a tag inside a tag to set the style of nested tags inside a tag

Code <div><p>AAAAAAAABBBBBBBBCCCCCCCCCC</p></div>

Div p {

Background-color:green;
}

Combo Selector

Set different labels with the same style

Code

div,p {
background-color:red;
}

Pseudo element Selector

Some simple, dynamic effects can be achieved.

such as hyperlinks, what are the states

The state of the mouse on the original state (hover) Click on the state click

: link:hover:active:visited

　　　　　　　　　

5. The priority of the basic selector of CSS

Style > ID selector > class selector > tag Selector

6. CSS Box model

First, you need to encapsulate the data into an area, which is typically encapsulated using a div

Border

Using attribute border, unified Settings Border:border-width | | Border-style | | Border-color

There are up and down four sides of the property border-top bottom left right, respectively, set the style of four edges

Inner margin

Using the attribute padding, set the padding:length separately

Outer margin

Using the attribute margin, set the margin:length separately

7, the layout of CSS (floating) the important concept

CSS Properties of float

Left: The position of the div that currently sets this property is located on the right, and the back label floats

Right: The position of the div that is currently set for this property is located on the left, and the trailing label floats

8, CSS Layout (positioning) The important concept

Position:absolute and Relative

Absolute: Dragging an object from the document stream

Relative: object is not dragged from the document stream

　　　　

CSS Common knowledge points