Home > Developer > Web Develop
In order to make the style of the Web page more rich, but also in order to let the content and style of the page can be split apart, CSS is born from this idea, CSS is cascading style Sheets acronym, meaning cascading style sheet. With most of the css,html in the style of the label is discarded, HTML is only responsible for the structure and content of the document, the form of expression to the css,html document becomes more concise.
CSS Basic syntaxCSS is defined by:
Selector {property: Value; property: Value; property: Value;}
Selectors are names that associate styles and page elements, and properties are style properties that you want to set, with one or more values for each property. Between a property and a value with a colon, a semicolon between a property and a value and the next attribute and value, the last semicolon can be omitted, and the code example:
div{ width:100px; height:100px; background:gold; }
Css的三种选择器
第一种：
标签选择器：标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。(受局限型比较大)
例如：
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0">6 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">7 <title>Document</title>8 <style>9 /*The First selector: Tag Selector, will select all the same type of labels on the page, the limitations of large, easy to accidentally*/Ten Div{ One Color:Red; A font-size:30px; - } - </style> the </Head> - <Body> - <Body> - <Divclass= "Bold">This is the first Div.</Div> + </Body> - </Body> + </HTML>
The second type:
Class selector: Select an element through the class name, a class can be applied to multiple elements, one element can also use multiple classes, the application is flexible, reusable, is the most applied in the CSS of a selector.
For example:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style> /*Second selector: class selector, using the most selectors, a class can be used on multiple labels, a label can be used in multiple classes (classes separated by a space), use very flexible*/. Bold{Font-weight:Bold; }. Indent{text-indent:50px; } </style></Head><Body> <Body> <Divclass= "Indent Bold">This is a second div.</Div> </Body></Body></HTML>
The third type:
Hierarchical selector: The main application in the structure of tag nesting, hierarchical selector, is a combination of the above two selectors to write the selector, it can be used in conjunction with the tag Selector, reduce the naming, but also through the hierarchy, limit the scope of the style.
For example:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style> /*Third selector: Hierarchy selector, labels that conform to this level of relationship can be selected*/. Indent span{font-family:' Times New Roman ', times, serif;Color:Slateblue; } </style></Head><Body> <Body> <Divclass= "Indent Bold">This is the second one.<span>Div</span></Div> </Body></Body></HTML>
Three types of selectors for "CSS" CSS
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
