HTML (css style specification) must read

HTML (css style specification) must read

CSS style specifications

1. Class Selector

2. Tag selector

3. ID selector

4. CSS style child selector

Class Selectors

1. The fixed structure that must be memorized becomes a CSS style tag. All styles can be written in CSS style tags

<style type="text/css">

</style>

2. type="text/css" means declaring this tag as a CSS style type

type: type means
text: the meaning of the text
css: Cascading Style Sheets

3. Class selector syntax format. Class name (dot plus class name)

Write location: Call the method in the CSS style tag and write class=class name inside the HTML tag

4. Naming conventions

It is recommended to use pure letters or letters followed by numbers. Do not start with numbers. Although other names can be used, please ask how to use them.

5. Why should we extract the inline CSS into the CSS tag?

Advantage 1: Keep HTML hierarchy clear and easy to detect errors Advantage 2: CSS styles can be reused

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. < head >   
  6.   
  7.      < meta   charset = "UTF-8" >   
  8.   
  9.      < title > Class Selector </ title >   
  10.   
  11.      < style   type = "text/css" >   
  12.   
  13. /*Class selector*/
  14.   
  15. .box{width: 200px; height: 50px; background-color: aqua;border: 10px salmon solid}
  16.   
  17.      </ style >   
  18.   
  19. </ head >   
  20.   
  21. < body >   
  22.   
  23. < div   class = "box" > </ div >   
  24.   
  25. < div   class = "box" > </ div >   
  26.   
  27. < div   class = "box" > </ div >   
  28.   
  29.    
  30.   
  31. </ body >   
  32.   
  33. </ html >   
Style Results

ID Selector

1. The syntax format of ID selector is #ID name

Write location: Call the method in the CSS style tag and write id="ID name" inside the HTML tag

2. Naming conventions

The same reason as the class name in the previous section

3. Why extract inline CSS into CSS tags

Advantage 1: Keep HTML levels clear and easy to detect errors Advantage 2: Distinguish priorities. If you need to reuse, please choose a class selector

4. ID does not allow repeated calls. ID is like an ID card number. Each one is different.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. < head >   
  6.   
  7.         < meta   charset = "UTF-8" >   
  8.   
  9.         < title > Title </ title >   
  10.   
  11.         < style   type = "text/css" >   
  12.   
  13. /*ID selector*/
  14.   
  15. /*The meaning of ID unique identifier, the purpose of design is to make the id unique*/
  16.   
  17. #box{width: 200px;height: 50px;background-color: bisque}
  18.   
  19. #boy,#boy1,#boy2{width: 200px;height: 50px;background-color: bisque;
  20.   
  21. border: 2px seagreen solid}
  22.   
  23. #gil,.doc{width: 200px;height: 50px;background-color: bisque;
  24.   
  25. border: 2px seagreen solid}
  26.   
  27. /*Set multiple shared parameters*/
  28.   
  29.    
  30.   
  31.      </ style >   
  32.   
  33.    
  34.   
  35. </ head >   
  36.   
  37. < body >   
  38.   
  39.      < div   id = "gil" > </ div >   
  40.   
  41.      < div   class = "doc" > </ div >   
  42.   
  43.      < div   class = "doc" > </ div >   
  44.   
  45.    
  46.   
  47. </ body >   
  48.   
  49. </ html >   
Style Results

Tag name selector

When multiple tags use the same attribute, they can be written as a selector. All the following tags share this attribute

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. < head >   
  4.      < meta   charset = "UTF-8" >   
  5.      < title > Title </ title >   
  6.      < style   type = "text/css" >   
  7. /*Tag name selector*/
  8. div{border: 10px salmon solid; width:99px;height: 20px}
  9.      </ style >   
  10. </ head >   
  11. < body >   
  12.      < div > Jay Chou </ div >   
  13.      < div > Sun Qihu </ div >   
  14.      < div > Zhang Jie </ div >   
  15. </ body >   
  16. </ html >   

CSS style child selector

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. < head >   
  6.   
  7.      < meta   charset = "UTF-8" >   
  8.   
  9.      < title > Child selector </ title >   
  10.   
  11.      < style   type = "text/css" >   
  12.   
  13. div b{color: crimson}
  14.   
  15. /*Only affects the b child tags under the div*/
  16.   
  17. div > b{color: skyblue}
  18.   
  19. /*Only affects sons, not grandchildren*/
  20.   
  21.      </ style >   
  22.   
  23. </ head >   
  24.   
  25. < body >   
  26.   
  27.      < div > < b > United States </ b > </ div >   
  28.   
  29.      < div > < b > < b > China </ b > </ b > </ div >   
  30.   
  31.    
  32.   
  33. </ body >   
  34.   
  35. </ html >   
Style Results

2. Style Priority

1. CSS execution order. Under the same priority, if the next line of CSS conflicts with the previous line of CSS, the next line will be the standard

In case of different priorities, the higher priority overrides the lower priority.

2. Selector priority order

First place: Inline style 1000;
2nd place: ID selector 100;
Third place: element name.class name 10;
4th place: class name 5th place: tag name 1;

3. Things to note:

When the CSS you wrote doesn't work, first check if the code is wrong and then check if the priority is wrong.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. < head >   
  6.   
  7.      < meta   charset = "UTF-8" >   
  8.   
  9.      < title > Priority Definition </ title >   
  10.   
  11.      < style   type = "text/css" >   
  12.   
  13. .red{color: aqua}
  14.   
  15. .blue{color: crimson}
  16.   
  17. .dce{color: antiquewhite}
  18.   
  19. /* For the same attributes at the same level, the standard call is as follows*/
  20.   
  21. div{color: blue}
  22.   
  23. /*The wider the impact, the lower the priority*/
  24.   
  25.    
  26.   
  27. #blue{ color: springgreen}
  28.   
  29. #ket{color: blueviolet}
  30.   
  31. div.red{color: aqua}
  32.   
  33. /*Class name > element name*/
  34.   
  35. /*ID has the highest priority*/
  36.   
  37. #alex b{color: chartreuse}
  38.   
  39. b{color: blue;border: 2px cornsilk solid}
  40.   
  41.    
  42.   
  43.      </ style >   
  44.   
  45. </ head >   
  46.   
  47. < body >   
  48.   
  49. < div   id = "ket"   class = "red"   style = "color: black" > sex first </ div >   
  50.   
  51. <!--Highest style in the line-->   
  52.   
  53. < div   id = "blue"   class = " red " > Priority </div>   
  54.   
  55. < div   class = "blue red dce" > Priority </ div >   
  56.   
  57. < div   id = "alex" > < b > China </ b > </ div >   
  58.   
  59. < b > United States </ b >   
  60.   
  61. </ body >   
  62.   
  63. </ html >   
style

The above is all the content of the must-read article on HTML (css style specifications) brought to you by the editor. I hope you will support 123WORDPRESS.COM~

Original address: http://www.cnblogs.com/pythonxiaohu/archive/2016/06/25/5616511.html

<<:  5 tips for writing CSS to make your style more standardized

>>:  MySQL tutorial DML data manipulation language example detailed explanation

Recommend

Detailed tutorial on installing mysql-8.0.13 (zip installation) on windows 10 system

Installation Environment Description •System vers...

Detailed explanation of Docker working mode and principle

As shown in the following figure: When we use vir...

How to view and execute historical commands in Linux

View historical commands and execute specified co...

Comprehensive analysis of isolation levels in MySQL

When the database concurrently adds, deletes, and...

A brief discussion on CSS blocking merging and other effects

Non-orthogonal margins When margin is used, it wi...

Processing ideas for decrypting WeChat applet packages on PC in node.js

Table of contents Where is the source code of the...

Ubuntu installation graphics driver and cuda tutorial

Table of contents 1. Uninstall the original drive...

Button is stretched on both sides in IE

When you write buttons (input, button), you will f...

Introduction to new ECMAscript object features

Table of contents 1. Object properties 1.1 Attrib...

A brief description of the relationship between k8s and Docker

Recently, the project uses kubernetes (hereinafte...

React Fragment Introduction and Detailed Usage

Table of contents Preface Motivation for Fragment...

Instructions for using the meta viewport tag (mobile browsing zoom control)

When OP opens a web page with the current firmwar...

How to use shtml include

By applying it, some public areas of the website c...

7 interview questions about JS this, how many can you answer correctly

Preface In JavaScript, this is the function calli...

Docker compose custom network to achieve fixed container IP address

Due to the default bridge network, the IP address...