Los comentarios se utilizan en CSS para explicar un bloque de código o para realizar cambios temporales durante el desarrollo. El código comentado no se ejecuta.
Tanto los comentarios de una o varias líneas en CSS comienzan con /*y terminan con */, y puede agregar tantos comentarios a su hoja de estilo como desee. Por ejemplo:
/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */También puede hacer que sus comentarios sean más legibles si los estiliza:
/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */Organizar CSS con comentarios
En proyectos más grandes, los archivos CSS pueden aumentar de tamaño rápidamente y resultar difíciles de mantener. Puede ser útil organizar su CSS en distintas secciones con una tabla de contenido para facilitar la búsqueda de ciertas reglas en el futuro:
/* * CSS TABLE OF CONTENTS * * 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 CSS: Selectores y sintaxis CSS
Cuando hablamos de la sintaxis de CSS, estamos hablando de cómo se distribuyen las cosas. Hay reglas sobre qué va a dónde, tanto para que pueda escribir CSS de manera 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
Detalles sobre la especificidad de CSS: trucos de CSS
CSS en línea aplica estilo a un solo elemento y sus hijos, hasta que se encuentra otro estilo que anula el primero.
Para aplicar CSS en línea, agregue el atributo "estilo" a un elemento HTML que le gustaría modificar. Entre comillas, incluya una lista delimitada por punto y coma de pares clave / valor (cada uno a su vez separado por dos puntos) que indique los estilos a establecer.
Aquí hay 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 reemplaza al primero y tendrá un color de fondo verde y un color de texto cian. En el ejemplo, aplicamos estilos a las etiquetas, pero puede aplicar un estilo a cualquier elemento HTML.
One Two Three CSS interno
Si bien escribir un estilo en línea es una forma rápida de cambiar un solo elemento, existe 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 y está incrustado en la etiqueta.
Aquí hay un ejemplo que tiene un efecto similar al ejemplo "en línea" anterior, excepto que el CSS se ha extraído a su propia área. Las palabras "Uno" y "Dos" coincidirán con el divselector y serán texto rojo sobre fondo amarillo. Las palabras "Tres" y "Cuatro" también coincidirán con el divselector, pero también coincidirán con el .nested_divselector que se aplica a cualquier elemento HTML que haga referencia a esa clase. Este selector más específico anula al primero y terminan apareciendo como texto cian sobre un fondo verde.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four Los selectores que se muestran arriba son extremadamente simples, pero pueden volverse bastante complejos. Por ejemplo, es posible aplicar estilos solo a elementos anidados; es decir, un elemento que es hijo de otro elemento.
Aquí hay un ejemplo en el que especificamos un estilo que solo debe aplicarse a divelementos que son hijos directos de otros divelementos. 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 (y lo más probable es que el texto sea negro sobre un fondo blanco).
div > div { color: red; background: yellow; } One Two Three Four CSS externo
Todo el estilo tiene su propio documento que está vinculado en la etiqueta. La extensión del archivo vinculado es.css