Home > Developer > JavaScript
HTML (css style specifications) and htmlcss style specifications
CSS style specifications
1. class selector
2. Tag Selector
3. id Selector
4. CSS style sub-Selector
Class Selector
1. fixed structure that must be backed up to become CSS style labels. All styles can be marked as CSS styles.
<Style type = "text/css">
</Style>
2. type = "text/css" indicates that the flag is of the css style type.
Type: indicates the type.
Text: Meaning of text
Css: stacked style sheet
3. class selector syntax format. Class Name (Dot and class name)
Write position: In the css style tag
Write class = class name in the HTML tag for the call method.
4. Naming rules
It is recommended that only letters or letters are followed by numbers. Do not start with a number. Other words can be used.
5. Why do I need to extract the css in the row to the css Tag?
Advantage 1: Keep the HTML layer clear to facilitate Error Detection
Advantage 2: You can reuse css styles.
<! DOCTYPE html>Style result
ID Selector
1. Syntax format of the ID selector # ID name
Write position: In the CSS style tag
Enter id = "ID name" in the HTML tag for the call method"
2. Naming rules
The same reason as the class name in the previous section
3. Why do I need to extract the CSS in the row to the CSS Tag?
Advantage 1: Keep the HTML layer clear to facilitate Error Detection
Advantage 2: differentiate priorities. If you need to reuse them, select a class selector.4. The ID cannot be called repeatedly. The id is the same as the ID number, and each id is different.
<! DOCTYPE html>Style result
Tag name selector
Multiple tags use the same attributes and can be written as selectors. All of the following attributes are used when this label is used.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Title </title>
<Style type = "text/css">
/* Tag name selector */
Div {border: 10px salmon solid; width: 99px; height: 20px}
</Style>
</Head>
<Body>
<Div> Jay Chou </div>
<Div> sun qihu </div>
<Div> Zhang Jie </div>
</Body>
</Html>
CSS style sub-Selector
<! DOCTYPE html>Style result
Ii. Style priority
1.The CSS execution sequence. If the next row conflicts with the CSS of the previous row at the same priority, the next row is the standard.
In the case of different priorities, a higher priority overwrites a lower priority.
2. selector priority sorting
First place: Intra-row style 1000;
Second place: ID selector 100;
Third name: element name. Class Name 10;
Fourth: Class Name
Fifth: Tag 1;
3. Ideas:
When the CSS you write does not work, check whether the code is wrong first.
Second, check whether the priority is correct.
<! DOCTYPE html>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
