Home > Developer > Web Develop
One, css:cascading style sheet-cascading style sheet, its role is to beautify the HTML page.
Style sheet Categories: inline style sheets, inline style sheets, external style sheets
1. Inline style sheet
Combined with HTML display, the control is accurate, but reusability is poor, redundancy is many.
For example: <p style= "Font-size:14px;color: #000;" > Inline style Sheets </p>
The red part is the inline style sheet, and the style is added.
2. Inline style sheet
embedded in a Web page as a separate area, it must be written in the head tag.
Example: <style type= "Text/css" >
P//format has effect on p tag/* style sheet named with tag name will be executed for all such tags */
{
Style
}
</style>
3. External style sheet
Use: Create a new CSS file to put the style sheet. If you want to call a style sheet in an HTML file, you need to right-click the →css style → attachment style sheet in the HTML file. The link connection method is generally used.
★ Some tags have default margins, generally write style sheet code will be removed first, as follows:
<style type= "Text/css" >
*//For all labels */* Remove margins and spacing for all labels */
{
margin:0px;
padding:0px;
}
</style>
Second, selector
1. Tag Selector
<style type= "Text/css" >
P--------------Tag Selector//function on P tag
{
Style
}
2, class selector. ---are all based on "." Beginning.
<style type= "Text/css" >
. Main--------------------/* Define Style */-----class Selector
{
height:42px;
width:100%;
Text-align:center;
}
</style>
<body>
<div class= "main" >----------------call class style, can refer to multiple difference ID selectors
</div>
</body>
3. ID selector. Start with "#".
<style type= "Text/css" >
#main--------------------/* Define STYLE */-----ID Selector
{
height:42px;
width:100%;
Text-align:center;
}
</style>
<body>
<div id= "main" >----------------call class Style, can only be referenced once, difference with class selector
</div>
</body>
4. Composite Selector
1), separated by ",", indicates the juxtaposition
<style type= "Text/css" >
P, Span--------------performs the same style for both label P and span
{
Style
}
</style>
2), separated by a space, indicates descendants.
<style type= "Text/css" >
. Main P----------------class label →p label//first find the label referring to "main", which works on the P tag in the label.
{
Style
}
</style>
3), filter "."
<style type= "Text/css" >
P.sp----------------p tags → class tags//First find the P tag, for the P tag reference class= "SP" of the label function, perform the following style
{
Style
}
</style>
Third, Exercise:
Html:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style>--------------- inline style sheets
*------------------------------------- to remove margins and spacing for all labels
{
margin:0px;
padding:0px;
}
</style>
<link href= "Yangshi1.css" rel= "stylesheet" type= "Text/css"/>----------------------------- referencing an external style sheet
<body>
<div>
<p style= "FONT-SIZE:24PX; Font-weight:bold; Background-color: #FFC; Color: #F00; Text-align:center; " > Hello, Welcome to browse! </p>--------Inline style sheet
</div>
<div class= "Shi" >------------------Reference class selector
<p> Write a poem </p>
<p class= "Shineirong" > Moon light </p>----------before bedclass selector can be referenced multiple times
<p class= "Shineirong" > Ha ha ha haha </p>----------class selector can be referenced multiple times
<p class= "Shineirong" > Ha ha ha haha </p>
<p class= "Shineirong" > hahaha haha haha </p>
</div>
<div id= "GE" >-------------Reference ID selector, reference only once
<p> Sing a song </p>
</div>
<div id= "WU" >
<p> a Dance </p>
</div>
<p><a href= "http://www.baidu.com" target= "_blank" > Baidu </a>----------Hypertext Links
</p>
</body>
External style sheet:
@charset "Utf-8";
/* CSS Document */
<style type= "Text/css" >
p{---------------------------Tag Selector
margin:0px;
padding:0px;
}
. shi{----------------------------class Selector
height:200px;
width:200px;
Font-weight:bold;
Color: #F03;
Background-color: #CCC;
Text-align:center;
}
#ge {--------------------------ID Selector
margin:0px 290px 0px;
height:200px;
width:300px;
Font-weight:bold;
Color: #F03;
Background-color: #0FF;
Text-align:center;
line-height:200px;
}
. shineirong{
font-size:14px;
Color: #30F;
Font-weight:bold;
line-height:40px;
Vertical-align:middle;
}
#wu {
Height:auto;
Width:auto;
font-size:24px;
Font-weight:bold;
Text-align:center;
margin:10px;
Background: #0F0;
}
a:link{--------------------hyperlink style, no click, show Style
Color: #000;
Font-weight:bold;
font-size:35px;
Text-decoration:none;
}
a:visited{----------------------style when access is complete
Color: #000;
}
a:hover{----------------------The mouse is pointing to the hover style
Color:yellow;
}
a:active{-----------------------style when clicked
Color:green;
}
</style>
HTML-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
