CSS style Sheets

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

One, style sheet

(i) 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= "Texr/css" >

*/* Format works on all tags */>

{

margin:0px;

padding:0px;

}

</style>

(ii) selectors

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

<style type= "Texr/css" >

P/* Format works on p tags */

{

Style

}

2.class The selector. It's all about "." start.

<style type= "Text/css" >

. Main/* Define Style */

{

Style

}

</style>

<boday>

<div class= "Main" >

</div>/* Call class style */

</body>

3.ID The selector. Start with "#" .

<style type= "Text/css" >

#main/* Define Style */

{

Style

}

</style>

<boday>

<div id= "Main" >

</div>/* Call ID Style */

</body>

4. Composite Selector

(1) separated by "," to indicate juxtaposition.

<style type= "Text/css" >

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

{

Style

}

</style>

(2) separated by a space, indicating descendants.

<style type= "Text/css" >

. Main P/* Find the label that uses the style main, and use this style with the P label in 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>

Two, style properties

(i) Background and prospects

1. Background:

2. foreground font:

(ii) Borders and borders

Border (table borders, styles, etc.), margin (off-table spacing). padding(content and cell spacing).

(c) List and block

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

linked to style :

A:link The hyperlink is pre-state.

a:visited Post-click status of Hyperlinks

a:hover when hovering over a hyperlink

a:active When you click the hyperlink

When defining these states, there is a sequence l v H a

CSS style Sheets