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

How to solve the problem of insufficient permissions when switching users in docker container

When switching users in the docker container, it ...

Vue realizes the function of book shopping cart

This article example shares the specific code of ...

User needs lead to marketing-oriented design

<br />For each of our topics, the team will ...

Text mode in IE! Introduction to the role of DOCTYPE

After solving the form auto-fill problem discussed...

MySQL 8.0.12 decompression version installation tutorial

This article shares the installation tutorial of ...

Detailed graphic explanation of setting up routing and virtual machine networking in Linux

What is routing? Routing refers to the activity o...

Simply understand the differences in the principles of common SQL delete statements

This article mainly introduces the differences be...

Detailed explanation of the difference and application of CSS3 filter:drop-shadow filter and box-shadow

To use standard CSS3 to achieve the shadow effect...

How to use HTML+CSS to create TG-vision homepage

This time we use HTML+CSS layout to make a prelim...

Discuss the application of mixin in Vue

Mixins provide a very flexible way to distribute ...

Responsive Web Design Learning (3) - How to improve the performance of web pages on mobile devices

Preface Mobile devices have higher requirements f...

A brief analysis of the usage of USING and HAVING in MySQL

This article uses examples to illustrate the usag...

Two methods of implementing automatic paging in Vue page printing

This article example shares the specific code of ...

Detailed explanation of vue keepAlive cache clearing problem case

Keepalive is often used for caching in Vue projec...

Detailed explanation of commands to read and write remote files using Vim in Linux system

Set vim's working mode (temporary) :set (mode...