Home > Developer > Web Develop
1. CSS Overview
CSS refers to cascading style sheets
CSS style sheet greatly improves productivity
1) CSS base syntax:
selector{
Propery:value
}
Example 1:h1{color:red;font-size:14px;}
After the property is greater than 1, the attributes are separated by semicolons, and if they are greater than 1 words, quotation marks are required: p{font-family: "Sans serif";}
2) CSS Advanced syntax
Selector group: h1,h2,h3,h4,h5,h6{color:red;}
Inheritance: body{
Color:green;
}
Example:
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <Linkhref= "1.css"type= "Text/css"rel= "stylesheet">7 </Head>8 <Body>9 <H1>Ten This is the style of a H1 tag One </H1> A <H2> - This is the style of a H2 tag - </H2> the <a> - This is a style of a tag - </a> - <H3> + This is the style of a H3 tag - </H3> + </Body> A </HTML>
One of 1.css:
1 H1, A, H2 {2 color:blue; Font-size:50px; 3 }4body{5 color:red; 6 }2. CSS derivation Selector
Derived selectors: Define styles by their contextual relationships in their positions
1 <Body>2 <P><Strong>P Tags: Hello css</Strong></P>3 <ul>4 <Li><Strong>Li Tags: hello css</Strong></Li>5 </ul>6 </Body>
Corresponding CSS file:
1 Li strong{2 color:blue; 3 }4strong{5 color:chartreuse; 6 }3. CSS ID Selector
The ID selector can specify a unique style for an HTML element labeled with an ID, and the ID selector is defined with "#".
The most common way is to use the ID selector to create a derived selector.
<Body> <a>Normal A-label</a> <PID= "pid">Hello CSS<ahref= "Www.jikexueyuan.com">A tag in the PID</a> </P></Body>
For the CSS file:
1 #pid {2 color:chartreuse; 3 }4#pid a{5 color:Brown; 6 }4. Class Selector
Class selector displays at one point
Class can also be used as a derived selector
1 <Body>2 <Pclass= "Pclass">Class type</P>3 <Pclass= "Pclass"><a>This is a label in a class type</a></P>4 </Body>
For the CSS file:
1 . Pclass {2 color:red; 3 }4. Pclass a{5 color:blue; 6 }5. Attribute Selector
Styling an HTML element with a specified property
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <styletype= "Text/css">7 [title]{8 Color:Blue;9 }Ten [Title=te]{ One Color:Rosybrown; A } - </style> - </Head> the <Body> - <Ptitle= "T">Property Selector</P> - <Ptitle= "TE">Properties and Value selectors</P> - </Body> + </HTML>
[HTML] Learning notes-CSS Getting Started basics
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
