Css basics,
1. When the same HTML element is defined by more than one style, the priority is as follows:
1) inline style (inside the html element)
2) Internal style sheet (inside the 3) external style sheets
4) browser default settings
2.css rules mainly consist of selectors and one or more declarations.
Example: h1 {color: red; font-size: 14px ;}
If the value is a number of words, you need to quote the value
P {font-family: "sans serif ";}
3. selector Group
Example: share the same declaration for all titles
H1, h2, h3, h4, h5, h6 {
Color: green;
}
4. derived Selector
li strong {font-style: italic;font-weight: normal;}
<P> <strong> bold Chinese, not italic. This rule is not included in the list. </strong> </p>
<Ol>
<Li> <strong> italics. This is because the strong element is located in the li element. </Strong> </li>
<Li> normal font. </Li>
</Ol>
5. id selector (the id attribute can only appear once in each HTML document)
# Red {color: red ;}
# Green {color: green ;}
The p element whose id attribute is red is displayed in red, while the p element whose id attribute is green is displayed in green.
Use the id selector to create a derived Selector
# Sidebar p {
Font-style: italic;
Text-align: right;
Margin-top: 0.5em;
}
The above style will only apply to paragraphs that appear in the element where id is sidebar.
6. class selector
1) the class selector is displayed with a dot
. Center {text-align: center}
All HTML elements with the center class are centered.
2) the class can also be used as a derived selector.
. Fancy td {
Color: # f60;
Background: #666;
}
The table unit with the class name fancy will be orange with a gray background.
7. Attribute Selector
[Title]
{
Color: red;
}
Set styles for all elements with the title attribute
[Title ~ = Hello] {color: red ;}
Set styles for all elements that contain the title attribute of the specified value
[Lang | = en] {color: red ;}
Set the style of all elements that contain the lang attribute of the specified value
input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family: Verdana, Arial;}input[type="button"]{width:120px;margin-left:35px;display:block;font-family: Verdana, Arial;}
Set a style for a form
8. Three Ways to insert a style sheet
External style sheet
<Head>
<Link rel = "stylesheet" type = "text/css" href = "mystyle.css"/>
</Head>
Internal style sheet
<Head>
<Style type = "text/css">
Hr {color: sienna ;}
P {margin-left: 20px ;}
Body {background-image: url ("images/back40.gif ");}
</Style>
</Head>
Inline Style
<P style = "color: sienna; margin-left: 20px">
This is a paragraph
</P>
Multiple styles
If a selector is set by both an external style sheet and an internal style sheet
In this case, the internal style sheet is prioritized, and the internal style sheet does not inherit the external 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
