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

Blog    

Recommend

Django online deployment method of Apache

environment: 1. Windows Server 2016 Datacenter 64...

Detailed explanation of the latest IDEA process of quickly deploying and running Docker images

background Use idea with docker to realize the wh...

JS addEventListener() and attachEvent() methods implement registration events

In JavaScript's DOM event model, events are r...

Use of Linux ls command

1. Introduction The ls command is used to display...

Handwriting implementation of new in JS

Table of contents 1 Introduction to the new opera...

MySQL not null constraint case explanation

Table of contents Set a not null constraint when ...

Sample code for achieving three-dimensional picture placement effect with pure CSS

1. Percentage basis for element width/height/padd...

Webservice remote debugging and timeout operation principle analysis

WebService Remote Debugging In .NET, the remote d...

Solution to the welcome to emergency mode message when booting CentOS7.4

Today I used a virtual machine to do an experimen...

Detailed explanation of the 8 attribute values ​​of the background attribute (interview question)

The value of the background property in CSS backg...

Building a KVM virtualization platform on CentOS7 (three ways)

KVM stands for Kernel-based Virtual Machine, whic...

iview implements dynamic form and custom verification time period overlap

Dynamically adding form items iview's dynamic...

Summary of the pitfalls of using primary keys and rowids in MySQL

Preface We may have heard of the concept of rowid...

Let's talk in detail about how the NodeJS process exits

Table of contents Preface Active withdrawal Excep...

In-depth understanding of the implementation principle of require loader

Preface We often say that node is not a new progr...