wikipediaillustrated

marketing

Lo que necesita saber sobre los comentarios en CSS

Developer commenting out a rule set in CSS.jpgkeepProtocol

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.

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:

Demostración de código de párrafo con estilo con texto y color de fondo y con comentario de una sola línea en CSS

Fuente de imagen

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.

Demostración de código del párrafo de Bootstrap con estilo con color de fondo y texto y con comentario de varias líneas en CSS

Fuente de imagen

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:

Demostración de código de párrafo con conjunto de colores de fondo y color de texto comentado

Fuente de imagen

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:

Demostración de código de párrafo con el conjunto completo de reglas de fondo y color de párrafo comentado

Fuente de imagen

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.

Nueva llamada a la acción

introducción css

Publicado originalmente el 15 de julio de 2020 a las 7:00:00 a. m., actualizado el 8 de octubre de 2021

Temas:

Bootstrap y CSS

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.