En CSS, puede agregar comentarios para explicar u organizar diferentes secciones de su hoja de estilo. Si lo hace, puede parecer un paso extraño en el proceso de codificación, pero los comentarios pueden ser extremadamente útiles al depurar o rediseñar su sitio web.
¿Por qué? Porque le dicen al lector cuál es la intención de líneas particulares de CSS. Esta información es particularmente útil si varios desarrolladores están trabajando en un sitio web o si ha heredado el sitio de otro propietario.
Si ha revisado una hoja de estilo antes o ha leído suficientes publicaciones de blog con fragmentos de código, es posible que ya haya visto comentarios. Son reconocibles por las marcas /* */ que los encierran.
En esta publicación, veremos cómo crear sus propios comentarios. Luego, cubriremos lo que significa «comentar» en CSS y cómo hacerlo. Empecemos.
Cómo comentar en CSS
Para comentar en CSS, simplemente coloque su texto sin formato dentro de las marcas /* */. Esto le dice al navegador que son notas y que no deben mostrarse en la interfaz.
Puede agregar comentarios a su hoja de estilo de dos maneras. El formato más común es un comentario de una sola línea, como se muestra en el código a continuación.
Aquí está el CSS:
/* Set text color to white and background color to a shade of teal */
p {
color: white;
background-color: #2594A4;
}
También puede formatearlos como comentarios de varias líneas, como se muestra en el código a continuación.
Aquí está el CSS:
p {
color: white; /* Set text color to white */
background-color: #2594A4; /* Set background color to a shade of teal */
}
Puede colocar cualquiera de estos fragmentos de código en la sección
de su página web o en una hoja de estilo CSS externa para diseñar el siguiente HTML.Aquí está el HTML:
<h1>How to Comment in CSS</h1>
<p>This paragraph is styled with CSS. Both the font-color and background-color property have been set so the font color is white and the background color is a shade of teal. </p>
Aquí está el resultado:
Si está utilizando el marco Bootstrap CSS en lugar de crear un sitio web desde cero, los comentarios aún funcionan exactamente de la misma manera.
Aquí está el CSS, que permanece igual:
p {
color: white; /* Set text color to white */
background-color: #2594A4; /* Set background color to a shade of teal */
}
El HTML será un poco diferente, solo porque quiero colocar el encabezado y el elemento de párrafo en un contenedor de ancho completo para que haya algo de relleno alrededor de los bordes.
<div class="container-fluid">
<h1>Commenting in Boostrap CSS</h1>
<p>As in the example above, this paragraph is styled with CSS. Both the font-color and background-color property have been set so the font color is white and the background color is a shade of teal.</p>
</div>
A continuación se muestra el resultado. Nota: La única diferencia en la parte frontal es la familia de fuentes, que es establecer globalmente en Bootstrap.
Cómo ‘comentar’ en CSS
Además de explicar secciones de código, los comentarios también se pueden usar para invalidar un conjunto de reglas CSS o declaraciones individuales. Al colocar las marcas /* */ alrededor de un conjunto de reglas o una declaración, puede «comentar» ese CSS para que el navegador sepa que no debe aplicar ese estilo.
Antes de continuar, aclaremos qué es un conjunto de reglas. Un conjunto de reglas es un selector de CSS y todas las declaraciones dentro de los corchetes. A continuación se muestra un conjunto de reglas para todos los elementos de párrafo en una página web (que hemos estado usando en los ejemplos anteriores).
p {
color: white;
background-color: #2594A4;
}
Ahora veamos un ejemplo de una declaración individual dentro de ese conjunto de reglas que se comenta.
Aquí está el CSS:
p {
/* color: white; */
background-color: #2594A4;
}
Aquí está el HTML:
<h1>How to Comment in CSS</h1>
<p>This paragraph is styled with CSS. While the font-color property has been "commented out," the background-color property has not. That means, the font color remains black but the background color changes to a nice teal. </p>
Aquí está el resultado:
Ahora veremos un ejemplo de todo el conjunto de reglas comentado.
Aquí está el CSS:
/*
p {
color: white;
background-color: #2594A4;
}
*/
Aquí está el HTML:
<h1>How to Comment in CSS</h1>
<p>This paragraph is styled with CSS that's been "commented out." Effectively, that means the CSS is cancelled out so the HTML appears unstyled. </p>
Aquí está el resultado:
Hacer comentarios en tu CSS
Si desea agregar notas explicativas o evitar que el navegador represente partes específicas de su hoja de estilo, puede usar los comentarios. Los comentarios no afectarán la interpretación de otras partes de su hoja de estilo o el diseño de su sitio web en la interfaz. También son fáciles de crear, incluso si recién está comenzando a aprender HTML y CSS.
