CSS style Sheets

Style sheet:

Role: Beautify the page, page layout.

Classification

Inline, written in the label inside Style= "" Inside the style, the advantage is the control precision, reusability is poor.
Embedded, embedded in the head of the Web page, reusability is high
Outside, the style is written in another file, if you want to attach it directly.

Priority: inline > Inline > External

Selector:

* represents all the elements
General Web pages need to write this style, remove some of the label's own boundaries, auto stands for the center
*{
margin:0px Auto;
padding:0px;
}

Tag Selector: Select the element with the name of the tag.
such as: div{

}

ID selector: Select an element with the ID name of the tag, preceded by the name of the ID, plus #
such as: #d1 {

}

Class selector: Select the element with the class name, preceded by the class name.
such as:. a{

}

Combo selector:

Side-by-side relations: separated by commas, representing juxtaposition.
Descendant relationship: separated by a space, preceded by a space, is the parent element behind it.
Filter relationships: separated by dots.

Style:

1. Foreground and background

Foreground: Refers to text
Font: Whether italic font size is bold or not;

Font-family: Modifying fonts
Font-size: Font Size
Font-style: Font style, italic tilt
Font-weight: Font weight, bold bold

Color: Font Color
Text-decoration: Text decoration, none can go underline
Text-indent: First Line Indent

Background:
Background-color: Background color
Background-image: Background image
Background-repeat: Tiling mode
Background-position: Position of background image
Background-attachment: Fixed mode of background image

Alignment
Text-align: Horizontal Alignment Center Center
Vertical-align: Vertical alignment middle center top bottom Bottom
Line-height: Row Height

2. Borders and Borders

Border:
Border: Width style color;
border-width:1px;
Border-style:solid;
Border-color: #F00;

Boundary:
Outer margin:
Margin: upper right down left;
Margin-top: Top margin
Margin-right: Right margin
Margin-bottom: Bottom Margin
Margin-left: Left Margin

Inner margin:
padding: upper right down left;
Padding-top: Inner Top margin
Padding-right: Inside right margin
Padding-bottom: Inner Bottom margin
Padding-left: Inside left margin

3. List and block
Width: Wide
Height: High

List-style: Position type picture;
List-style-type: List-marked style, none removed
List-style-image: List Picture
List-style-position: Location of list styles

4. Format layout

Position: position, absolute absolute position, relative to the position of the browser boundary, relative relative position relative to where it should have been. Fixed: fix position, it does not scroll with.

After setting the position, you can use the top right bottom the left of the four styles.

float: flow, flow layout.

Two ways: Left flow right flow

After the flow, if you want to add something, you want to truncate the stream: Clear:both

Z-index: The larger the value, the higher the upper

5. Other

Display:none Hide block Display

Visibility:hidden Hidden Visible Display

The difference between display and visibility is that the display hides the same element, and the visibility hides the position of the element, but the content is hidden.

Overflow: Out of range ... Hidden beyond hidden scroll scroll bar appears

Cursor:pointer; Mouse on display (small hands)

Hover: Is not a style, with the ID of the element or class, followed by a colon hover, which represents the mouse on this element to show which styles

Homework:

1. Search: Style sheet make rounded rectangle; browser compatibility processing.
Web templates, Web effects.

2. Layout page: http://www.harvard.edu/
http://www.wharton.upenn.edu/

CSS style Sheets