HTML Basics (iii)--CSS style sheet

Source: Internet
Author: User
Tags tag name

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

(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.

Note: You do not need to write a style tag in a CSS file

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

Note: The margin and spacing are removed first.

(ii) selectors

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

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

Note: The class selector can be overlaid with the tag Selector to show different effects.

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

NOTE: The ID selector can be superimposed with the tag Selector to show different effects.

<div id= "style name" >

4. Composite Selector

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

(2) separated by a space, indicating descendants.

(3) filter ".".

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 ) is useful only in the case of absolute coordinates.

The CSS style sheet code displays:

CSS file code:

1 @charset "Utf-8";2 /*CSS Document*/3 */*all labels work, margins and spacing are set to 0px*/4{5 margin:0px;6 padding:0px;}7 P,span/*write a tag name directly, indicating that all P tags perform this style.*/8{9 Background-color:#F6C;Ten Color:#0F0;} One P.SP A{ - Background-color:#FF0; - Color:Red; the font-size:36px;} - . Main/*starting with., use class to refer to this style sheet*/ -{ - Height:50px; + width:300px; - Background-color:#0FF; + font-size:45px;} A . Main P/*indicates that a label with Class=main is used to execute this style if there is a P tag in the*/ at{ - width:400px; - font-size:36px;} - #main/*start with # To reference this style sheet using the ID selector*/ -{ - Height:60px; in width:500px; - Background-color:#60C; to font-size:36px;}
View Code

HTML file Code:

1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title>Untitled Document</title>6 <styletype= "Text/css">7 8 </style>9 <Linkhref= "Untitled-1.css"rel= "stylesheet"type= "Text/css" />Ten </Head> One  A <Body> - <Divstyle= "Background-color: #0F0">1234567</Div> - <P>Spring has come.</P> the <P>The flowers are open and the grass is green.</P> - <Pclass= "SP">Goose Goose Goose, the song item to the heavenly songs.</P> - <spanclass= "Main">Hoe wo Day Copse<P>Sweat wo xia tu</P></span> - <Pclass= "Main">The day depends on the mountain</P> + <PID= "Main" >Moon Light in front of the bed</P> - <span>Suspected ground frost.</span><BR/> + </Body> A </HTML>
View Code

Run effect display:

HTML Basics (iii)--CSS style sheet

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.