The web starts with getting Started (7)-----CSS

CSS The syntax format

L A CSS rule with "selector" and "format declaration statement" Composition

L Selector: Just choose HTML tag, in other words, add style to that HTML tag

L Format Declaration statement: consists of {}, and is a variety of format statements in {}.

L A format statement consisting of the property name: property value.

L Every format statement must consist of ";" in English.

The property name is the various attributes in the CSS, which are fixed

L attribute value: A property name can go to a different value, this value is not quoted.

L The number units in the CSS, are px, this px can not be omitted.

Selector Selector

1. Basic Selector

1) "*" selector: wildcard character

L Description: Will match all the HTML tags, all the tags will change

L Syntax: *{color:red;}

Note: "*" try to use less, because IE6 does not support

　　　　　　

2) Tag Selector

L Description: Will match the specified HTML tag

L Syntax: Match tag {property}

For example: p{color:red;} All P tags will change

　　　　　　Note: The CSS tag Selector is the same as the HTML tag name, but does not add angle brackets

3) class selector (class selector)

L Description: For a class of HTML markup style, here refers to the "class" is: Each HTML tag has a class attribute, and the value of class is the same. The Class property is a public property, and each HTML tag has a

L Syntax:. Class Name {property}

For example:. myclass{color:red;}

　　　　Note: The name of the class selector must be "." followed by the value of the class property of the HTML tag,

The value of the class attribute of the HTML tag, which cannot begin with a number

Add the attribute class to each tag and specify its name, and all the same name class tags will change

4) ID Selector-----The actual application, is basically not used

L Description: Adds a style to the deaths of the specified ID.

Note: There cannot be more than one ID attribute with the same name in a Web page, and the value must be unique

The id attribute is also a public property, and each HTML tag has a common property

　　　　　　ID attribute is generally used for JS, not to let you add style of the CLSS attribute can only be used for CSS, can not be used for JS

The name of the ID selector, which must begin with "#" followed by the value of the id attribute of the HTML tag

1. Combo Selector

1) Multi-element Selector

L Description: Add the same style to multiple elements, separated by "," between multiple selectors.

L Example: h1,p,div,body{color:red;}

H1,p,. class{color:red;}

2) descendant element selector

L Description: Adds a style to a descendant element of a tag, separated by a "space" between selectors.

L Example: Div. title{color:red;}

Can increase the prefix die h1.title{color:red;}

The following token must be present in the previous tag

3) Child element Selector

L Description: Add style to only one son element of a tag

L Example: div>.title{color:red;}

CSS Notes

CSS Comment:/* Comment content */

HTML comment; <!-html Comment--

CSS Dimension Properties

Width: element widths, must be added PX units

Height: element height

margin:50px Auto; Move the border to achieve the center, 50px represents the distance between the upper and lower, auto for the left and right distance, indicating center

CSS Font Properties

Font–size: Text size: such as: font–size:14px

Font–family: Fonts: such as: font–family: blackbody

Font–style: Italic Value: Italic

Font–weight: Bold value bold such as: Font-weight:bold

CSS Text Properties

Color: Text Colors

Text–decoration: Text decoration line, value none (none), underline (underscore), overline (underline), Line-through (strikethrough)

Text–align: Text alignment, Value: Left,center,right

Line–height: Row height, can use fixed value, also can use percentage

Text–indent: First Line indent:

Letter-spacing: Word Spacing

CSS pseudo-Class selectors: adding styles to Hyperlinks

A hyperlink has 4 states:

Normal state (: Linkl): Before the mouse is placed

Put on status (: hover): Style when mouse is placed on link

Activation status (: Active): Style when the left mouse button is not released

Post-Access status (: visited): status after Link is opened

In normal life, use the following notation to add a different style to the link

The normal state and the access state are merged;

CSS List Properties

List-style: List style, value: none. Remove the symbol in front of the bullet

CSS Border Properties: Each element can be added with a border line

Border-left: Left border line.

Format Border-left: Color of the Linetype line

Line type: None (Wireless), solid (solid), dashed (dashed), dotted (dotted line)

Border-right: Right Border line

Border-top: Top Border line

Border-bottom: Bottom Border line

Border: Add lines to all borders at the same time

CSS Padding properties: The distance between the border line and the content

Note: The width and Height properties that we normally refer to are the widths and heights, without the internal and external margins, border lines

Padding-left

Padding-right

Padding-top

Padding-bottom

Abbreviated form:

padding:10px four sides filled with 10px respectively

padding:10px 20px; up to 10px approx. 20px

padding:5px 10px 20px; 5px, 10px, 20px

padding:5px 10px 15px 20px; order is upper right bottom left

CSS Margin properties: The distance from the edge outward---------margin

CCS Background Properties

Background-color: Background color

Background-image: Background Picture example: background-image:src: Image Address

Background-repeat: Background Tiling method Value: no-repeat (Uneven), repeat-x (horizontal tile), repeat-y (vertical tile)

Background-position: Background positioning

L Format: background-position: Horizontal Orientation Vertical orientation

L background-positio:50px 50px//Background distance container Place left 50px, container top 50px

L percent positioning: background-position:50% 50%

Shorthand method

Background: Background color background tiling paving way

CSS float and Clear

float: Leave the element floating: Left (floating), right (floating)

: Clear Floating Value: Left (clear floating), right (floating)

Meaning: The so-called float is quite a space to raise the element, he does not occupy the original space position

Effect: All elements of a float are present in a single individual

So it solves a function, which is to display all the block elements side by side (normally, a block element takes one line)

CSS Inheritance of

The outer elements of the style, will be the inner elements of the international city. Styles of multiple outer elements, which are eventually superimposed on the inner layer

CSS Precedence

Inline style >id selector >class selector > tag Selector

The web starts with getting Started (7)-----CSS