CSS syntax && common selector

A css syntax:

• Format:
  selector {
  property name 1: 1 attribute value;
  property name 2: attribute value 2;
  ...
  }

Two selector: Filter elements having similar characteristics

* Note: The wording of the property needs attention

Each of the properties need to use a semicolon ";" separated, the last attribute can not add a semicolon ";"

A. Selector Category:

1. Basic selector

1. id selector: selecting a particular element of id attribute value of the recommendation values ​​unique id in an html page.

• Syntax: #id attribute values ​​{}

2. Selector element: selecting elements with the same label name

• Syntax: tag name} {
• Note: id selector element is higher than the priority selector

3. Class selection: Select an element having the same class attribute values.

• Syntax: .class attribute values ​​{}
• Note: Select class selector priority over the selector element

2. Extended selector:

1. Select all the elements:

• Syntax: *} {

2. And set the selector:

• A selector to select {2}

3. Sub Selector: selector element 2 in the filter element selector 1

• Syntax: Selector Selector 2 {1}

4. Parent Selector: filter selector to select parent element 2 is 1

• Syntax: Selector 1> selector {2}

5. Attribute selection: Select element element name, attribute name = attribute value

• Syntax: element name [attribute name = "attribute value"] {}

6. Pseudo-class selection: Select some elements having status

• Syntax: elements: {Status}
• Such as:
• status:
• link: initialization state
• visited: the state of being visited
• active: the state of being accessed
• hover: Mouse suspension

B.css common attributes

1. Font, text

• font-size: Font Size
• color: Text Color
• text-align: their way
• line-height: Row Height

2. background

• background：

3. frame

• border: set the border, in line with property

4. size

• width: width
• height: height

5. Box model: control layout

• margin: Margin
• padding: padding
  - in the case of default margins will affect the size of the entire box
• box-sizing: border-box; set the properties of the box, so that the width and height of the box is the size of the final

• float: float
  - left
  - right