After a style sheet is created, often weeks, months, or even years later, when you go back and make modifications, you may not be able to figure out why you created this style in the past and what its purpose is. What effect. This is true for any project.
Therefore, when building a website, you should be reminded of what you do and why you do it. You can embed these prompt information into the formula table through CSS comments.
1. What are CSS comments?
CSS comments, also known as CSS annotations, are comments added between CSS file codes to explain the meaning. Just like when we study Chinese, we use different symbols and colors to annotate the article to illustrate a truth. Under normal circumstances, CSS comments will not be interpreted or ignored by the browser.
2. The role of CSS comments
CSS comments are used for annotations. We often use them to make special comments on CSS code or layout CSS styles. Its main functions are:
1. In team development, it is helpful for others to read and understand the developed CSS code;
2. Explain the functions, styles, etc. of the code you wrote to facilitate future maintenance and modification;
3. It is helpful to explain the specific code details.
3. The location of the annotation
Adding comments in CSS is simple. All text information placed between the /* and */ delimiters are called comments.
In other words, CSS has only one kind of comment. Whether it is a multi-line comment or a single-line comment, it must start with /* and end with */, with comment content added in the middle.
1. Place comments outside the style sheet
/*Define the head style of the web page*/.head{width:960px;}/*Define the bottom style of the web page*/.footer{width:960px;}
2. Comments are placed inside the style sheet.
p{color:#ff7000;/*Font color setting*/height: 30px;/*Paragraph height setting*/}
3. Comments are placed inside the style sheet and outside the style sheet.
<html><head><styletype=text/css>/*Style 1*/.STYLE1{color:#009900;/*The font color is green*/}/*Style 2*/.STYLE2{font- size:18px;/*The font size is 18-point font*/color:#FF3300;/*The font color is red*/font-weight:bold;/*The font is bolded*/}/*Style 3*/ .STYLE3{ color:#0000FF;/*The font color is blue*/font-family:black;/*The font is bold*/font-style:italic;/*The font effect is italic*/}</style></head> <body><pclass=STYLE1>Paragraph setting one</p><pclass=STYLE2>Paragraph setting two</p><h2class=STYLE3>Title setting effect</h2></body></html>
It does not affect the presentation results and can also serve as a good reminder: