CSS style Sheets

I. Classification of Style sheets

1. Inline

Syntax: The Style property in HTML tags

Features: Control is relatively clear, only the current label function, redundancy

2. Inline

Syntax: Head tag in <style></style>

Features: Work on the current page, control the entire page style unity

3. External

Syntax: separate. CSS files that need to be appended to the HTML file

Second, selector

1. Basic Selector

ID selector:

Syntax: #标签的id {style attribute: style value; style attribute: style value;}

Features: Control is clear, priority is high

Class selector:

Syntax:. class Name {style attribute: style value; style attribute: style value;}

Features: not restricted by label type, priority is lower than ID selector

Tag Selector:

Syntax: Tag name {style attribute: style value; style attribute: style value;}

Features: Lower priority than the normal class selector

2. Extended Selector

Tie Relationship:

Syntax: Basic selectors are separated by commas

Features: Any one of the selectors can get the appropriate style

Descendant relationships:

Syntax: Basic selectors are separated by spaces

Features: can get style as long as the descendant relationship is satisfied (not just a child relationship) further filtering control of the basic selector

Class Filter:

Syntax: Tag name. class Name {...} . class name. class Name {...}

Features: The former is screened, the middle can not add space

Three, style properties

1. Foreground and background

Prospect:

font-family size color weight style text-decoration

Text-align vertical-align

Line-height Indent

Background:

Background color: Background-color

Background Image: Background-inage:url ()

Background-repert:no-repeat Repeat Repeat-x repeat-y

Background-position:top Right Bottom Left

Background-position:top Right
Background-position:top 10px right 20px;

Background-attatchment

2. Borders and Borders

Border (tabular model):

border: Thickness style color

Border-width Border-style Border-color

Border-top: Thickness style color

Border-top-width Border-top-style Border-top-color

Outer margin:

Margin on the right bottom left:

Margin-top margin-right Margin-bottom Margin-left

Margin auto--Layout Center

Inner margin:

Padding upper right Down left

3. List and block

List (ul ol Li):

List-style-type:none Low-alpha

List-style-position

List-type-image

Box:

Width height

Display overflow

span default to width height no effect, need to match display:inline, div default width and height function,
But it doesn't work if its display:inline is wide and high.

4. Format and layout

Flow-Through layout:

Float:left/right Clera:both

Element juxtaposition

Element nesting

Positioning layouts:

Position:fixed/absolute/relative;top Right Bottom Left

The difference between three kinds of positioning methods

①fixed--coordinates with the current browser

②relative--coordinates where the element should have been

③absolute:

No position (absolute relative) style in peripheral elements--left with browser border

If there is a position (absolute relative) style in the periphery-the coordinate layout of the element closest to its perimeter

Four, style sheet application

Contact Layout Page-Wharton School Harvard

Look at other people's layouts

Collect Web Template picture material

CSS style Sheets