Un comentario en CSS se utilizan para explicar un bloque de código o para hacer cambios temporales durante el desarrollo. El código comentado no se ejecuta.
Tanto los comentarios de una sola línea como los de varias líneas en CSS empiezan con /* y terminan con */, y puedes añadir tantos comentarios a tu hoja de estilos como quieras. Por ejemplo:
/* Este es un comentario de una sola línea */
.group:after {
content: "";
display: table;
clear: both;
}
/*
Esto es
un comentario
con multiples lineas
*/También puede hacer más legibles sus comentarios estilizándolos:
/*
***
* SECCIÓN PARA EL ESTILO H2
***
* Un párrafo con información
* que sería útil para alguien
* que no escribió el código.
* Los asteriscos alrededor del párrafo
* ayudan a hacerlo más legible.
***
*/Tabla de contenidos
Organizar el CSS con comentarios
En proyectos más grandes, los archivos CSS pueden crecer rápidamente en tamaño y ser difíciles de mantener. Puede ser útil organizar tu CSS en distintas secciones con una tabla de contenidos para facilitar la búsqueda de ciertas reglas en el futuro:
/*
* ÍNDICE DEL CCS
*
* 1.0 - Reset
* 2.0 - Fonts
* 3.0 - Globals
* 4.0 - Color Palette
* 5.0 - Header
* 6.0 - Body
* 6.1 - Sliders
* 6.2 - Imagery
* 7.0 - Footer
*/
/*** 1.0 - Reset ***/
/*** 2.0 - Fonts ***/
/*** 3.0 - Globals ***/
/*** 4.0 - Color Palette ***/
/*** 5.0 - Header ***/
/*** 6.0 - Body ***/
h2 {
font-size: 1.2em;
font-family: "Ubuntu", serif;
text-transform: uppercase;
}
/*** 5.1 - Sliders ***/
/*** 5.2 - Imagery ***/
/*** 7.0 - Footer ***/Un poco más sobre el CSS: Sintaxis y selectores CSS
Cuando hablamos de la sintaxis del CSS, estamos hablando de cómo se disponen las cosas. Hay reglas sobre dónde va cada cosa, tanto para que puedas escribir CSS de forma consistente como para que un programa (como un navegador) pueda interpretarlo y aplicarlo a la página correctamente.
Hay dos formas principales de escribir CSS.
CSS en línea (Comentario en CSS)
Especificaciones sobre la especificidad del CSS:
El CSS en línea aplica el estilo a un solo elemento y a sus hijos, hasta que se encuentra otro estilo que anula el primero.
Para aplicar CSS en línea, agrega el atributo «style» a un elemento HTML que quieras modificar. Dentro de las comillas, incluye una lista delimitada por punto y coma de pares clave/valor (cada uno a su vez separado por dos puntos) que indica los estilos a establecer.
Aquí tienes un ejemplo de CSS en línea. Las palabras «Uno» y «Dos» tendrán un color de fondo amarillo y un color de texto rojo. La palabra «Tres» tiene un nuevo estilo que anula el primero, y tendrá un color de fondo verde y un color de texto cian. En el ejemplo, estamos aplicando estilos a las etiquetas , pero puedes aplicar un estilo a cualquier elemento HTML.
<div style="color:red; background:yellow">
Uno
<div>
Dos
</div>
<div style="color:cyan; background:green">
Tres
</div>
</div>CSS interno (Comentario en CSS)
Mientras que escribir un estilo en línea es una forma rápida de cambiar un solo elemento, hay una forma más eficiente de aplicar el mismo estilo a muchos elementos de la página a la vez.
El CSS interno tiene sus estilos especificados en la etiqueta <style>, y está incrustado en la etiqueta <head>.
Aquí hay un ejemplo que tiene un efecto similar al del ejemplo «inline» anterior, excepto que el CSS ha sido extraído a su propia área. Las palabras «Uno» y «Dos» coincidirán con el divisor y serán un texto rojo sobre un fondo amarillo. Las palabras «Tres» y «Cuatro» también coincidirán con el div selector, pero también coinciden con el selector .nested_div que se aplica a cualquier elemento HTML que haga referencia a esa clase. Este selector más específico anula el primero, y terminan apareciendo como texto cian sobre un fondo verde.
<style type="text/css">
div { color: red; background: yellow; }
.nested_div { color: cyan; background: green; }
</style>
<div>
Uno
<div>
Dos
</div>
<div class="nested_div">
Tres
</div>
<div class="nested_div">
Cuatro
</div>
</div>Los selectores mostrados arriba son extremadamente simples, pero pueden llegar a ser bastante complejos. Por ejemplo, es posible aplicar estilos sólo a elementos anidados; es decir, un elemento que es hijo de otro elemento.
Este es un ejemplo en el que especificamos un estilo que sólo debe aplicarse a los elementos del div que son hijos directos de otros elementos del div. El resultado es que «Dos» y «Tres» aparecerán como texto rojo sobre un fondo amarillo, pero «Uno» y «Cuatro» no se verán afectados.
<style type="text/css">
div > div { color: red; background: yellow; }
</style>
<div>
Uno
<div>
Dos
</div>
<div>
Tres
</div>
</div>
<div>
Cuatro
</div>CSS externo
Todos los estilos tienen su propio documento que está enlazado en la etiqueta <head> . La extensión del archivo enlazado es .css.
Si te ha gustado este artículo sobre como poner un comentario en CSS, te recomiendo leer sobre Como crear un texto con degradado de color en CSS.
Buenisimo post, muy util la web en general para los que, como yo, hacemos algun curso de desarrollo web y luego quedamos sin conocimientos como estos
Muchas gracias Enzo!
te recuerdo por si no lo sabias que voy a comenzar en breve mi plataforma de cursos donde todo esto se dará con detalle, si te interesa, ya sabes, entornodev.com 😉
Un saludo