CSS style Sheets

CSS ( cascading Style Sheet , overlay style sheet), the function is to beautify HTML Web page.

/ * Comment Area * /This is the comment syntax

One, style sheet

(1) Classification of style sheets

1. Inline style sheet

combined with HTML display, the control is accurate, but reusability is poor, redundancy is more.

Example:<p style= "FONT-SIZE:14PX;" > Inline style sheets </p>

2. inline style sheet

embedded in a Web page as a separate area, it must be written in the head tag.

　　<style type= "Text/css" >

　　P//Format works on p tags

　　{

Style

　　}

　　</style>

3. external style sheet

Create a new CSS file to place the style sheet. If you want to call a style sheet in an HTML file, you need to right-click in the HTML file to →css the style sheet → attach the style sheet. The link connection method is generally used.

Some labels have default margins, which are usually removed when writing style sheet code (and other styles can be set), as follows:

<style type= "Text/css" >

*//format works on all labels

{

margin:0px;

padding:0px;

}

</style>

Selector Selector

1, Tag Selector. Use the tag name to make the selector.

<style type= "Text/css" >

P//format works on P tags

{

Style

}

</style>

2, class selector. It's all "." Beginning.

　　

<style type= "Text/css" >

. Main/* Define Style */

{

height:42px;

width:100%;

Text-align:center;

}

</style>

<body>

<div class= "main" > <!--call class style--

</div>

</body>

3. ID selector. Start with "#"

　　<div id= "style name" >

<style type= "Text/css" >

#main/* Define Style */

{

height:42px;

width:100%;

Text-align:center;

}

</style>

<body>

<div id= "main" > <!--Call ID style-

</div>

</body>

4, composite selector.

1) separated by "," to indicate juxtaposition .

　<style type= "Text/css" >

P,span/* tag P, span the same style */

{

Style

}

</style>

2) separated by a space, indicating descendants.

　　<style type= "Text/css" >

. Main P/* finds a label that uses the style "main", which uses the style in the P tag of the label */

{

Style

}

</style>

3), filter ".".

　<style type= "Text/css" >

P.SP/* The label of the class= "SP" in the label P, perform the following style */

{

Style

}

</style>

Style propertiesbackground and Prospect

/ * background color, style sheet high priority * /

Background-image:url (path); /* Set background picture (default) */

background-attachment:fixed; /* Background is fixed, does not scroll with the font */

Background-attachment:scroll; /* Background scrolls with font */

Background-repeat:no-repeat; /*no-repeat, uneven paved, repeat, tiled, repeat-x, horizontally tiled, repeat-y, tiled vertically */

Background-position:center; /* Background image is centered, repeat must be "no-repreat" * * When setting the background map position

Background-position:right top; /* Background map to the upper right corner (bearing can change itself) */

Background-position:left 100px top 200px; /* 100 pixels from the left, 200 pixels from the top (can be set to a negative value) */

　Font

　　Font-family: "New song Body"; /* Font. Commonly used Microsoft Ya hei, song body. */

font-size:12px; /* Font size. Common pixels 12px, 14px, 18px. You can also use "em", "2.5em" that is: 2.5 times times the default font. You can also use percentages */

Font-weight:bold; /*bold is bold, normal is OK */

Font-style:italic; /* tilt, normal is not tilted */

Color: #03C; /* Color */

Text-decoration:underline; /* underline, overline is underlined, Line-through is strikethrough, none is remove underline */

Text-align:center; /* (Horizontal alignment) center aligned, left aligned, right justified */

Vertical-align:middle; /* (vertical alignment) is centered, top is aligned to the front, and bottom is the bottom alignment. Generally set the line height after use. */

text-indent:28px; /* First Line Indent */

line-height:24px; /* Row height. Typically 1.5~2 times the font size. */

Display:none; /*none, do not display, Inline-block, display as block, do not wrap, width height can be set, block, display as block, wrap, inline, effect with span label, do not wrap, wide height is not set. */

Visibility:hidden; /* Visibility. Hidden, hiding but occupying space; visible, showing. */

borders and Borders

Border (table border, style, etc.), margin (out-of-table spacing), padding (content and cell spacing)

BORDER:5PX solid blue; /* Four border: 5 pixels wide, solid line, blue (equivalent to the following three lines) */

border-width:5px;

Border-style:solid;

Border-color:blue;

BORDER-TOP:5PX solid blue; /* Top border: 5 pixels wide, solid line, blue (write as above) */

BORDER-BOTTOM:5PX solid blue; /* Bottom border: 5 pixels wide, solid line, blue (write as above) */

BORDER-LEFT:5PX solid blue; /* Left frame: 5 pixels wide, solid line, blue (write as above) */

BORDER-RIGHT:5PX solid blue; /* Right border: 5 pixels wide, solid line, blue (write as above) */

margin:10px; /* The outer border is 10 pixels wide. Auto, centered. */

margin-top:10px; /* The upper border is 10 pixels wide and the other three-side borders are similar */

margin:20px 0px 20px 0px; /* Upper-right-bottom-left, four-sided border clockwise order */

padding:10px; /* Content and border have a four-sided spacing of 10 pixels */

padding-top:10px; /* The top spacing between the content and the border is 10 pixels; other three-side spacing is similar */

padding:20px 0px 20px 0px; /* up-right-bottom-left, content and border with four-sided spacing in clockwise order */

lists and squares

　　width, height, (top, bottom, left, right) are only useful in the case of absolute coordinates

List-style:none; /* Cancel Serial number */

List-style:circle; /* number becomes circle, style is unordered */

List-style-image:url (image address); /* Picture do serial number */

List-style-position:outside; /* Serial number outside the content */

List-style-position:inside; /* Serial number with content together */

CSS style Sheets