Home > Developer > Web Develop
First, style sheet classification
1. Inline style sheet
<p style= "FINT-SIZE:24PX;" > style settings directly inside the label </style>
2. Inline style sheet
<style type= "Text/css" >
P/* is named after the P tag, and all P tags will execute this style */
{
Style
</style>
3. External style sheet (most commonly used)
Create a new CSS file, you need to call the CSS style sheet in the HTML file, you need to click the right--CSS style in the HTML file-attach the style sheet. Links with Link
*/* Remove the spacing, margin *,
{
margin:0px;
padding:0px;
}
Second, selector
1. Class selector can use multiple
<style>
. Main
{
height:100px;
width:100%;
Text-align:center;
}
</style>
<body>
<div class= "Main" ><div> Call class style sheet
</body>
</body>
2. The ID selector can only be used once
<style>
#a
{
width:100%;
height:100px;
Backgroun-color:red solid 2px;}
</style>
<body>
<div id= "a" ><div>
</body>
3. Composite Selector
1) P,span Two kinds of labels use the same style
{
Style
2). Main p is also used when referring to the P label in the. Main style label. Main style
<div class= "main" ><p></p></div> p tag with div tag attribute
3) P.SP (SELECT) use "class=" SP to perform this style within all P tags
<p class= "SP" ><p> use label on this item
<p></p> do not use the label
Three, style properties
1. Background and Prospect
2. Font properties
3. Outside connection, border
4. List and box
5. Linked style:
A:link hyperlink is pre-state
a:visited Hyperlink post-click Status
A:hover Hover over hyperlinks
A:active When you click the hyperlink
When defining these states, there is a sequence L v h a
For example Baidu to do a bit
A:link
{
Text-decoration:none;
Color: #000;}
a:visited
{
Text-decoration:none;
Color: #000;}
A:hover
{
Color: #F00;
Text-decoration:underline;}
A:active
{
Text-decoration:underline;
Color: #FF0;}
CSS style sheet Basic concepts
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
