Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
