CSS style Sheets

CSS refers to the cascading style sheet (Cascading style sheets), in order to beautify the HTML interface, improve productivity.

syntax structure:

Cases:

There are 3 basic forms, in which the inline style has the highest priority of execution.

1. External style sheet
2. Internal style sheet (inside the
3. Inline style (inside HTML elements)

1, inline style sheet

Write the contents of style= "", "" in each label <> inside, although the control is accurate, but the reusability is poor if a lot of use will write many more code

2, internal style sheet

Must be located within

3, external style sheet

must also be located in , that is, the internal style sheet in the HTML page to build a. css end of the file, in the head to write a <link> link to connect this CSS file in, Compared to the internal style sheet to the system to perform a step more to find files, the href path must be written here, generally this CSS file to be placed in the HTML folder. The advantage of this writing is that the HTML page will not see too many CSS code, appear neat.

__________________________________________________ Split Line __________________________________________________________

Selector:

Because there will be more than one HTML page <div>,<p> and other tags, if we blindly use div{} to write style, then all the div is the same, if you use inline style and then change the individual div css is not good to make. So here we also classify class and ID in the label such as: <div class= "Div1" > a </div> <div id= "ID1" > two </div>

If we want to change a div style, we can . Div1{style} Select class to use . The ID does not allow duplicates.

If you want to change the div style of two, you can #id1{style} Select ID to use #

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

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

__________________________________________________ Split Line __________________________________________________________

Form:

<table></table> Insert a table <tr></tr> represent a row where you insert <td></td> cells

There's no border here.

Add Border border= "1"

If you want to get through the horizontal colspan= "", Vertical row rowspan= "" Write the number of rows

__________________________________________________ Split Line __________________________________________________________

Reference:

(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