CSS

Una hoja de estilo consta de una lista de reglas . Cada regla o conjunto de reglas consta de uno o más selectores y un bloque de declaración .

En CSS, los selectores declaran a qué parte del código se aplica un estilo, haciendo coincidir las etiquetas y los atributos en el propio código.

Un bloque de declaración consta de un par de llaves ( {}) que encierran una lista de declaraciones separadas por punto y coma . ^{[ 10 ]}

Antes de CSS, casi todos los atributos de presentación de los documentos HTML estaban contenidos en el marcado HTML. Es decir, todos los colores de fuente, estilos de fondo, alineaciones de elementos, bordes y tamaños debían describirse explícitamente (a menudo repetidamente) en el HTML. CSS permite a los autores trasladar gran parte de esa información a otro archivo, la hoja de estilos, lo que resulta en un HTML considerablemente más simple. Además, a medida que más y más dispositivos pueden acceder a páginas web adaptables, comienzan a aparecer diferentes tamaños de pantalla y diseños. Personalizar un sitio web para cada tamaño de dispositivo es costoso y cada vez más difícil. La naturaleza modular de CSS significa que los estilos se pueden reutilizar en diferentes partes de un sitio o incluso en diferentes sitios, lo que promueve la coherencia y la eficiencia.

Por ejemplo, los encabezados ( h1elementos), subencabezados ( h2), sub-subencabezados ( h3), etc., se definen estructuralmente mediante HTML. En la impresión y en la pantalla, la elección de la fuente , el tamaño , el color y el énfasis para estos elementos es de presentación .

Antes de CSS, los autores de documentos que querían asignar características tipográficas a, por ejemplo, todos h2los encabezados, tenían que repetir el marcado HTML de presentación para cada aparición de ese tipo de encabezado. Esto hacía que los documentos fueran más complejos, más grandes, más propensos a errores y más difíciles de mantener. CSS permite separar la presentación de la estructura. CSS puede definir el color, la fuente, la alineación del texto, el tamaño, los bordes, el espaciado, el diseño y muchas otras características tipográficas, y puede hacerlo de forma independiente para las vistas en pantalla e impresas. CSS también define estilos no visuales, como la velocidad de lectura y el énfasis para los lectores de texto auditivos. El W3C ha desaconsejado el uso de todo el marcado HTML de presentación. ^{[ 17 ]}

Por ejemplo, en HTML anterior a CSS, un elemento de encabezado definido con texto rojo se escribiría de la siguiente manera:

< h1 >< font color = "red" > Capítulo 1. </ font ></ h1 >

Mediante CSS, el mismo elemento puede codificarse utilizando propiedades de estilo en lugar de atributos de presentación HTML:

< h1 style = "color: red;" > Capítulo 1. </ h1 >

Las ventajas de esto pueden no ser evidentes de inmediato, pero el poder de CSS se hace más patente cuando las propiedades de estilo se colocan en un elemento de estilo interno o, mejor aún, en un archivo CSS externo. Por ejemplo, supongamos que el documento contiene el elemento de estilo:

<style> h1 { color : red ; } </style>​​​​

Todos h1los elementos del documento se volverán automáticamente rojos sin necesidad de código explícito. Si el autor posteriormente quisiera que h1los elementos fueran azules, podría hacerlo cambiando el elemento de estilo a:

<style> h1 { color : blue ; } </style>​​​​

en lugar de tener que revisar laboriosamente el documento y cambiar el color de cada h1elemento individual.

Los estilos también se pueden colocar en un archivo CSS externo, como se describe a continuación, y cargarse utilizando una sintaxis similar a la siguiente:

< link href = "path/to/file.css" rel = "stylesheet" type = "text/css" >

Esto desacopla aún más el estilo del documento HTML y permite modificar el estilo de varios documentos simplemente editando un archivo CSS externo compartido.

CSS, o Hojas de Estilo en Cascada, ofrece una forma flexible de dar estilo al contenido web, con estilos que se originan a partir de la configuración predeterminada del navegador, las preferencias del usuario o los diseñadores web. Estos estilos se pueden aplicar en línea, dentro de un documento HTML, o a través de archivos .css externos para una mayor coherencia. Esto no solo simplifica el desarrollo web al promover la reutilización y la mantenibilidad, sino que también mejora el rendimiento del sitio, ya que los estilos se pueden almacenar en archivos .css dedicados que los navegadores pueden almacenar en caché. Además, incluso si los estilos no se pueden cargar o están deshabilitados, esta separación mantiene la accesibilidad y la legibilidad del contenido, asegurando que el sitio sea utilizable para todos los usuarios, incluidas las personas con discapacidad. Su enfoque multifacético, que incluye consideraciones sobre la especificidad del selector, el orden de las reglas y los tipos de medios, garantiza que los sitios web sean visualmente coherentes y adaptables a diferentes dispositivos y necesidades de los usuarios, logrando un equilibrio entre la intención del diseño y la accesibilidad del usuario.

La especificidad se refiere a los pesos relativos de varias reglas. ^{[ 18 ]} Determina qué estilos se aplican a un elemento cuando podría aplicarse más de una regla. Según la especificación, un selector simple (por ejemplo, H1) tiene una especificidad de 1, los selectores de clase tienen una especificidad de 1,0 y los selectores de ID tienen una especificidad de 1,0,0. Debido a que los valores de especificidad no se conservan como en el sistema decimal, se utilizan comas para separar los "dígitos" ^{[ 19 ]} (una regla CSS con 11 elementos y 11 clases tendría una especificidad de 11,11, no de 121).

De este modo, los selectores de la siguiente regla dan como resultado la especificidad indicada:

< ! DOCTYPE html > <html> <head> < meta charset = " utf - 8 " > <style> #xyz { color : blue ; } </style> </head> <body> < p id = " xyz " style = " color : green ; " > Para demostrar especificidad </p> </body> </html>​​

La herencia es una característica clave en CSS; se basa en la relación ancestro-descendiente para funcionar. La herencia es el mecanismo por el cual las propiedades se aplican no solo a un elemento específico, sino también a sus descendientes. ^{[ 18 ]} La herencia se basa en el árbol del documento, que es la jerarquía de elementos XHTML en una página basada en el anidamiento. Los elementos descendientes pueden heredar valores de propiedades CSS de cualquier elemento ancestro que los contenga. En general, los elementos descendientes heredan propiedades relacionadas con el texto, pero no sus propiedades relacionadas con el cuadro. Las propiedades que se pueden heredar son color, fuente, espaciado entre letras, altura de línea, estilo de lista, alineación de texto, sangría de texto, transformación de texto, visibilidad, espacio en blanco y espaciado entre palabras. Las propiedades que no se pueden heredar son fondo, borde, visualización, flotación y borrado, altura y anchura, margen, altura y anchura mínima y máxima, contorno, desbordamiento, relleno, posición, decoración de texto, alineación vertical e índice z.

La herencia se puede utilizar para evitar declarar ciertas propiedades una y otra vez en una hoja de estilos, lo que permite escribir CSS más corto.

La herencia en CSS no es igual que la herencia en lenguajes de programación basados ​​en clases , donde es posible definir la clase B como "similar a la clase A, pero con modificaciones". ^{[ 20 ]} Con CSS, es posible aplicar estilos a un elemento con "clase A, pero con modificaciones". Sin embargo, no es posible definir una clase CSS B de esa manera, que luego podría usarse para aplicar estilos a múltiples elementos sin tener que repetir las modificaciones.

p { color : azul ; }

<p> Esto es para <em> ilustrar </em> la herencia </p>​​​​​

Se ignora el espacio en blanco entre propiedades y selectores. Este fragmento de código:

cuerpo { desbordamiento : oculto ; fondo : #000000 ; imagen de fondo : url ( images/bg.gif ); repetición de fondo : sin repetición ; posición de fondo : arriba a la izquierda ; }

es funcionalmente equivalente a este:

cuerpo { desbordamiento : oculto ; color de fondo : #000000 ; imagen de fondo : url ( images/bg.gif ); repetición de fondo : sin repetición ; posición de fondo : arriba a la izquierda ; }

cuerpo { desbordamiento : oculto ; fondo : #000 url ( images/bg.gif ) sin repetición izquierda arriba ; }

@ font-face { font-family : 'Comic Sans' ; font-size : 20px ; src : url ( 'first.example.com' ), url ( 'second.example.com' ), url ( 'third.example.com' ), url ( 'fourth.example.com' ); }

CSS  2.1 define tres esquemas de posicionamiento:

Flujo normal

Los elementos en línea se disponen de la misma manera que las letras de las palabras en el texto, uno tras otro a lo largo del espacio disponible hasta que no haya más espacio, y luego comienzan una nueva línea debajo. Los elementos en bloque se apilan verticalmente, como los párrafos y como los elementos de una lista con viñetas. El flujo normal también incluye el posicionamiento relativo de los elementos en bloque o en línea y los cuadros de texto.

Flotadores

Un elemento flotante se extrae del flujo normal y se desplaza hacia la izquierda o hacia la derecha lo máximo posible dentro del espacio disponible. A continuación, el resto del contenido fluye junto al elemento flotante.

Posicionamiento absoluto

Un elemento con posicionamiento absoluto no tiene lugar ni efecto alguno en el flujo normal de otros elementos. Ocupa su posición asignada en su contenedor independientemente de los demás elementos. ^{[ 22 ]}

La  especificación CSS 1 se completó en 1996. El Internet Explorer 3 de Microsoft ^{[ 25 ]} se lanzó ese año, con un soporte limitado para CSS. IE 4 y Netscape 4.x añadieron más soporte, pero generalmente era incompleto y tenía muchos errores que impedían que CSS se adoptara de forma útil. Pasaron más de tres años antes de que algún navegador web lograra una implementación casi completa de la especificación. Internet Explorer 5.0 para Macintosh , lanzado en marzo de 2000, fue el primer navegador en tener soporte completo (mejor que el 99 por ciento) para CSS  1, ^{[ 35 ]} superando a Opera , que había sido el líder desde la introducción de su soporte para CSS quince meses antes. Otros navegadores siguieron el ejemplo poco después, y muchos de ellos también implementaron partes de CSS  2.

Sin embargo, incluso cuando los navegadores web posteriores, de la versión 5, comenzaron a ofrecer una implementación bastante completa de CSS, aún presentaban errores en ciertas áreas. Estaban plagados de inconsistencias, errores y otras peculiaridades . Microsoft Internet Explorer 5.x para Windows , a diferencia del muy diferente IE para Macintosh , tenía una implementación defectuosa del modelo de caja CSS , en comparación con los estándares CSS. Estas inconsistencias y variaciones en la compatibilidad de funciones dificultaban a los diseñadores lograr una apariencia consistente en todos los navegadores y plataformas sin el uso de soluciones alternativas denominadas trucos y filtros CSS. Los errores del modelo de caja de IE para Windows eran tan graves que, cuando se lanzó Internet Explorer 6 , Microsoft introdujo un modo de interpretación CSS compatible con versiones anteriores (" modo de peculiaridades ") junto con un "modo estándar" alternativo y corregido. Otros navegadores que no eran de Microsoft también ofrecían la posibilidad de cambiar de modo. Por lo tanto, se hizo necesario que los autores de archivos HTML se aseguraran de incluir un marcador distintivo especial, "CSS conforme a los estándares", para indicar que su intención era que el CSS se interpretara correctamente, de acuerdo con los estándares, en lugar de estar diseñado para el navegador IE5/Windows, ahora obsoleto . Sin este marcador, los navegadores web con la capacidad de activar el "modo de compatibilidad" redimensionarán los objetos en las páginas web como lo haría IE 5 en Windows, en lugar de seguir los estándares CSS.

Los problemas con la adopción irregular de CSS y las erratas en la especificación original llevaron al W3C a revisar los  estándares CSS 2 y convertirlos en CSS  2.1, que se acercó más a una instantánea funcional del soporte actual de CSS en los navegadores HTML. Algunas  propiedades de CSS 2 que ningún navegador implementó con éxito se eliminaron y, en algunos casos, se modificaron comportamientos definidos para alinear el estándar con las implementaciones existentes predominantes. CSS  2.1 se convirtió en Recomendación Candidata el 25 de febrero de 2004, pero  volvió a ser un Borrador de Trabajo el 13 de junio de 2005, ^{[ 36 ]} y solo regresó a ser Recomendación Candidata el 19 de julio de 2007. ^{[ 37 ]}

Además de estos problemas, la .cssextensión fue utilizada por un producto de software utilizado para convertir archivos de PowerPoint en archivos de presentación de diapositivas compactas, ^{[ 38 ]} por lo que algunos servidores web sirvieron todos .css^{[ 39 ]} como tipo MIME application/x-pointplus^{[ 40 ]} en lugar de text/css.

En ocasiones, los proveedores de navegadores individuales introdujeron nuevos parámetros antes de su estandarización y universalización. Para evitar interferencias con futuras implementaciones, antepusieron nombres únicos a los parámetros, como por ejemplo -moz-para Mozilla Firefox , -webkit-que recibió el nombre del motor de navegación de Apple Safari , -o-para Opera Browser y -ms-para Microsoft Internet Explorer y las primeras versiones de Microsoft Edge que utilizan EdgeHTML.

En ocasiones, los parámetros con prefijos de proveedor, como -moz-radial-gradienty , -webkit-linear-gradienttienen una sintaxis ligeramente diferente en comparación con sus contrapartes sin prefijo de proveedor. ^{[ 41 ]}

Las propiedades con prefijo quedan obsoletas al estandarizarse. Existen programas para añadir automáticamente prefijos a navegadores antiguos e indicar versiones estandarizadas de parámetros con prefijo. Dado que los prefijos se limitan a un pequeño subconjunto de navegadores, eliminarlos permite que otros navegadores reconozcan la funcionalidad. Una excepción son ciertas -webkit-propiedades con prefijo obsoletas, tan comunes y persistentes en la web que otras familias de navegadores han decidido mantener su compatibilidad. ^{[ 42 ]}

CSS cuenta con varios niveles y perfiles. Cada nivel de CSS se basa en el anterior, generalmente añadiendo nuevas características y denotándose ^{[ 43 ]} como CSS  1, CSS  2, CSS  3 y CSS  4. Los perfiles suelen ser un subconjunto de uno o más niveles de CSS diseñados para un dispositivo o interfaz de usuario específicos. Actualmente, existen perfiles para dispositivos móviles, impresoras y televisores. Los perfiles no deben confundirse con los tipos de medios, que se añadieron en CSS  2.

Las reglas de alcance para propiedades como z-index buscan el elemento padre más cercano con una declaración `<a> position: absolute` o ` position: relative<b>`. Este acoplamiento extraño tiene efectos no deseados. Por ejemplo, es imposible evitar declarar un nuevo alcance cuando uno se ve obligado a ajustar la posición de un elemento, lo que impide usar el alcance deseado de un elemento padre.

CSS implementa pseudoclases que permiten cierto grado de retroalimentación del usuario mediante la aplicación condicional de estilos alternativos. Una pseudoclase de CSS, " ", es dinámica (equivalente a "onmouseover" de JavaScript) y tiene potencial para un mal uso (por ejemplo, implementar ventanas emergentes de proximidad del cursor), ^{[ 69 ]} pero CSS no tiene capacidad para que un cliente la desactive (no hay una propiedad similar a "disable") o limite sus efectos (no hay valores similares a "nochange" para cada propiedad).:hover

No existe una forma de nombrar una regla CSS que permita (por ejemplo) que los scripts del lado del cliente hagan referencia a la regla incluso si su selector cambia.

Los estilos CSS a menudo deben duplicarse en varias reglas para lograr el efecto deseado, lo que genera mantenimiento adicional y requiere pruebas más exhaustivas. Se propusieron algunas características nuevas de CSS para solucionar esto, pero posteriormente se abandonaron. ^{[ 70 ] [ 71 ]} En cambio, los autores pueden obtener esta capacidad utilizando lenguajes de hojas de estilo más sofisticados que se compilan a CSS, como Sass , Less o Stylus .

Además del pseudoelemento, no se pueden seleccionar rangos de texto específicos sin necesidad de utilizar elementos de marcador de posición.::first-letter

CSS facilita la publicación de contenido en múltiples formatos de presentación ajustando los estilos según diversos parámetros. Estos parámetros incluyen las preferencias explícitas del usuario (como temas o tamaño de fuente), la compatibilidad con diferentes navegadores web, el tipo de dispositivo utilizado para visualizar el contenido (por ejemplo, ordenador de escritorio, tableta o móvil), la resolución de pantalla, la ubicación geográfica del usuario y muchas otras variables. CSS también permite el diseño responsivo, asegurando que el contenido se adapte dinámicamente a diferentes tamaños y orientaciones de pantalla, mejorando la accesibilidad y la experiencia del usuario en una amplia gama de entornos.

Cuando CSS se utiliza de forma eficaz, en términos de herencia y "cascada", una hoja de estilo global permite aplicar estilos a todos los elementos del sitio web. Si es necesario modificar o ajustar el estilo de los elementos, estos cambios se pueden realizar editando las reglas de la hoja de estilo global. Antes de CSS, este tipo de mantenimiento era más difícil, costoso y requería mucho tiempo.

Una hoja de estilos, interna o externa, especifica el estilo una sola vez para un conjunto de elementos HTML seleccionados por classsu tipo o relación con otros. Esto es mucho más eficiente que repetir la información de estilo en línea para cada aparición del elemento. Una hoja de estilos externa generalmente se almacena en la caché del navegador y, por lo tanto, se puede usar en varias páginas sin recargarlas, lo que reduce aún más la transferencia de datos a través de la red.

Con un simple cambio de una línea, se puede usar una hoja de estilos diferente para la misma página. Esto ofrece ventajas en cuanto a accesibilidad, además de permitir adaptar una página o sitio web a diferentes dispositivos. Asimismo, los dispositivos que no pueden interpretar el estilo (como los navegadores antiguos) pueden seguir mostrando el contenido.

Sin CSS, los diseñadores web normalmente deben maquetar sus páginas con técnicas como tablas HTML que dificultan la accesibilidad para usuarios con discapacidad visual (véase Diseño web sin tablas §  Accesibilidad ).

Los frameworks CSS son bibliotecas predefinidas que permiten un estilo más sencillo y conforme a los estándares para páginas web mediante el lenguaje de hojas de estilo en cascada (CSS). Algunos frameworks CSS son Blueprint , Bootstrap , Foundation y Materialize. Al igual que las bibliotecas de lenguajes de programación y scripting, los frameworks CSS suelen incorporarse como hojas .css externas referenciadas en el HTML . Proporcionan diversas opciones predefinidas para el diseño y la maquetación de la página web. Aunque muchos de estos frameworks se han publicado, algunos autores los utilizan principalmente para la creación rápida de prototipos o para aprender, y prefieren crear manualmente el CSS adecuado para cada sitio publicado, evitando así la sobrecarga de diseño, mantenimiento y descarga que supone tener muchas funciones sin usar en el estilo del sitio. ^{[ 72 ]}<head>

A medida que aumenta el tamaño de los recursos CSS utilizados en un proyecto, un equipo de desarrollo suele necesitar decidir una metodología de diseño común para mantenerlos organizados. Los objetivos son la facilidad de desarrollo, la facilidad de colaboración durante el desarrollo y el rendimiento de las hojas de estilo implementadas en el navegador. Las metodologías populares incluyen OOCSS (CSS orientado a objetos), ACSS (CSS atómico), CSS (hoja de estilo en cascada orgánica), SMACSS (arquitectura escalable y modular para CSS) y BEM (bloque, elemento, modificador). ^{[ 73 ]}