CSS style Sheets

CSS: Cascading Style sheets Cascading style sheets It works: Beautify HTML pages

Format: Style name: value; style name: value; style name: value;

Comment Syntax:/* Comment content */

Check the Code press TAB, move the code left, Shift+tab right

(a) Basic:

One: Category:

1. Inline and HTML joint display, the control is accurate, the reusability is poor, the redundancy is many

<p style= "FONT-SIZE:38PX;" > Oh </p>

2. Embedded as a separate area in the Web page, must be inside the head

<style type= "Text/css" >
P works on p in page
{
font-size:108px;
}

</style>

3. Create a new CSS file by building a CSS folder externally

Right-click, CSS style sheet, attach style sheet, find file, General link connection way

Two: Selector

1. Simple Selector

* It's all.

Tag Selector: Use tag name as selector, such as: p{style}
Class selector: Set a uniform class, such as the <p class= "QD" > the selector for class in the style sheet. qd{style}
ID selector: The ID does not allow weight for an ID. <p id= "xx" > #xx{style in style sheet}

The priority of the ID selector is higher than the class selector priority higher than the tag name selector, which overrides the lower priority style, the style sheet takes precedence over the property's

2. Composite Selector

Comma-delimited, side-by-side relationships, with functions such as: #xx, #dd {style}
Separated by a space, the descendant relationship, if P is inside the Div, then with Div p {style}
A dot-delimited, filtered relationship, P.QD {} class filter for P, and the execution style for the P-class QD

(b) Style:

A: Background and prospects
Background-color: #eeeeff; background color
Background-image:url (image/8b322d3f373e4a3fb8a1677e.jpg); background image (default tile):

background-attachment:fixed; Fixed background
Background-attachment:scroll, background and Word scroll together, default is together
background-repeat:repeat; alignment, default tiling repeat
Background-repeat:no-repeat N. A rough Shop
background-repeat:repeat-x; tile Horizontally
background-repeat:repeat-y; tile Vertically
Background-position:center the position in the middle of the uneven spread
Background-position:right bottom; lower right corner
Background-position:right 100px Bottom 100px, from the right 100, from the bottom 100, can be a negative value

Prospect
Font-family: "Official script"; font name (Microsoft Ya hei, song body)
font-size:12px; Font size, pixel (12px,14px,18px) 8em 8 times times The default font can also be used as a percentage
font-weight:100; Whether the Bold,normal is bold
Font-style:inherit; Whether the Italic,normal is tilted
Color: #09F;

Text alignment Decoration
Text-decoration:underline, underline, overline underline, Line-through strikethrough, none is to remove the underscore, you can remove the underline of the hyperlink
Text-align:center; Horizontal alignment
Vertical-align:middle; vertical alignment Top.middle,bottom
Text-indent: First line indent, if the font is 14px, indent two bits of 28px
Line-height: line height is typically 1.5 to twice times the font size

Two: Borders and Borders

1.border Class: Border

BORDER:5PX solid blue; 5 pixel thickness, style is solid line, color is blue;
border-width:5px; border-style:double;border-color:red; This is a separate set of weights, styles and colors
border-top:5px solid red; Set the border-bottom:5px solid red above; set the following

2.margin class: Margin

margin:10px; The four margins are 10px; margin-top:10px; Right,left,bottom, upper right, lower left
margin:10px 0px 10px 0px; the order is clockwise: upper right bottom left.

3.padding class: Inner margin

padding:10px 0px 10px 0px; clockwise, upper right down left

Three: List and block

Default layout mode, flow layout, top to bottom, left to right, relative flow layout

Width,height, available only when the layout is absolutely positioned (left,top,right,bottom)

To the OL list:
List-style:none; To remove an ordered number circle; a circle, a disc dot.
List-style-image:url (images/8.jpg); list picture
List-style-position:outside; Symbol on margin, inside symbol within margin
Margin padding default is margin and spacing
List-style-type:disc type

Four: Format and layout

The layout of the most commonly written on the top:

*
{
margin:0px Auto;
padding:0px;
}

Let all the outer and inner margins be 0, and the Auto Center is added.

1.position:
Obsolute; Absolute positioning, placed in the first screen of the page that position, followed by scrolling
The outer layer is not position=absolute or relative it is positioned according to the browser border
If the outer layer has position=absolute or relative, it is positioned according to the bounding rectangle of the outer element.

Fixed in a position on the page, scrolling the screen, it does not move, targeting the browser border

The normal one div takes the default line, determines where it should be, and if position is not set, Left,right,top,bottom does not work
Relative, which is equivalent to moving before the position should be in the upper left corner

2.z-index:9; Z axis, control who is in the upper, big pressure small

3. Overflow overflow: Out of range
Hidden hidden scroll scroll bar appears

4.float: Floating direction, the original default line, float can be placed in a row of multiple
Float:left floats from the left

5.clear:both truncate stream plus line <div style= "Clear:both" > Truncate floating Stream

CSS style Sheets