CSS

El "pseudo-elemento" vuelve a dirigir aquí. Para los símbolos de pseudoelementos en química, consulte Fórmula esquelética § Símbolos de pseudoelementos .

Para el uso de CSS en Wikipedia, consulte Ayuda: Hojas de estilo en cascada .

Para otros usos, consulte CSS (desambiguación) .

Lenguaje de la hoja de estilo

Hojas de estilo en cascada (CSS)

Extensión de nombre de archivo	.css
Tipo de medio de Internet	texto / css
Identificador de tipo uniforme (UTI)	public.css
Desarrollado por	Consorcio World Wide Web (W3C)
Versión inicial	17 de diciembre de 1996 ; Hace 24 años ( 17 de diciembre de 1996 )
Último lanzamiento	CSS 2.1: Nivel 2 Revisión 1 (12 de abril de 2016 ; hace 5 años ) ( 12 de abril de 2016 )
Tipo de formato	Lenguaje de la hoja de estilo
Contenedor para	Reglas de estilo para elementos HTML (etiquetas)
Contenido por	Documentos HTML
¿ Formato abierto ?	sí
Sitio web	www .w3 .org / TR / CSS / #css

Hojas de estilo en cascada
Hoja de estilo CSS Jardín Zen El zen del diseño CSS
Conceptos
animaciones modelo de caja reemplazo de imagen caja flexible red
Filosofías
Sin mesa Sensible "Santo Grial"
Herramientas
Hablar con descaro a Menos Aguja CSSTidy
Comparaciones
Soporte CSS Idiomas de las hojas de estilo
Hojas de estilo en cascada
v t mi

HTML
HTML dinámico HTML5 audio lienzo video XHTML Básico Perfil móvil C-HTML Elemento HTML span y div Atributo HTML Marco HTML Editor de HTML Codificaciones de caracteres Unicode Código de lenguaje Modelo de objetos de documento Modelo de objetos del navegador Hojas de estilo CSS Familia tipográfica Colores web JavaScript WebGL WebCL W3C Validador WHATWG En modo capricho almacenamiento web Motor de renderizado
Comparaciones
Lenguajes de marcado de documentos Soporte HTML XHTML 1.1

Hojas de estilo en cascada ( CSS ) es un lenguaje de hojas de estilo que se utiliza para describir la presentación de un documento escrito en un lenguaje de marcado como HTML . ^[1] CSS es una tecnología fundamental de la World Wide Web , junto con HTML y JavaScript . ^[2]

CSS está diseñado para permitir la separación de la presentación y el contenido, incluidos el diseño , los colores y las fuentes . ^[3] Esta separación puede mejorar la accesibilidad del contenido , proporcionar más flexibilidad y control en la especificación de las características de la presentación, permitir que varias páginas web compartan el formato especificando el CSS relevante en un archivo .css separado, lo que reduce la complejidad y la repetición en el contenido estructural como además de permitir que el archivo .css se almacene en caché para mejorar la velocidad de carga de la página entre las páginas que comparten el archivo y su formato.

La separación de formato y contenido también hace que sea factible presentar la misma página de marcado en diferentes estilos para diferentes métodos de representación, como en pantalla, en forma impresa, por voz (a través de un navegador o lector de pantalla basado en voz ) y en Braille. dispositivos táctiles. CSS también tiene reglas para el formato alternativo si se accede al contenido en un dispositivo móvil . ^[4]

El nombre en cascada proviene del esquema de prioridad especificado para determinar qué regla de estilo se aplica si más de una regla coincide con un elemento en particular. Este esquema de prioridad en cascada es predecible.

Las especificaciones CSS son mantenidas por el World Wide Web Consortium (W3C). El tipo de medio de Internet (tipo MIME ) text/cssestá registrado para su uso con CSS por RFC 2318 (marzo de 1998). El W3C opera un servicio gratuito de validación de CSS para documentos CSS. ^[5]

Además de HTML, otros lenguajes de marcado admiten el uso de CSS, incluidos XHTML , XML simple , SVG y XUL .

Sintaxis

CSS tiene una sintaxis simple y utiliza varias palabras clave en inglés para especificar los nombres de varias propiedades de estilo.

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 .

Selector

En CSS, los selectores declaran a qué parte del marcado se aplica un estilo al hacer coincidir etiquetas y atributos en el marcado mismo.

Los selectores pueden aplicar a lo siguiente:

• todos los elementos de un tipo específico, por ejemplo, los encabezados de segundo nivel h2
• elementos especificados por atributo , en particular:
  • id : un identificador único dentro del documento, identificado con un prefijo hash, p. ej.#id
  • clase : un identificador que puede anotar múltiples elementos en un documento, identificado con un prefijo de punto, p. ej..classname
• elementos dependiendo de cómo se coloquen en relación con otros en el árbol del documento .

Las clases y los ID distinguen entre mayúsculas y minúsculas, comienzan con letras y pueden incluir caracteres alfanuméricos, guiones y guiones bajos. Una clase puede aplicarse a cualquier número de instancias de cualquier elemento. Un ID solo se puede aplicar a un solo elemento.

Las pseudoclases se utilizan en los selectores de CSS para permitir el formateo basado en información que no está contenida en el árbol del documento. Un ejemplo de una pseudoclase ampliamente utilizada es la que identifica el contenido solo cuando el usuario "señala" el elemento visible, generalmente manteniendo el cursor del mouse sobre él. Se adjunta a un selector como en o . Una pseudoclase clasifica los elementos del documento, como o , mientras que un pseudoelemento realiza una selección que puede constar de elementos parciales, como o . ^[6]:hovera:hover#elementid:hover:link:visited::first-line::first-letter

Los selectores pueden combinarse de muchas formas para lograr una gran especificidad y flexibilidad. ^[7] Se pueden unir varios selectores en una lista espaciada para especificar elementos por ubicación, tipo de elemento, id, clase o cualquier combinación de los mismos. El orden de los selectores es importante. Por ejemplo, se aplica a todos los elementos de la clase myClass que están dentro de los elementos div, mientras que se aplica a todos los elementos div que están dentro de los elementos de la clase myClass. Esto no debe confundirse con identificadores concatenados como el que se aplica a los elementos div de la clase myClass.div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

La siguiente tabla proporciona un resumen de la sintaxis del selector que indica el uso y la versión de CSS que lo introdujo. ^[8]

Patrón	Partidos	Primero definido en el nivel CSS
E	un elemento de tipo E	1
E:link	un elemento E es el ancla de origen de un hipervínculo cuyo destino aún no se ha visitado (: enlace) o ya se ha visitado (: visitado)	1
E:active	un elemento E durante ciertas acciones del usuario	1
E::first-line	la primera línea formateada de un elemento E	1
E::first-letter	la primera letra formateada de un elemento E	1
.c	todos los elementos con class = "c"	1
#myid	el elemento con id = "myid"	1
E.warning	un elemento E cuya clase es "advertencia" (el lenguaje del documento especifica cómo se determina la clase)	1
E#myid	un elemento E con ID igual a "myid"	1
.c#myid	el elemento con class = "c" e ID igual a "myid"	1
E F	un elemento F descendiente de un elemento E	1
*	cualquier elemento	2
E[foo]	un elemento E con un atributo "foo"	2
E[foo="bar"]	un elemento E cuyo valor de atributo "foo" es exactamente igual a "bar"	2
E[foo~="bar"]	un elemento E cuyo valor de atributo "foo" es una lista de valores separados por espacios en blanco, uno de los cuales es exactamente igual a "bar"	2
E[foo|="en"]	un elemento E cuyo atributo "foo" tiene una lista de valores separados por guiones que comienzan (desde la izquierda) con "en"	2
E:first-child	un elemento E, primer hijo de su padre	2
E:lang(fr)	un elemento de tipo E en el idioma "fr" (el idioma del documento especifica cómo se determina el idioma)	2
E::before	contenido generado antes que el contenido de un elemento E	2
E::after	contenido generado después del contenido de un elemento E	2
E > F	un elemento F hijo de un elemento E	2
E + F	un elemento F inmediatamente precedido por un elemento E	2
E[foo^="bar"]	un elemento E cuyo valor de atributo "foo" comienza exactamente con la cadena "bar"	3
E[foo$="bar"]	un elemento E cuyo valor de atributo "foo" termina exactamente con la cadena "bar"	3
E[foo*="bar"]	un elemento E cuyo valor de atributo "foo" contiene la subcadena "bar"	3
E:root	un elemento E, raíz del documento	3
E:nth-child(n)	un elemento E, el n-ésimo hijo de su padre	3
E:nth-last-child(n)	un elemento E, el n-ésimo hijo de su padre, contando desde el último	3
E:nth-of-type(n)	un elemento E, el hermano n-ésimo de su tipo	3
E:nth-last-of-type(n)	un elemento E, el n-ésimo hermano de su tipo, contando desde el último	3
E:last-child	un elemento E, último hijo de su padre	3
E:first-of-type	un elemento E, primer hermano de su tipo	3
E:last-of-type	un elemento E, último hermano de su tipo	3
E:only-child	un elemento E, hijo único de su padre	3
E:only-of-type	un elemento E, único hermano de su tipo	3
E:empty	un elemento E que no tiene hijos (incluidos los nodos de texto)	3
E:target	un elemento E es el destino del URI de referencia	3
E:enabled	un elemento de interfaz de usuario E que está habilitado	3
E:disabled	un elemento de interfaz de usuario E que está deshabilitado	3
E:checked	un elemento de la interfaz de usuario E que está marcado (por ejemplo, un botón de radio o una casilla de verificación)	3
E:not(s)	un elemento E que no coincide con el selector simple s	3
E ~ F	un elemento F precedido por un elemento E	3

Bloque de declaración

Un bloque de declaración consta de una lista de declaraciones entre llaves. Cada declaración en sí consta de una propiedad , dos puntos ( :) y un valor . Si hay varias declaraciones en un bloque, se ;debe insertar un punto y coma ( ) para separar cada declaración. Se puede utilizar un punto y coma opcional después de la última (o única) declaración. ^[9]

Las propiedades se especifican en el estándar CSS. Cada propiedad tiene un conjunto de valores posibles. Algunas propiedades pueden afectar a cualquier tipo de elemento y otras se aplican solo a grupos particulares de elementos. ^{[10] [11]}

Los valores pueden ser palabras clave, como "centro" o "heredar", o valores numéricos, como 200px(200 píxeles), 50vw(50 por ciento del ancho de la ventana gráfica) u 80% (80 por ciento del ancho del elemento principal). Los valores de color se pueden especificar con palabras clave (p. Ej., " "), Valores hexadecimales (p . Ej. , También abreviado como ), valores RGB en una escala de 0 a 255 (p . Ej. ), Valores RGBA que especifican tanto el color como la transparencia alfa (p . Ej. ) O HSL o valores HSLA (por ejemplo , ). ^[12]red#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

Unidades de longitud

Los valores numéricos distintos de cero que representan medidas lineales deben incluir una unidad de longitud, que puede ser un código alfabético o una abreviatura, como en 200pxo 50vw; o un signo de porcentaje, como en 80%. Algunas unidades - cm( centímetro ); in( pulgada ); mm( milímetro ); pc( pica ); y pt( punto ) - son absolutos , lo que significa que la dimensión renderizada no depende de la estructura de la página; otros - em( em ); ex( ex ) y px( píxel ) - son relativos, lo que significa que factores como el tamaño de fuente de un elemento principal pueden afectar la medida renderizada. Estas ocho unidades fueron una característica de CSS 1 ^[13] y se mantuvieron en todas las revisiones posteriores. Los valores CSS propuestos y las unidades de nivel del módulo 3, de aprobarse como Recomendación del W3C, proporcionan unidades de longitud otros siete: ch; Q; rem; vh; vmax; vmin; y vw. ^[14]

Utilice

Antes de CSS, casi todos los atributos de presentación de los documentos HTML estaban contenidos en el marcado HTML. Todos los colores de fuente, estilos de fondo, alineaciones de elementos, bordes y tamaños tenían que describirse explícitamente, a menudo repetidamente, dentro del HTML. CSS permite a los autores mover gran parte de esa información a otro archivo, la hoja de estilo, lo que resulta en un HTML considerablemente más simple.

Por ejemplo, los encabezados ( h1elementos), los subtítulos ( h2), los subtítulos secundarios ( h3), etc., se definen estructuralmente mediante HTML. En forma impresa y en pantalla, la elección de la fuente , el tamaño , el color y el énfasis para estos elementos es una presentación .

Antes de CSS, los autores de documentos que querían asignar tales características tipográficas a, digamos, todos los h2encabezados tenían que repetir el marcado de presentación HTML para cada aparición de ese tipo de encabezado. Esto hizo que los documentos fueran más complejos, más grandes, más propensos a errores y difíciles de mantener. CSS permite la separación de 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 impresas y en pantalla. CSS también define estilos no visuales, como la velocidad de lectura y el énfasis para lectores de texto auditivos. El W3C ahora ha desaprobado el uso de todo el marcado HTML de presentación. ^[15]

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

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

Usando CSS, el mismo elemento se puede codificar usando propiedades de estilo en lugar de atributos de presentación HTML:

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

Es posible que las ventajas de esto no sean claras de inmediato, pero el poder de CSS se hace más evidente cuando las propiedades de estilo se colocan en un elemento de estilo interno o, mejor aún, en un archivo CSS externo. Por ejemplo, suponga que el documento contiene el elemento de estilo:

< estilo >  h1  {  color :  rojo ;  } </ estilo >

Todos los h1elementos del documento se volverán rojos automáticamente sin necesidad de ningún código explícito. Si el autor más tarde quisiera hacer que los h1elementos fueran azules, esto podría hacerse cambiando el elemento de estilo a:

< estilo >  h1  {  color :  azul ;  } </ estilo >

en lugar de 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 cargar con una sintaxis similar a:

< link  href = "ruta / a / archivo.css"  rel = "hoja de estilo"  tipo = "texto / css" >

Esto disocia aún más el estilo del documento HTML y hace posible cambiar el estilo de varios documentos simplemente editando un archivo CSS externo compartido.

Fuentes

La información CSS puede obtenerse de varias fuentes. Estas fuentes pueden ser el navegador web, el usuario y el autor. La información del autor se puede clasificar en línea, tipo de medio, importancia, especificidad del selector, orden de reglas, herencia y definición de propiedad. La información de estilo CSS puede estar en un documento separado o puede estar incrustada en un documento HTML. Se pueden importar varias hojas de estilo. Se pueden aplicar diferentes estilos dependiendo del dispositivo de salida que se utilice; por ejemplo, la versión en pantalla puede ser bastante diferente de la versión impresa, por lo que los autores pueden adaptar la presentación de manera adecuada a cada medio.

La hoja de estilo con mayor prioridad controla la visualización del contenido. Las declaraciones que no se establecen en la fuente de mayor prioridad se pasan a una fuente de menor prioridad, como el estilo de agente de usuario. El proceso se llama cascada .

Uno de los objetivos de CSS es permitir a los usuarios un mayor control sobre la presentación. Alguien a quien le resulte difícil leer los títulos en cursiva roja puede aplicar una hoja de estilo diferente. Dependiendo del navegador y del sitio web, un usuario puede elegir entre varias hojas de estilo proporcionadas por los diseñadores, o puede eliminar todos los estilos agregados y ver el sitio usando el estilo predeterminado del navegador, o puede anular solo el estilo de encabezado en cursiva roja sin alterar otros. atributos.

Esquema de prioridad CSS (de mayor a menor)

Prioridad	Tipo de fuente CSS	Descripción
1	Importancia	La anotación " " sobrescribe los tipos de prioridad anteriores!important
2	En línea	Un estilo aplicado a un elemento HTML mediante el atributo "estilo" HTML
3	Tipo de medio	Una definición de propiedad se aplica a todos los tipos de medios, a menos que se defina un CSS específico de medios
4	Usuario definido	La mayoría de los navegadores tienen la función de accesibilidad: un CSS definido por el usuario
5	Especificidad del selector	Un selector contextual específico ( ) sobrescribe la definición genérica#heading p
6	Orden de reglas	La última declaración de regla tiene una prioridad más alta
7	Herencia de los padres	Si no se especifica una propiedad, se hereda de un elemento padre
8	Definición de propiedad CSS en documento HTML	La regla CSS o el estilo CSS en línea sobrescribe un valor predeterminado del navegador
9	Navegador predeterminado	La prioridad más baja: el valor predeterminado del navegador está determinado por las especificaciones de valor inicial de W3C

Especificidad

La especificidad se refiere a los pesos relativos de varias reglas. ^[16] Determina qué estilos se aplican a un elemento cuando se puede aplicar 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 una especificidad de 1,0,0. Debido a que los valores de especificidad no se transfieren como en el sistema decimal, se usan comas para separar los "dígitos" ^[17] (una regla CSS que tenga 11 elementos y 11 clases tendría una especificidad de 11,11, no 121).

Por lo tanto, los siguientes selectores de reglas dan como resultado la especificidad indicada:

Selectores	Especificidad
h1 {color: white;}	0, 0, 0, 1
p em {color: green;}	0, 0, 0, 2
.grape {color: red;}	0, 0, 1, 0
p.bright {color: blue;}	0, 0, 1, 1
p.bright em.dark {color: yellow;}	0, 0, 2, 2
#id218 {color: brown;}	0, 1, 0, 0
style=" "	1, 0, 0, 0

Ejemplos

Considere este fragmento HTML:

<! 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 >

En el ejemplo anterior, la declaración del styleatributo anula la del <style>elemento porque tiene una mayor especificidad y, por lo tanto, el párrafo aparece en verde.

Herencia

La herencia es una característica clave en CSS; se basa en la relación ancestro-descendiente para operar. 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. ^{[16] La} herencia se basa en el árbol del documento, que es la jerarquía de XHTML.elementos en una página basados ​​en el anidamiento. Los elementos descendientes pueden heredar valores de propiedad CSS de cualquier elemento ancestro que los incluya. En general, los elementos descendientes heredan propiedades relacionadas con el texto, pero sus propiedades relacionadas con el cuadro no se heredan. 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, espacios en blanco y espaciado de palabras. Las propiedades que no se pueden heredar son fondo, borde, visualización, flotante y claro, altura y ancho, margen, altura y ancho mínimas y máximas, contorno, desbordamiento, relleno, posición, decoración de texto, alineación vertical y z -índice.

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

La herencia en CSS no es lo mismo que la herencia en los lenguajes de programación basados ​​en clases , donde es posible definir la clase B como "como la clase A, pero con modificaciones". ^[18] Con CSS, es posible diseñar un elemento con "clase A, pero con modificaciones". Sin embargo, no es posible definir una clase B de CSS como esa, que luego podría usarse para diseñar varios elementos sin tener que repetir las modificaciones.

Ejemplo

Dada la siguiente hoja de estilo:

h1  {  color :  rosa ; }

Supongamos que hay un elemento h1 con un elemento de énfasis (em) dentro:

< h1 > Esto es para < em > ilustrar </ em > herencia </ h1 >

Si no se asigna ningún color al elemento em, la palabra enfatizada "ilustrar" hereda el color del elemento padre, h1. La hoja de estilo h1 tiene el color rosa, por lo tanto, el elemento em es también rosa.

Espacio en blanco

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

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

es funcionalmente equivalente a este:

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

Una forma común de formatear CSS para mejorar la legibilidad es aplicar una sangría a cada propiedad y darle su propia línea. Además de formatear CSS para facilitar la lectura, las propiedades abreviadas se pueden usar para escribir el código más rápido, que también se procesa más rápidamente cuando se procesa: ^[19]

cuerpo  {  desbordamiento :  oculto ;  fondo :  # 000  url ( images / bg.gif )  no repetir  arriba a la izquierda  ; }

Posicionamiento

CSS 2.1 define tres esquemas de posicionamiento:

Flujo normal

Los elementos en línea se distribuyen 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 a continuación. Los elementos de bloque se apilan verticalmente, como párrafos y como los elementos de una lista con viñetas. El flujo normal también incluye el posicionamiento relativo de elementos de bloque o en línea y cajas de ejecución.

Flotadores

Un artículo flotante se saca del flujo normal y se desplaza hacia la izquierda o hacia la derecha tanto como sea posible en el espacio disponible. El resto del contenido fluye junto al elemento flotante.

Posicionamiento absoluto

Un artículo absolutamente posicionado no tiene lugar ni efecto sobre el flujo normal de otros artículos. Ocupa su posición asignada en su contenedor independientemente de otros artículos. ^[20]

Propiedad de posición

Hay cuatro valores posibles de la positionpropiedad. Si un artículo se coloca en cualquier otra manera que static, a continuación, las propiedades adicionales top, bottom, left, y rightse utilizan para especificar desplazamientos y posiciones.

Estático

El valor predeterminado coloca el artículo en el flujo normal.

Relativo

El artículo se coloca en el flujo normal y luego se desplaza o se desplaza desde esa posición. Los elementos de flujo posteriores se disponen como si el elemento no se hubiera movido.

Absoluto

Especifica el posicionamiento absoluto . El elemento se coloca en relación con su antepasado no estático más cercano.

Reparado

El elemento está absolutamente posicionado en una posición fija en la pantalla incluso cuando el resto del documento se desplaza ^[20]

Flotar y borrar

La floatpropiedad puede tener uno de tres valores. Los elementos fijos o en posición absoluta no pueden flotar. Otros elementos normalmente fluyen alrededor de elementos flotantes, a menos que su clearpropiedad les impida hacerlo .

izquierda

El elemento flota a la izquierda de la línea en la que habría aparecido; otros elementos pueden fluir alrededor de su lado derecho.

derecho

El elemento flota a la derecha de la línea en la que habría aparecido; otros elementos pueden fluir alrededor de su lado izquierdo.

claro

Fuerza al elemento a aparecer debajo ('claro') elementos flotantes a la izquierda ( ), derecha ( ) o ambos lados ( ). ^{[20] [21]}clear:leftclear:rightclear:both

Historia

Håkon Wium Lie , director técnico de la empresa Opera Software y cocreador de los estándares web CSS

CSS fue propuesto por primera vez por Håkon Wium Lie el 10 de octubre de 1994. ^[22] En ese momento, Lie estaba trabajando con Tim Berners-Lee en el CERN . ^{[23] Al} mismo tiempo se propusieron varios otros lenguajes de hojas de estilo para la web, y los debates sobre listas de correo públicas y dentro del World Wide Web Consortium dieron como resultado la primera Recomendación CSS del W3C (CSS1) ^{[24] que} se publicó en 1996. En particular influyó una propuesta de Bert Bos ; se convirtió en coautor de CSS1 y es considerado co-creador de CSS. ^[25]

Las hojas de estilo han existido de una forma u otra desde los inicios del lenguaje de marcado estándar generalizado ( SGML ) en la década de 1980, y CSS se desarrolló para proporcionar hojas de estilo para la web. ^[26] Un requisito para un lenguaje de hojas de estilo web era que las hojas de estilo procedieran de diferentes fuentes en la web. Por lo tanto, los lenguajes de hojas de estilo existentes como DSSSL y FOSI no eran adecuados. CSS, por otro lado, permite que el estilo de un documento sea influenciado por múltiples hojas de estilo por medio de estilos "en cascada". ^[26]

A medida que HTML creció, llegó a abarcar una variedad más amplia de capacidades estilísticas para satisfacer las demandas de los desarrolladores web . Esta evolución le dio al diseñador más control sobre la apariencia del sitio, a costa de un HTML más complejo. Las variaciones en las implementaciones de los navegadores web , como ViolaWWW y WorldWideWeb , ^[27] dificultaban la apariencia uniforme del sitio y los usuarios tenían menos control sobre cómo se mostraba el contenido web. El navegador / editor desarrollado por Tim Berners-Lee tenía hojas de estilo que estaban codificadas en el programa. Por lo tanto, las hojas de estilo no se pueden vincular a documentos en la web. ^[23] Robert Cailliau, también del CERN, quería separar la estructura de la presentación para que diferentes hojas de estilo pudieran describir diferentes presentaciones para impresión, presentaciones en pantalla y editores. ^[27]

Mejorar las capacidades de presentación web fue un tema de interés para muchos en la comunidad web y se propusieron nueve lenguajes de hojas de estilo diferentes en la lista de correo estilo www. ^[26] De estas nueve propuestas, dos fueron especialmente influyentes en lo que se convirtió en CSS: Hojas de estilo HTML en cascada ^[22] y Propuesta de hoja de estilo basada en flujo (SSP). ^{[25] [28]} Dos navegadores sirvieron como banco de pruebas para las propuestas iniciales; Lie trabajó con Yves Lafon para implementar CSS en Dave Raggett 's Arena navegador. ^{[29] [30] [31]} Bert Bos implementó su propia propuesta SSP en el navegador Argo . ^[25]A partir de entonces, Lie y Bos trabajaron juntos para desarrollar el estándar CSS (se eliminó la 'H' del nombre porque estas hojas de estilo también podrían aplicarse a otros lenguajes de marcado además de HTML). ^[23]

La propuesta de Lie se presentó en la conferencia " Mosaic and the Web " (más tarde llamada WWW2) en Chicago, Illinois en 1994, y nuevamente con Bert Bos en 1995. ^[23] Alrededor de esta época, el W3C ya se estaba estableciendo y se interesó en el desarrollo de CSS. Con ese fin, organizó un taller presidido por Steven Pemberton . Esto resultó en que el W3C agregara trabajo sobre CSS a los entregables de la junta de revisión editorial HTML (ERB). Lie y Bos fueron el personal técnico principal en este aspecto del proyecto, y también participaron miembros adicionales, incluido Thomas Reardon de Microsoft. En agosto de 1996, Netscape Communication Corporation presentó un lenguaje de hoja de estilo alternativo llamadoHojas de estilo JavaScript (JSSS). ^[23] La especificación nunca se terminó y está en desuso. ^[32] A finales de 1996, CSS estaba listo para convertirse en oficial, y la Recomendación de nivel 1 de CSS se publicó en diciembre.

El desarrollo de HTML, CSS y DOM se había llevado a cabo en un grupo, el Comité de Revisión Editorial de HTML (ERB). A principios de 1997, el ERB se dividió en tres grupos de trabajo: grupo de trabajo HTML , presidido por Dan Connolly de W3C; Grupo de trabajo DOM, presidido por Lauren Wood de SoftQuad ; y el grupo de trabajo de CSS , presidido por Chris Lilley de W3C.

El Grupo de Trabajo de CSS comenzó a abordar cuestiones que no se habían abordado con el nivel 1 de CSS, lo que resultó en la creación del nivel 2 de CSS el 4 de noviembre de 1997. Se publicó como Recomendación del W3C el 12 de mayo de 1998. Nivel 3 de CSS, que fue iniciado en 1998, todavía está en desarrollo a partir de 2014.

En 2005, los grupos de trabajo de CSS decidieron hacer cumplir los requisitos de los estándares de manera más estricta. Esto significó que los estándares ya publicados como CSS 2.1, CSS 3 Selectors y CSS 3 Text se retiraron del nivel de recomendación candidata al nivel de borrador de trabajo.

Dificultad con la adopción

Esta sección debe actualizarse . Actualice este artículo para reflejar los eventos recientes o la información disponible recientemente. ( Enero de 2019 )

La especificación CSS 1 se completó en 1996. Internet Explorer 3 ^{[23] de} Microsoft se lanzó ese año, presentando cierto soporte limitado para CSS. IE 4 y Netscape 4.x agregaron más soporte, pero generalmente estaba incompleto y tenía muchos errores que impedían que CSS se adoptara de manera útil. Pasaron más de tres años antes de que cualquier navegador web lograra una implementación casi completa de la especificación. Internet Explorer 5.0 para Macintosh , enviado en marzo de 2000, fue el primer navegador en tener soporte completo (mejor que el 99 por ciento) CSS 1, ^[33] superando a Opera., que había sido el líder desde la introducción del soporte CSS quince meses antes. Otros navegadores siguieron poco después, y muchos de ellos implementaron adicionalmente partes de CSS 2. ^{[ cita requerida ]}

Sin embargo, incluso cuando los navegadores web posteriores de la 'versión 5' comenzaron a ofrecer una implementación bastante completa de CSS, seguían siendo incorrectos en ciertas áreas y estaban plagados de inconsistencias, errores y otras peculiaridades . Microsoft Internet Explorer 5.x para Windows , a diferencia del IE muy diferente para Macintosh , tenía una implementación defectuosa del ' modelo de caja CSS ', en comparación con los estándares CSS. Tales inconsistencias y variaciones en el soporte de funciones dificultaron a los diseñadores lograr una apariencia consistente en todos los navegadores y plataformas sin el uso de soluciones alternativas denominadas hacks y filtros CSS . Los errores del modelo de caja de IE / Windows eran tan graves que, cuandoSe lanzó Internet Explorer 6 , Microsoft introdujo un modo de interpretación de CSS compatible con versiones anteriores (" modo peculiaridades ") junto con un "modo estándar" alternativo y corregido. Otros navegadores que no son de Microsoft también proporcionaron dicha capacidad de comportamiento de cambio de 'modo'. Por lo tanto, se hizo necesario que los autores de archivos HTML se aseguraran de que contenían un marcador distintivo especial de `` CSS previsto para cumplir con los estándares '' para mostrar que los autores pretendían que CSS se interpretara correctamente, de conformidad con los estándares, en lugar de estar diseñado para el ahora largo navegador IE5 / Windows obsoleto. Sin este marcador, los navegadores web que tienen la capacidad de cambio de 'modo peculiar' cambiarán el tamaño de los objetos en las páginas web como lo haría IE5 / Windows en lugar de seguir los estándares CSS. ^{[ cita requerida ]}

Los problemas con la adopción irregular de CSS, junto con las erratas en la especificación original, llevaron al W3C a revisar el estándar CSS 2 en CSS 2.1, que se acercó a una instantánea funcional del soporte CSS actual en los navegadores HTML. Se eliminaron algunas propiedades de CSS 2 que ningún navegador implementó con éxito y, en algunos casos, se cambiaron los comportamientos definidos para alinear el estándar con las implementaciones existentes predominantes. CSS 2.1 se convirtió en una Recomendación Candidata el 25 de febrero de 2004, pero CSS 2.1 se retiró al estado de Borrador de Trabajo el 13 de junio de 2005, ^[34] y sólo volvió al estado de Recomendación Candidata el 19 de julio de 2007. ^[35]

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

Prefijos de proveedores

Los proveedores de navegadores individuales ocasionalmente introdujeron nuevos parámetros antes de la estandarización y universalización. Para evitar interferir con las implementaciones futuras, los vendedores anteponen nombres únicos a los parámetros, como -moz-para Mozilla Firefox , -webkit-lleva el nombre del motor de navegación de Safari de Apple , -o-para el navegador Opera y -ms-para Microsoft Internet Explorer .

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

Las propiedades prefijadas quedan obsoletas en el momento de la estandarización. Hay programas disponibles para agregar automáticamente prefijos para navegadores más antiguos y para señalar versiones estandarizadas de parámetros con prefijos. Dado que los prefijos se limitan a un pequeño subconjunto de navegadores, la eliminación del prefijo permite que otros navegadores vean la funcionalidad. Una excepción son ciertas -webkit-propiedades con prefijos obsoletos , que son tan comunes y persistentes en la web que otras familias de navegadores han decidido admitirlas por compatibilidad. ^[40]

Variaciones

CSS tiene varios niveles y perfiles. Cada nivel de CSS se basa en el último, por lo general, agrega nuevas funciones y generalmente se denota como CSS 1, CSS 2, CSS 3 y CSS 4. Los perfiles suelen ser un subconjunto de uno o más niveles de CSS creados para un dispositivo o interfaz de usuario en particular. . Actualmente existen perfiles para dispositivos móviles, impresoras y televisores. Los perfiles no deben confundirse con los tipos de medios, que se agregaron en CSS 2.

CSS 1

La primera especificación CSS que se convirtió en una Recomendación oficial del W3C es CSS nivel 1, publicada el 17 de diciembre de 1996. Håkon Wium Lie y Bert Bos son los desarrolladores originales. ^{[41] [42]} Entre sus capacidades se encuentran el soporte para

• Propiedades de fuente como tipografía y énfasis
• Color del texto, fondos y otros elementos
• Atributos de texto como espaciado entre palabras, letras y líneas de texto
• Alineación de texto, imágenes, tablas y otros elementos.
• Margen, borde, relleno y posicionamiento para la mayoría de los elementos
• Identificación única y clasificación genérica de grupos de atributos

El W3C ya no mantiene la Recomendación CSS 1. ^[43]

CSS 2

La especificación CSS nivel 2 fue desarrollada por el W3C y publicada como recomendación en mayo de 1998. Un superconjunto de CSS 1, CSS 2 incluye una serie de nuevas capacidades como posicionamiento absoluto, relativo y fijo de elementos e índice z , el concepto de tipos de medios, soporte para hojas de estilo auditivas (que luego fueron reemplazadas por los módulos de voz CSS 3) ^[44] y texto bidireccional, y nuevas propiedades de fuente como sombras.

El W3C ya no mantiene la recomendación CSS 2. ^[45]

CSS 2.1

La revisión 1 de CSS nivel 2, a menudo denominada "CSS 2.1", corrige errores en CSS 2, elimina las características que no son compatibles o que no son completamente interoperables y agrega extensiones de navegador ya implementadas a la especificación. Para cumplir con el Proceso del W3C para estandarizar las especificaciones técnicas, CSS 2.1 pasó de un estado de Borrador de Trabajo a un estado de Recomendación Candidata durante muchos años. CSS 2.1 se convirtió por primera vez en una recomendación candidata el 25 de febrero de 2004, pero se volvió a convertir en un Borrador de trabajo el 13 de junio de 2005 para su posterior revisión. Regresó a la Recomendación Candidata el 19 de julio de 2007 y luego se actualizó dos veces en 2009. Sin embargo, debido a que se hicieron cambios y aclaraciones, nuevamente volvió al Borrador de Trabajo de Última Convocatoria el 7 de diciembre de 2010.

CSS 2.1 pasó a la Recomendación propuesta el 12 de abril de 2011. ^[46] Después de ser revisada por el Comité Asesor del W3C, finalmente se publicó como Recomendación del W3C el 7 de junio de 2011. ^[47]

CSS 2.1 se planeó como la primera y última revisión del nivel 2, pero el trabajo de baja prioridad en CSS 2.2 comenzó en 2015.

CSS 3

"CSS3" vuelve a dirigir aquí. Para otros usos, consulte CSS3 (desambiguación) .

A diferencia de CSS 2, que es una gran especificación única que define varias características, CSS 3 se divide en varios documentos separados llamados "módulos". Cada módulo agrega nuevas capacidades o extiende características definidas en CSS 2, preservando la compatibilidad con versiones anteriores. El trabajo en el nivel 3 de CSS comenzó en el momento de la publicación de la recomendación original de CSS 2. Los primeros borradores de CSS 3 se publicaron en junio de 1999. ^[48]

Debido a la modularización, los diferentes módulos tienen diferentes estados y estabilidad. ^[49]

Algunos módulos tienen el estado de Candidata Recomendación ( CR ) y se consideran moderadamente estables. En la etapa de CR , se recomienda a las implementaciones que eliminen los prefijos de los proveedores. ^[50]

Este artículo debe actualizarse . Actualice este artículo para reflejar los eventos recientes o la información disponible recientemente. ( Enero de 2021 )

Resumen de las principales especificaciones de los módulos ^[51]

Módulo	Título de la especificación	Estado	Fecha
css3-fondo	Módulo de fondos y bordes CSS, nivel 3	Candidato Rec.	Dic 2020
css3-box	Modelo de caja básica CSS	Candidato Rec.	Dic 2020
css-cascada-3	Nivel 3 de herencia y cascada de CSS	Recomendación	Febrero de 2021
css3-color	Módulo de color CSS nivel 3	Recomendación	Junio ​​de 2018
css3-contenido	Módulo de contenido generado y reemplazado CSS3	Borrador de trabajo 2	Ago. De 2019
css-fonts-3	Módulo de fuentes CSS nivel 3	Recomendación	Sep. De 2018
css3-gcpm	Contenido generado por CSS para el módulo de medios paginados	Borrador de trabajo	Mayo de 2014
diseño css3	Módulo de diseño de plantilla CSS	Nota	Mar. De 2015
css3-mediaqueries	Preguntas de los medios	Recomendación	Junio ​​de 2012
mediaqueries-4	Consultas de medios de nivel 4	Candidato Rec.	Julio de 2020
css3-multicol	Módulo de diseño de varias columnas, nivel 1	Borrador de trabajo	Febrero de 2021
css3-página	Módulo de medios paginados CSS, nivel 3	Borrador de trabajo	Oct. De 2018
selectores-3	Selectores Nivel 3	Recomendación	Noviembre de 2018
selectores-4	Selectores Nivel 4	Borrador de trabajo	Noviembre de 2018
css3-ui	Módulo de interfaz de usuario básica de CSS, nivel 3 (UI de CSS3)	Recomendación	Junio ​​de 2018

CSS 4

"CSS4" vuelve a dirigir aquí. Para otros usos, consulte CSS4 (desambiguación) .

Reproducir medios

Jen Simmons discutiendo el estado de CSS en 2019, mientras  se avanzaban varios módulos de CSS 4

No existe una especificación CSS4 única e integrada, ^[52] porque la especificación se ha dividido en muchos módulos separados que se nivelan de forma independiente.

Los módulos que se basan en cosas de CSS Nivel 2 comenzaron en el Nivel 3. Algunos de ellos ya han alcanzado el Nivel 4 o ya se están acercando al Nivel 5. Otros módulos que definen una funcionalidad completamente nueva, como Flexbox , ^[53] han sido designados como Nivel 1 y algunos de ellos se acercan al nivel 2.

El Grupo de Trabajo de CSS a veces publica "Instantáneas", una colección de módulos completos y partes de otros borradores que se consideran lo suficientemente estables para ser implementados por los desarrolladores de navegadores. Hasta el momento, cinco de esos documentos de "mejores prácticas actuales" se han publicado como Notas en 2007, ^[54] 2010, ^[55] 2015, ^[56] 2017, ^[57] y 2018. ^[58]

Dado que estas instantáneas de especificación están destinadas principalmente a desarrolladores, ha habido una demanda creciente de un documento de referencia con versiones similares dirigido a los autores, que presentaría el estado de las implementaciones interoperables tal como lo documentan sitios como Can I Use ... ^[59] y Mozilla Developer. La red. ^[60] Se estableció un grupo comunitario del W3C a principios de 2020 con el fin de debatir y definir dicho recurso. ^[61] El tipo real de control de versiones también está sujeto a debate, lo que significa que el documento una vez producido podría no llamarse "CSS4".

Soporte de navegador

Más información: Comparación de motores de navegador web (compatibilidad con CSS)

Cada navegador web utiliza un motor de diseño para representar páginas web y la compatibilidad con la funcionalidad CSS no es coherente entre ellos. Debido a que los navegadores no analizan CSS perfectamente, se han desarrollado múltiples técnicas de codificación para dirigirse a navegadores específicos con soluciones alternativas (comúnmente conocidas como trucos CSS o filtros CSS). La adopción de nuevas funciones en CSS puede verse obstaculizada por la falta de compatibilidad en los principales navegadores. Por ejemplo, Internet Explorer tardó en agregar soporte para muchas características de CSS 3, lo que ralentizó la adopción de esas características y dañó la reputación del navegador entre los desarrolladores. ^[62]Con el fin de garantizar una experiencia coherente para sus usuarios, los desarrolladores web a menudo prueban sus sitios en varios sistemas operativos, navegadores y versiones de navegadores, lo que aumenta el tiempo de desarrollo y la complejidad. Se han creado herramientas como BrowserStack para reducir la complejidad de mantener estos entornos.

Además de estas herramientas de prueba, muchos sitios mantienen listas de compatibilidad del navegador para propiedades CSS específicas, incluidos CanIUse y Mozilla Developer Network . Además, CSS 3 define consultas de características, que proporcionan una @supportsdirectiva que permitirá a los desarrolladores apuntar a navegadores con soporte para ciertas funciones directamente dentro de su CSS. ^[63] CSS que no es compatible con los navegadores más antiguos a veces también se puede parchear usando polyfills de JavaScript., que son fragmentos de código JavaScript diseñados para que los navegadores se comporten de forma coherente. Estas soluciones, y la necesidad de admitir la funcionalidad de reserva, pueden agregar complejidad a los proyectos de desarrollo y, en consecuencia, las empresas definen con frecuencia una lista de versiones de navegador que admitirán y no admitirán.

A medida que los sitios web adoptan estándares de código más nuevos que son incompatibles con los navegadores más antiguos, estos navegadores pueden verse impedidos de acceder a muchos de los recursos en la web (a veces de manera intencional). ^[64] Muchos de los sitios más populares en Internet no solo se degradan visualmente en los navegadores más antiguos debido a un soporte de CSS deficiente, sino que no funcionan en absoluto, en gran parte debido a la evolución de JavaScript y otras tecnologías web.

Limitaciones

Algunas limitaciones señaladas de las capacidades actuales de CSS incluyen:

Los selectores no pueden ascender

Actualmente, CSS no ofrece ninguna forma de seleccionar un padre o un antepasado de un elemento que satisfaga ciertos criterios. ^[65] Selectores CSS Nivel 4, que todavía está en estado de Borrador de Trabajo, propone tal selector, ^[66] pero solo como parte del perfil completo del selector de "instantáneas", no el perfil rápido "en vivo" usado en el estilo CSS dinámico. ^[67] Un esquema de selección más avanzado (como XPath ) permitiría hojas de estilo más sofisticadas. Las principales razones por las que el Grupo de Trabajo de CSS rechazó anteriormente propuestas de selectores principales están relacionadas con el rendimiento del navegador y los problemas de representación incremental . ^[68]

No se puede declarar explícitamente un nuevo alcance independientemente de la posición

Las reglas de alcance para propiedades como el índice z buscan el elemento principal más cercano con un atributo de posición: absoluto o posición: relativo. Este extraño acoplamiento 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, evitando que se utilice el alcance deseado de un elemento padre.

Comportamiento dinámico de pseudoclase no controlable

CSS implementa pseudoclases que permiten cierto grado de retroalimentación del usuario mediante la aplicación condicional de estilos alternativos. Una pseudoclase CSS, " ", es dinámica (equivalente a JavaScript "onmouseover") y tiene potencial de uso indebido (p. Ej., Implementación de ventanas emergentes de proximidad del cursor), ^[69] pero CSS no tiene la capacidad de que un cliente lo desactive (no propiedad similar a "deshabilitar") o limitar sus efectos (no hay valores similares a "no cambiar" para cada propiedad).:hover

No se pueden nombrar reglas

No hay forma de nombrar una regla CSS, lo que permitiría (por ejemplo) que los scripts del lado del cliente se refieran a la regla incluso si cambia su selector.

No se pueden incluir estilos de una regla en otra regla

Los estilos CSS a menudo deben duplicarse en varias reglas para lograr el efecto deseado, lo que provoca un mantenimiento adicional y requiere pruebas más exhaustivas. Se propusieron algunas características nuevas de CSS para resolver esto, pero luego se abandonaron. ^{[70] [71]}

No se puede orientar a texto específico sin alterar el marcado

Además del pseudoelemento, uno no puede apuntar a rangos específicos de texto sin necesidad de utilizar elementos de marcador de posición.:first-letter

Problemas anteriores

Además, varios problemas más estaban presentes en versiones anteriores del estándar CSS, pero se han solucionado:

Limitaciones de control vertical

Aunque la ubicación horizontal de los elementos siempre fue fácil de controlar, la ubicación vertical a menudo era poco intuitiva, complicada o completamente imposible. Las tareas simples, como centrar un elemento verticalmente o colocar un pie de página no más alto que la parte inferior de la ventana gráfica, requerían reglas de estilo complicadas y poco intuitivas, o reglas simples pero que no eran compatibles. ^[65] El módulo de caja flexible mejoró la situación considerablemente y el control vertical es mucho más sencillo y compatible con todos los navegadores modernos. ^[72] Los navegadores más antiguos todavía tienen esos problemas, pero la mayoría de ellos (principalmente Internet Explorer 9 y versiones anteriores) ya no son compatibles con sus proveedores. ^[73]

Ausencia de expresiones

No había una capacidad estándar para especificar valores de propiedad como expresiones simples (como ). Esto sería útil en una variedad de casos, como calcular el tamaño de las columnas sujetas a una restricción en la suma de todas las columnas. Las versiones 5 a 7 de Internet Explorer admiten una declaración de expresión propietaria (), ^[74] con una funcionalidad similar. Esta declaración de expresión patentada () ya no se admite desde Internet Explorer 8 en adelante, excepto en los modos de compatibilidad. Esta decisión se tomó por "cumplimiento de estándares, rendimiento del navegador y razones de seguridad". ^[74] Sin embargo, el CSS WG ha publicado una recomendación candidata con un valor calc () para abordar esta limitación ^[75]margin-left: 10% – 3em + 4px;y desde entonces ha sido compatible con todos los navegadores modernos. ^[76]

Falta de declaración de columna

Aunque es posible en CSS 3 actual (usando el column-countmódulo), ^[77] diseños con múltiples columnas pueden ser complejos de implementar en CSS 2.1. Con CSS 2.1, el proceso a menudo se realiza utilizando elementos flotantes, que a menudo se representan de manera diferente por diferentes navegadores, diferentes formas de pantalla de computadora y diferentes proporciones de pantalla configuradas en monitores estándar. Todos los navegadores modernos admiten esta función CSS 3 de una forma u otra. ^[78]

Ventajas

Separación de contenido de presentación

Artículo principal: Separación de presentación y contenido.

CSS facilita la publicación de contenido en múltiples formatos de presentación basados ​​en parámetros nominales. Los parámetros nominales incluyen preferencias explícitas del usuario, diferentes navegadores web, el tipo de dispositivo que se utiliza para ver el contenido (una computadora de escritorio o dispositivo móvil), la ubicación geográfica del usuario y muchas otras variables.

Consistencia en todo el sitio

Artículo principal: Hoja de estilo (desarrollo web)

Cuando se usa CSS de manera efectiva, en términos de herencia y "cascada", se puede usar una hoja de estilo global para afectar y diseñar elementos en todo el sitio. Si surge la situación en la que el estilo de los elementos debe cambiarse o ajustarse, estos cambios se pueden realizar editando las reglas en la hoja de estilo global. Antes de CSS, este tipo de mantenimiento era más difícil, costoso y requería más tiempo.

Banda ancha

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

Cambio de formato de página

Artículo principal: mejora progresiva

Con un simple cambio de una línea, se puede usar una hoja de estilo diferente para la misma página. Esto tiene ventajas para la accesibilidad, además de brindar la capacidad de adaptar una página o sitio a diferentes dispositivos de destino. Además, los dispositivos que no pueden entender el estilo aún muestran el contenido.

Accesibilidad

Sin CSS, los diseñadores web normalmente deben diseñar sus páginas con técnicas como tablas HTML que dificultan la accesibilidad para los usuarios con problemas de visión (consulte Diseño web sin tabla # Accesibilidad ).

Estandarización

Frameworks

Artículo principal: marco CSS

Los marcos CSS son bibliotecas preparadas previamente que están destinadas a permitir un estilo de páginas web más fácil y compatible con los estándares utilizando el lenguaje Cascading Style Sheets. Los marcos CSS incluyen Blueprint , Bootstrap , Cascade Framework , Foundation y Materialise. Al igual que las bibliotecas de lenguaje de programación y scripting, los marcos CSS generalmente se incorporan como hojas .css externas a las que se hace referencia en el HTML.<head>. Proporcionan una serie de opciones listas para usar para diseñar y diseñar la página web. Aunque muchos de estos marcos se han publicado, algunos autores los utilizan principalmente para la creación rápida de prototipos, o para aprender de ellos, y prefieren 'crear' CSS que sea apropiado para cada sitio publicado sin la sobrecarga de diseño, mantenimiento y descarga de tener muchas funciones no utilizadas. en el estilo del sitio. ^[79]

Metodologías de diseño

A medida que aumenta el tamaño de los recursos CSS utilizados en un proyecto, un equipo de desarrollo a menudo necesita 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), oCSS (hoja de estilo en cascada orgánica), SMACSS (arquitectura escalable y modular para CSS) y BEM (bloque, elemento, modificador). ^[80]

Referencias

1. "Guía para desarrolladores de CSS" . Red de desarrolladores de Mozilla . Archivado desde el original el 25 de septiembre de 2015 . Consultado el 24 de septiembre de 2015 .
2. Flanagan, David. JavaScript - La guía definitiva (6 ed.). pag. 1. JavaScript es parte de la tríada de tecnologías que todos los desarrolladores web deben aprender: HTML para especificar el contenido de las páginas web, CSS para especificar la presentación de las páginas web y JavaScript para especificar el comportamiento de las páginas web.
3. "¿Qué es CSS?" . Consorcio Mundial de la red. Archivado desde el original el 29 de noviembre de 2010 . Consultado el 1 de diciembre de 2010 .
4. "Aplicaciones móviles basadas en web del futuro que utilizan HTML 5, CSS y JavaScript" . HTMLGoodies. Archivado desde el original el 20 de octubre de 2014 . Consultado el 16 de octubre de 2014 .
5. "Servicio de validación de CSS W3C" . Archivado desde el original el 14 de febrero de 2011 . Consultado el 30 de junio de 2012 .
6. "Especificación W3C CSS2.1 para pseudo-elementos y pseudo-clases" . Consorcio Mundial de la red. 7 de junio de 2011. Archivado desde el original el 30 de abril de 2012 . Consultado el 30 de abril de 2012 .
7. consulte la definición completa de selectores en el sitio web del W3C. Archivado el 23 de abril de 2006 en Wayback Machine .
8. "Selectores de nivel 3" . W3.org. Archivado desde el original el 3 de junio de 2014 . Consultado el 30 de mayo de 2014 .
9. "Especificación W3C CSS2.1 para conjuntos de reglas, bloques de declaración y selectores" . Consorcio Mundial de la red. 7 de junio de 2011. Archivado desde el original el 28 de marzo de 2008 . Consultado el 20 de junio de 2009 .
10. "Tabla de propiedades completa" . W3.org. Archivado desde el original el 30 de mayo de 2014 . Consultado el 30 de mayo de 2014 .
11. "Índice de propiedades CSS" . www.w3.org . Consultado el 9 de agosto de 2020 .
12. "Color CSS" . Red de desarrolladores de Mozilla. 2016-06-28. Archivado desde el original el 21 de septiembre de 2016 . Consultado el 23 de agosto de 2016 .
13. "6.1 Unidades de longitud" . Hojas de estilo en cascada, nivel 1 . 17 de diciembre de 1996. Archivado desde el original el 14 de junio de 2019 . Consultado el 20 de junio de 2019 .
14. "5. Unidades de distancia: el tipo <longitud>" . Módulo Valores y Unidades CSS Nivel 3 . 6 de junio de 2019. Archivado desde el original el 7 de junio de 2019 . Consultado el 20 de junio de 2019 .
15. Grupo de trabajo HTML del W3C. "HTML 5. Un vocabulario y API asociadas para HTML y XHTML" . Consorcio World Wide Web . Archivado desde el original el 15 de julio de 2014 . Consultado el 28 de junio de 2014 .
16. Meyer, Eric A. (2006). Hojas de estilo en cascada: la guía definitiva (3ª ed.). O'Reilly Media, Inc. ISBN 0-596-52733-0. Archivado desde el original el 15 de febrero de 2014 . Consultado el 16 de febrero de 2014 .
17. "Asignación de valores de propiedad, en cascada y herencia" . Archivado desde el original el 11 de junio de 2014 . Consultado el 10 de junio de 2014 .
18. "¿Puede una clase CSS heredar una o más clases?" . StackOverflow . Archivado desde el original el 14 de octubre de 2017 . Consultado el 10 de septiembre de 2017 .
19. "Propiedades de taquigrafía" . Tutorial . Desarrolladores de Mozilla. 2017-12-07. Archivado desde el original el 30 de enero de 2018 . Consultado el 30 de enero de 2018 .
20. Bos, Bert; et al. (7 de diciembre de 2010). "9.3 Esquemas de posicionamiento" . Especificación de hojas de estilo en cascada Nivel 2 Revisión 1 (CSS 2.1) . W3C. Archivado desde el original el 18 de febrero de 2011 . Consultado el 16 de febrero de 2011 .
21. Holzschlag, Molly E (2005). Sumérgete en HTML y CSS . Pearson Education, Inc. ISBN 0-13-185586-7.
22. Lie, Hakon W (10 de octubre de 1994). "Hojas de estilo HTML en cascada: una propuesta" (Propuesta) (92). CERN. Archivado desde el original el 4 de junio de 2014 . Consultado el 25 de mayo de 2014 .
23. Mentira, Håkon Wium ; Bos, Bert (1999). Hojas de estilo en cascada, diseño para la Web . Addison Wesley. ISBN 0-201-59625-3. Consultado el 23 de junio de 2010 .
24. "Hojas de estilo en cascada, nivel 1" . Consorcio Mundial de la red. Archivado desde el original el 9 de abril de 2014 . Consultado el 7 de marzo de 2014 .
25. Bos, Bert (14 de abril de 1995). "Hojas de estilo simples para SGML y HTML en la web" . Consorcio Mundial de la red. Archivado desde el original el 23 de septiembre de 2009 . Consultado el 20 de junio de 2010 .
26. "Hojas de estilo en cascada" . Universidad de oslo. Archivado desde el original el 6 de septiembre de 2006 . Consultado el 3 de septiembre de 2014 .
27. Petrie, Charles; Cailliau, Robert (noviembre de 1997). "Entrevista a Robert Cailliau sobre la propuesta de WWW:" Cómo sucedió realmente ". " " . Instituto de Ingenieros Eléctricos y Electrónicos . Archivado desde el original el 6 de enero de 2011 . Consultado el 18 de agosto de 2010 .
28. Bos, Bert (31 de marzo de 1995). "Propuesta de hoja de estilo basada en flujo" . Archivado desde el original el 12 de octubre de 2014 . Consultado el 3 de septiembre de 2014 .
29. Nielsen, Henrik Frystyk (7 de junio de 2002). "Libwww Hackers" . Consorcio Mundial de la red. Archivado desde el original el 2 de diciembre de 2009 . Consultado el 6 de junio de 2010 .
30. "Yves Lafon" . Consorcio Mundial de la red. Archivado desde el original el 24 de junio de 2010 . Consultado el 17 de junio de 2010 .
31. "El equipo de W3C: tecnología y sociedad" . Consorcio Mundial de la red. 18 de julio de 2008. Archivado desde el original el 28 de mayo de 2010 . Consultado el 22 de enero de 2011 .
32. Lou Montulli ; Brendan Eich ; Scott Furman ; Donna Converse ; Troy Chevalier (22 de agosto de 1996). "Hojas de estilo basadas en JavaScript" . W3C. Archivado desde el original el 27 de mayo de 2010 . Consultado el 23 de junio de 2010 .
33. "Software CSS" . W3.org. Archivado desde el original el 25 de noviembre de 2010 . Consultado el 15 de enero de 2011 .
34. Anne van Kesteren . "CSS 2.1 - Weblog de Anne" . Archivado desde el original el 10 de diciembre de 2005 . Consultado el 16 de febrero de 2011 .
35. "Archivo de noticias del W3C en 2007" . Consorcio World Wide Web . Archivado desde el original el 28 de junio de 2011 . Consultado el 16 de febrero de 2011 .
36. Nitot, Tristan (18 de marzo de 2002). "Tipo MIME incorrecto para archivos CSS" . Centro de desarrolladores de Mozilla . Mozilla . Archivado desde el original el 20 de mayo de 2011 . Consultado el 20 de junio de 2010 .
37. McBride, Don (27 de noviembre de 2009). "Tipos de archivo" . Archivado desde el original el 29 de octubre de 2010 . Consultado el 20 de junio de 2010 .
38. "detalles de la extensión del archivo css" . Base de datos de extensión de archivo. 12 de marzo de 2010. Archivado desde el original el 18 de julio de 2011 . Consultado el 20 de junio de 2010 .
39. "Cómo y por qué le gustaría utilizar prefijos de proveedores de CSS en su sitio web" . Lifewire . 2019-11-12.
40. "Estándar de compatibilidad" . WHATWG .
41. Bos, / Håkon Wium Lie, Bert (1997). Hojas de estilo en cascada: diseño para la Web (1ª edición de impresión). Harlow, Inglaterra; Reading, MA: Addison Wesley Longman. ISBN 0-201-41998-X.
42. W3C : Hojas de estilo en cascada, nivel 1 Archivado 2011-02-09 en la especificación Wayback Machine CSS 1
43. W3C : Especificación de nivel 1 de hojas de estilo en cascada Archivado 2011-02-11 en la especificación de nivel 1 de Wayback Machine CSS
44. "Hojas de estilo auditivo" . W3C. Archivado desde el original el 26 de octubre de 2014 . Consultado el 26 de octubre de 2014 .
45. W3C : Hojas de estilo en cascada, nivel 2 Archivado 2011-01-16 en la especificación Wayback Machine CSS 2 (recomendación de 1998)
46. W3C : Hojas de estilo en cascada, nivel 2 revisión 1 Archivado 2011-11-09 en la especificación Wayback Machine CSS 2.1 (Recomendación propuesta del W3C)
47. W3C: El estándar de hojas de estilo en cascada cuenta con una interoperabilidad sin precedentes Archivado el 10 de junio de 2011 en la Wayback Machine.
48. Bos, Bert (18 de febrero de 2011). "Descripciones de todas las especificaciones CSS" . Consorcio World Wide Web . Archivado desde el original el 31 de marzo de 2011 . Consultado el 3 de marzo de 2011 .
49. Bos, Bert (26 de febrero de 2011). "Trabajo actual CSS" . Consorcio World Wide Web . Archivado desde el original el 3 de marzo de 2011 . Consultado el 3 de marzo de 2011 .
50. Etemad, Elika J. (12 de diciembre de 2010). "Instantánea de hojas de estilo en cascada (CSS) 2010" . Consorcio World Wide Web . Archivado desde el original el 16 de marzo de 2011 . Consultado el 3 de marzo de 2011 .
51. "Todas las especificaciones CSS" . W3.org. 2014-05-22. Archivado desde el original el 30 de mayo de 2014 . Consultado el 30 de mayo de 2014 .
52. Atkins Jr, ficha. "Unas palabras sobre CSS4" . Archivado desde el original el 31 de octubre de 2012 . Consultado el 18 de octubre de 2012 .
53. "Nivel 1 del módulo de diseño de caja flexible CSS" . W3C. 19 de noviembre de 2018. Archivado desde el original el 19 de octubre de 2012 . Consultado el 18 de octubre de 2012 .
54. "Instantánea 2007 de hojas de estilo en cascada (CSS)" . 12 de mayo de 2011. Archivado desde el original el 8 de agosto de 2016 . Consultado el 18 de julio de 2016 .
55. "Instantánea de hojas de estilo en cascada (CSS) 2010" . 12 de mayo de 2011. Archivado desde el original el 16 de marzo de 2011 . Consultado el 3 de marzo de 2011 .
56. "Instantánea de CSS 2015" . W3C . 13 de octubre de 2015. Archivado desde el original el 27 de enero de 2017 . Consultado el 13 de febrero de 2017 .
57. "Instantánea de CSS 2017" . 31 de enero de 2017. Archivado desde el original el 13 de febrero de 2017 . Consultado el 13 de febrero de 2017 .
58. "Instantánea CSS 2018" . 15 de noviembre de 2018. Archivado desde el original el 1 de febrero de 2019 . Consultado el 2 de enero de 2019 .
59. "¿Puedo usar ... tablas de soporte para HTML5, CSS3, etc." . Archivado desde el original el 19 de febrero de 2018 . Consultado el 26 de enero de 2019 .
60. "Documentos Web MDN: CSS" .
61. "Grupo de comunidad CSS4" . Archivado desde el original el 27 de febrero de 2020 . Consultado el 27 de febrero de 2020 .
62. "Soluciones CSS3 para Internet Explorer - Revista Smashing" . Revista Smashing . 2010-04-28. Archivado desde el original el 12 de octubre de 2016 . Consultado el 12 de octubre de 2016 .
63. "Uso de consultas de funciones en CSS ★ Mozilla Hacks - el blog del desarrollador web" . hacks.mozilla.org . Archivado desde el original el 11 de octubre de 2016 . Consultado el 12 de octubre de 2016 .
64. "Mirando la Web con Internet Explorer 6, una última vez" . Ars Technica . Archivado desde el original el 12 de octubre de 2016 . Consultado el 12 de octubre de 2016 .
65. Molly Holzschlag (enero de 2012). "Siete cosas que aún faltan en CSS" . Revista .net. Archivado desde el original el 5 de marzo de 2017 . Consultado el 4 de marzo de 2017 .
66. "Selectores de nivel 4 - determinar el tema de un selector" . W3.org. Archivado desde el original el 17 de agosto de 2013 . Consultado el 13 de agosto de 2013 .
67. "Selectores de nivel 4 - Perfiles selectores rápidos vs completos" . W3.org. Archivado desde el original el 17 de agosto de 2013 . Consultado el 13 de agosto de 2013 .
68. Snook, Jonathan (octubre de 2010). "Por qué no tenemos un selector de padres" . snook.ca. Archivado desde el original el 18 de enero de 2012 . Consultado el 26 de enero de 2012 .
69. "Ventanas emergentes de CSS puro" . meyerweb.com. Archivado desde el original el 9 de diciembre de 2009 . Consultado el 19 de noviembre de 2009 .
70. Ficha Atkins Jr. "CSS aplicar regla" . GitHub. Archivado desde el original el 22 de febrero de 2016 . Consultado el 27 de febrero de 2016 .
71. https://www.xanthir.com/b4o00
72. "Módulo de diseño de caja flexible CSS" . ¿Puedo usar ... Tablas de soporte para HTML5, CSS3, etc. ? CanIUse.com. Archivado desde el original el 23 de febrero de 2016.
73. "Fin del soporte de Internet Explorer" . Microsoft. Archivado desde el original el 2 de junio de 2019 . Consultado el 27 de febrero de 2016 .
74. "Acerca de las propiedades dinámicas" . Msdn.microsoft.com. Archivado desde el original el 14 de octubre de 2017 . Consultado el 20 de junio de 2009 .
75. "Nivel 3 del módulo de valores y unidades CSS" . W3.org. 6 de junio de 2019. Archivado desde el original el 23 de abril de 2008.
76. "calc () como valor unitario CSS" . ¿Puedo usar ... Tablas de soporte para HTML5, CSS3, etc. ? CanIUse.com. Archivado desde el original el 4 de marzo de 2016.
77. "Módulo de diseño de múltiples columnas CSS" . Consorcio Mundial de la red. Archivado desde el original el 29 de abril de 2011 . Consultado el 1 de mayo de 2011 .
78. "Puedo usar ... Tablas de soporte para HTML5, CSS3, etc." . CanIUse.com. Archivado desde el original el 21 de agosto de 2010 . Consultado el 27 de febrero de 2016 .
79. Cederholm, Dan; Ethan Marcotte (2009). CSS hecho a mano: más diseño web a prueba de balas . Nuevos jinetes. pag. 114. ISBN 978-0-321-64338-4. Archivado desde el original el 20 de diciembre de 2012 . Consultado el 19 de junio de 2010 .
80. Antti, Hiljá. "OOCSS, ACSS, BEM, SMACSS: ¿qué son? ¿Qué debo usar?" . clubmate.fi . Hiljá. Archivado desde el original el 2 de junio de 2015 . Consultado el 2 de junio de 2015 .

Lectura adicional

Esta sección debe actualizarse . Actualice este artículo para reflejar los eventos recientes o la información disponible recientemente. ( Julio de 2012 )

• Jeffrey Zeldman (2009): Designing With Web Standards , New Riders, ISBN 978-0321616951 (rústica) ( sitio complementario del libro ) 
• Dan Cederholm (2009): Web Standards Solutions, The Markup and Style Handbook , Friends of Ed, ISBN 978-1430219200 (rústica) ( sitio del autor ) 
• Meyer, Eric A. (2006). Hojas de estilo en cascada: la guía definitiva, tercera edición . O'Reilly Media, Inc. ISBN 0-596-52733-0.
• Más Eric Meyer sobre CSS (2004) ISBN 0-7357-1425-8 
• Eric Meyer sobre CSS (2002), ISBN 0-7357-1245-X 
• Meyer, Eric A. (2001) Referencia del programador de hojas de estilo en cascada 2.0 , McGraw-Hill Osborne Media, ISBN 0-07-213178-0 
• The Zen of CSS Design (2005) (escrito en coautoría por el propietario de CSS Zen Garden, Dave Shea y Molly E. Holzschlag ), ISBN 0-321-30347-4 
• Kynn Bartlett: Aprenda usted mismo CSS en 24 horas , 2da edición (2006), Sams Publishing, ISBN 978-0672329067 
• Hojas de estilo en cascada: diseño para la Web (2005) por Håkon Wium Lie y Bert Bos, ISBN 0-321-19312-1 
• Hojas de estilo en cascada Hojas de estilo en cascada , tesis doctoral, de Håkon Wium Lie: proporciona una referencia histórica autorizada de CSS
• Keith Schengili-Roberts (2003): Core CSS, 2.a edición , Prentice Hall, ISBN 0-13-009278-9 
• Sobre el análisis de las hojas de estilo en cascada , Pierre Geneves , Nabil Layaida y Vincent Quint, Actas de la 21ª Conferencia Internacional sobre la World Wide Web (WWW'12), págs. 809–818, 2012.

Ver también

• Destello de contenido sin estilo

Enlaces externos

CSSen los proyectos hermanos de Wikipedia

• Definiciones de Wikcionario
• Medios de Wikimedia Commons
• Libros de texto de Wikilibros
• Recursos de Wikiversity
• Datos de Wikidata
• Discusión de Meta-Wiki
• Documentación de MediaWiki

• Página web oficial
• CSS en Curlie