Comentários CSS (com exemplos)
É um hábito muito bom adicionar comentários no código razoavelmente. Por meio de comentários, você pode explicar o código (como descrever a função e o uso de um determinado trecho de código etc.) e o navegador ignorará automaticamente o conteúdo de os comentários. Os comentários são muito importantes para os desenvolvedores, pois podem ajudar os desenvolvedores a entender o objetivo do código mais rapidamente.
Em CSS, os comentários começam com / (caractere inicial) e terminam com / (caractere final). / e / aparecem em pares, e todo o conteúdo entre / e / será considerado como o conteúdo do comentário. Existe apenas uma maneira de escrever comentários em CSS, seja em uma única linha ou em várias linhas, desde que o conteúdo do comentário esteja entre / e /. Por exemplo:
/*单行注释*/
/*
多行注释
*/
[Exemplo] Explique os estilos CSS por meio de comentários.
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
/* 为所有 h1 标签设置 CSS 样式 */
h1 {
color: blue; /*设置字体颜色为蓝色*/
text-align: center; /*设置对齐方式为居中对齐*/
}
/* 为所有 p 标签设置 CSS 样式 */
p {
color: red; /*设置字体颜色为红色*/
font-size: 18px; /*设置字体大小为 18 像素*/
}
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963</p>
</body>
</html>
O resultado da execução é mostrado na figura abaixo:
Figura: Adicionando comentários em CSS
Como o navegador irá ignorar o conteúdo do comentário, ao desenvolver ou depurar o código CSS, se você não deseja que um determinado código CSS seja executado, também pode usar /* */ para comentar esse código, para que o navegador não Execute este código CSS, conforme mostrado abaixo:
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
/* 为所有 h1 标签设置 CSS 样式 */
h1 {
color: blue; /*设置字体颜色为蓝色*/
/*text-align: center;*/
}
/* 为所有 p 标签设置 CSS 样式 */
p {
/*color: red;*/
font-size: 18px; /*设置字体大小为 18 像素*/
}
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963</p>
</body>
</html>
O resultado da execução é mostrado na figura abaixo:
Figura: Código em programas anotados
No exemplo acima, comentamos os estilos CSS nas linhas 9 e 13. Pode ser visto executando que os estilos CSS nos comentários não são efetivos.
Não há limite para o número de comentários que você pode adicionar em CSS, você pode adicionar comentários onde achar necessário. No entanto, deve-se observar que os comentários não podem ser aninhados em CSS. O caractere de início do comentário / terminará o comentário após encontrar o primeiro caractere de finalização do comentário /, e o */ subsequente será considerado estilo CSS pelo navegador. de fazer isso é que os estilos CSS subsequentes não podem ser analisados normalmente.
[Exemplo] Use também o código acima e aninhe os comentários no estilo CSS:
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
/* 为所有 h1 标签设置 CSS 样式 */
h1 {
color: blue; /*设置字体颜色为蓝色*/
text-align: center; /*设置对齐方式为居中对齐*/
}
/*
/*为所有 p 标签*/
设置 CSS 样式 */
p {
color: red; /*设置字体颜色为红色*/
font-size: 18px; /*设置字体大小为 18 像素*/
}
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963</p>
</body>
</html>
O resultado da execução é mostrado na figura abaixo:
Figura: comentários CSS não podem ser aninhados
No código acima, aninhamos os comentários entre as linhas 11 a 13. Pode ser visto nos resultados da execução que apenas o <h1>estilo definido para o rótulo tem efeito, mas <p>o estilo definido para o rótulo não tem efeito.