Home > Developer > Web Develop
0. inline style add CSS
<p style= "color:red;" > This is a paragraph </p>
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Css</title>6 </Head>7 <Body>8 <P><FontColor= "Red">This is a paragraph</Font></P>9 <Pstyle= "color:red;">This is a paragraph</P>Ten <Pstyle= "Color:green;">This is a paragraph</P> One <P>This is a paragraph</P> A </Body> - </HTML>
Add pairs of <style> tags in 1.
<style>
/* element [tag] selector: Select an element or a group of elements */
p {
color:red;
}
</style>
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>As1</title>6 <style>7 /*element [tag] Selector: An element or a set of elements is selected*/8 P{9 Color:Red;Ten } One </style> A </Head> - <Body> - <P>This is a paragraph</P> the <P>This is a paragraph</P> - <P>This is a paragraph</P> - <P>This is a paragraph</P> - </Body> + </HTML>
2. External chain Mode <link> label
<link rel= "stylesheet" type= "Text/css" href= "./css2.css" >
. html
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>External Chain method</title>6 <Linkrel= "stylesheet"type= "Text/css"href= "./css2.css">7 </Head>8 <Body>9 <P>This is a paragraph</P>Ten <P>This is a paragraph</P> One <P>This is a paragraph</P> A <P>This is a paragraph</P> - </Body> - </HTML>
. css
p {
Color:green;
}
3. Priority level
Precedence of <style> and outreach styles:
Look at the order in which they appear, and the final appearance will cover the front
So: The last style that appears will take effect
In-line style priority is the highest among the three
<p style= "Color:blue;" >
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Priority for 3 style usages</title>6 <style>7 P{8 Color:Green;9 }Ten </style> One <Linkrel= "stylesheet"href= "./style.css"> A </Head> - <Body> - <Pstyle= "Color:blue;">This is a paragraph</P> the <P>This is a paragraph</P> - <P>This is a paragraph</P> - </Body> - </HTML>
1, HTML+DIV+CSS 0 Basic Quick start to Production Enterprise Station Video course _8 CSS 3 style reference method <link><style>
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
