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 línea como los de varias líneas en CSS comienzan con /* y terminan con */, y puede agregar tantos comentarios a su hoja de estilos 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 estilizándolos:
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 su CSS en distintas secciones con una tabla de contenido para que sea más fácil encontrar ciertas reglas en el futuro:
un poco más sobre CSS: sintaxis CSS y Selectores
cuando hablamos de la sintaxis de CSS, estamos hablando de cómo se presentan 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.,
inline CSS
Specifics on CSS Specificity: CSS Tricks
Inline CSS 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 «style» a un elemento HTML que desee 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.
Este es 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 de verde y un color de texto de cian. En el ejemplo, estamos aplicando estilos a las etiquetas <div>, pero puede aplicar un estilo a cualquier elemento HTML.
<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>CSS interno
Si bien 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 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 selector div y serán texto rojo sobre un fondo amarillo., Las palabras «tres» y»cuatro»coincidirán con el selector div también, pero también coincidirán 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.
los selectores mostrados 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 donde estamos especificando un estilo que solo debe aplicarse a div elementos que son hijos directos de otros div elementos. 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 negro sobre un fondo blanco).
<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>CSS externo
todo el estilo tiene su propio documento que está vinculado en la etiqueta <head>. La extensión del archivo vinculado .css