HTML (css style specifications) and htmlcss style specifications

Source: Internet
Author: User

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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.