CSS

 

Css

CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS)​

CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o layouts, los colores y las fuentes.⁴​ Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento.

La separación del formato y el contenido hace posible presentar el mismo documento marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en impresión, en voz (mediante un navegador de voz o un lector de pantalla), y dispositivos táctiles basados en el sistema Braille. También se puede mostrar una página web de manera diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su computadora, para sobre escribir la hoja de estilos del diseñador.

La especificación CSS describe un esquema prioritario para determinar qué reglas de estilo se aplican si más de una regla coincide para un elemento en particular. Estas reglas son aplicadas con un sistema llamado de cascada, de modo que las prioridades son calculadas y asignadas a las reglas, así que los resultados son predecibles.

La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME type text/css está registrado para su uso por CSS descrito en el RFC 2318.⁵​ El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.

Sintaxis

CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para especificar los nombres de varias propiedades de estilo. Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de declaración.

Selectores

Artículo principal: Selector CSS

Los selectores declaran qué etiquetas se le aplican a los estilos que coincidan con la etiqueta o atributo señalados en la regla.

Los selectores pueden aplicarse a:

·         Todos los elementos de un tipo, como los párrafos <p>.

·         Elementos seguidos de un atributo, en particular:

o    id: identificador, un identificador único para la etiqueta.

o    class: clase, un identificador para anotar múltiples elementos.

Las clases y los identificadores son sensibles a las mayúsculas, comienzan con letras, y pueden incluir caracteres alfanuméricos y guiones bajos. Una clase se aplica a cualquier número de elementos. Un identificador se aplica a un solo elemento.

Las pseudoclases son usadas en los selectores CSS para permitir el formateo usando información que no está incluida en el documento. Un ejemplo de una pseudoclase muy usada es: hover, que identifica el contenido que está siendo apuntado por un puntero, como el cursor del ratón. Este nombre se añade al selector, de esta manera: a: hover o #elementid: hover. Una pseudoclase clasifica elementos, como: link o: visited, mientras que un pseudoelemento hace una selección de elementos parciales, como: first-line o: first-letter.

Los selectores pueden ser combinados de muchas maneras para obtener una mayor flexibilidad y precisión. Múltiples selectores pueden ser unidos en una misma línea para especificar elementos por su ubicación, tipo de elemento, identificador, clase, o cualquier combinación de estos. El orden de los selectores es importante. Por ejemplo, div. myClass {color: red;} aplica a todos los elementos <div> con la clase myClass, mientras que. MyClass div {color: red;} aplica a todos los elementos <div> que estén dentro de cualquier elemento con la clase myClass.

 

Bloque de declaraciones

Un bloque de declaraciones consiste en una lista de declaraciones unidas. Cada declaración consiste en una propiedad, dos puntos (:), y un valor. Si hay muchas declaraciones en un bloque, un punto y coma (;) es insertado para separar cada declaración.

Las propiedades son insertadas en el estándar CSS. Cada propiedad tiene un conjunto de posibles valores. Algunas propiedades afectan a cualquier elemento, otras solo a un grupo particular de elementos. Los valores pueden ser palabras clave, como "center" o "inherit", o valores numéricos, como 200px (200 píxeles) o 80% (80 por ciento del ancho de la ventana). Los valores de colores son especificados por medio de una palabra clave (ej. "red"), de valores hexadecimales (ej. #FF0000, pudiéndose abreviar como #F00), valores RGB en una escala del 0 al 255 (ej. rgb(255, 0, 0)), valores RGBA igual que los valores RGB pero con soporte para el canal alfa de transparencias (ej. rgba(255, 0, 0, 0.8)), y valores HSL o HSLA (ej. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).

Uso

Antes del desarrollo de CSS, toda la información presentacional de los documentos HTML era incluida en el código HTML. Los colores de las fuentes, los estilos de fondo, la alineación de los elementos, los bordes y tamaños eran descritos explícitamente, a veces de manera redundante, dentro del HTML. CSS permite a los diseñadores mover toda la información presentacional a otro archivo, la hoja de estilos, resultando en un código HTML notablemente más simple.

Por ejemplo, las cabeceras (h1), sub-cabeceras (h2 ej. red), sub-sub-cabeceras (h3), etc., son definidas estructuralmente usando HTML. En la impresión y las pantallas, la elección de la fuente, tamaño, color y énfasis para esos elementos es presentacional.

Antes de CSS, los diseñadores que deseaban asignar características tipográficas, por ejemplo, a todos los elementos h2 tenían que repetir el código presentacional HTML por cada elemento al que se le deseaba aplicar ese estilo. Esto creaba documentos más complejos, largos, más propensos a errores y difíciles de mantener. CSS permite la separación entre la presentación y la estructura. CSS puede definir el color, fuente, alineación del texto, tamaño, bordes, espaciado, capas y muchas otras características tipográficas, y pueden aplicarse distintos estilos de impresión y de pantalla. CSS también define estilos no visuales, como la velocidad de lectura y énfasis en los lectores de textos aurales. El W3C ha declarado obsoleto el uso de las etiquetas presentacionales HTML.

Fuentes

Los estilos CSS puede ser provistos desde varias fuentes. Esas fuentes pueden ser el navegador web, el usuario y el diseñador. La información del diseñador puede ser clasificada de las siguientes formas: inline, media type, importancia, especificidad del selector, orden de reglas, herencia y definición de propiedades. La información de los estilos CSS puede estar en un documento separado o puede estar embebido dentro de un documento HTML. Múltiples hojas de estilos pueden ser importadas al mismo tiempo. Los diferentes estilos pueden ser aplicados dependiendo de la salida del dispositivo usado en ese momento; por ejemplo, la versión para monitores puede ser diferente de la versión impresa, así que los diseñadores pueden aplicar diferentes estilos dependiendo del dispositivo usado.

La hoja de estilos con la máxima prioridad controla la visualización del contenido. Las declaraciones no establecidas en la fuente con máxima prioridad son sobrescritas, como las hojas de estilos del agente de usuario. Este proceso es llamado cascading, o cascada

Una de las metas de CSS es permitir a los usuarios un mayor control sobre la presentación. Algunas personas que encuentran a los encabezados rojos en itálicas difíciles de leer pueden aplicar una hoja de estilos diferente. Dependiendo del navegador y del sitio web, un usuario puede escoger entre varias hojas de estilo provistas por los diseñadores, o pueden remover todas las hojas de estilos añadidas y ver el sitio usando los estilos por defecto del navegador, o pueden sobrescribir solo el estilo de los encabezados rojos en itálica sin alterar otros atributos.

Especificidad

La especificidad se refiere a los pesos relativos de varias reglas. Determina qué estilos se aplican a un elemento cuando más de una regla intentan aplicar estilos a ella. Basándose en la especificación, un simple selector (h1, por ejemplo) 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. Porque los valores de especificidad no se acarrean como en el sistema decimal, las comas son usadas para separar los "dígitos" (una regla CSS que tiene 11 elementos y 11 clases tiene una especificidad de 11,11, no 121).

 

Herencia

La herencia es una característica clave en CSS; basada en la relación ancestro-descendiente para operar. La herencia es el mecanismo por el cual las propiedades no solo se aplican a un solo elemento, sino también a sus descendientes. La herencia se basa en el árbol del documento, el cual es la jerarquía de los elementos XHTML en una página basada en el anidamiento. Los elementos descendientes pueden heredar los valores de las propiedades CSS de un elemento ancestro. En general, los elementos descendientes heredan las propiedades relacionadas al texto, pero las propiedades relacionadas con la caja no. Las propiedades que pueden ser heredadas son el color, fuente, espaciado, el peso de la línea, propiedades de lista, alineación del texto, identado, visibilidad, espaciado de espacios y espaciado entre palabras. Las propiedades que no pueden ser heredadas son el fondo, bordes, visualización, posicionamiento, tamaño, márgenes, tamaño mínimo y máximo, outline, desbordamiento, relleno, posición, alineación vertical y z-index

La herencia previene que algunas propiedades sean declaradas una y otra vez en la hoja de estilos, permitiendo a los diseñadores escribir menos código CSS. Mejora la carga rápida de los sitios por los usuarios, y permite a los clientes ahorrar dinero en los costos de desarrollo y ancho de banda.

Posicionamiento

CSS 2.1 define 3 esquemas de posicionamiento:

Normal

Los elementos inline, o de línea, son dispuestos de la misma manera que las letras en las palabras de un texto, una vez que ya no hay más espacio en una línea, entonces se empieza una nueva línea abajo. Los elementos block, o de bloque, son dispuestos verticalmente, como los párrafos.

Flotante

Un elemento float está fuera del flujo normal y puesto lo más posible a la derecha o izquierda en el espacio disponible. Los demás elementos fluyen alrededor del elemento float.

Absoluto

Un elemento posicionado absolutamente no tiene un lugar, y no afecta al flujo normal de los elementos. Ocupa el espacio que se le ha asignado independientemente de los demás elementos.

Propiedades de posicionamiento

Hay 4 posibles valores para la propiedad position. Si un elemento está posicionado de una manera diferente a static, hay cuatro subpropiedades usadas para especificar posiciones y offsets: top, bottom, left y right.⁸​

Static

El valor por defecto a los elementos en el flujo normal.

Relative

El elemento el posicionado en el flujo normal, y luego movido relativamente a su posición normal. Los demás elementos son independientes del elemento movido relativamente.

Absolute

Especifica el posicionamiento absoluto. El elemento es posicionado en relación con su antecesor no estático más cercano.

Fixed

El elemento es posicionado absolutamente en una posición fija de la pantalla, aunque el resto del documento se mueva.

Float y clear

La propiedad float puede tener 3 valores diferentes. Los elementos posicionados absolutamente o de manera fija no pueden ser aplicados a esta propiedad. Los demás elementos flotan normalmente alrededor de los elementos flotantes, a menos que se establezcan alguna de las propiedades clear.

left

Los elementos float flotan a la izquierda y los otros elementos fluyen a la derecha de este elemento.

right

Los elementos float flotan a la derecha y los otros elementos fluyen a la izquierda de este elemento.

clear

Fuerza al elemento a no fluir alrededor de los elementos que flotan a la izquierda (clear: left), a la derecha (clear: right) o a ambos lados (clear: both).

 

Historia

Håkon Wium Lie, CTO de la compañía Opera Software y cocreador del estándar CSS

CSS fue propuesto por primera vez por Håkon Wium Lie el 10 de octubre de 1994. Al mismo tiempo, Lie trabajaba con Tim Berners-Lee en el CERN. Muchos otros lenguajes de hojas de estilos fueron propuestos al mismo tiempo, y las discusiones en las listas de correo públicas dentro del W3C dieron lugar a la primera Recomendación CSS por el W3C (CSS1) en 1996. En particular, la propuesta de Bert Bos fue influyente; él fue el coautor de CSS1 y es reconocido como el cocreador de CSS

Las hojas de estilo han existido de una forma u otra desde los comienzos del Standard Generalized Markup Language (SGML) en la década de los 80, y CSS fue desarrollado para proveer hojas de estilos para la web. Un requerimiento para un lenguaje de hoja de estilos web era que las hojas de estilo vinieran en diferentes estilos en la web. Por lo tanto, los lenguajes de hojas de estilos existentes como DSSSL y FOSI no fueron adecuados. CSS, por otro lado, permite al documento ser influido por múltiples hojas de estilo por medio de los estilos en «cascada».

A medida que HTML fue creciendo, llegó a abarcar una amplia variedad de capacidades de diseño para satisfacer las demandas de los diseñadores web. Esta evolución dio al diseñador mayor control sobre la apariencia del sitio, con el costo de un HTML más complejo. Variaciones en las implementaciones de los navegadores web, como ViolaWWW y WorldWideWeb, ​ hicieron más difícil la consistencia de la apariencia del sitio web, y los usuarios tenían menos control sobre cómo era mostrado el contenido web. El navegador/editor creado por Tim Berners-Lee tenía hojas de estilos que fueron introducidas dentro del programa. Las hojas de estilos, por lo tanto, no eran enlazadas a los documentos en la web. Robert Cailliau, también del CERN, quería separar la estructura de la presentación, de modo que diferentes hojas de estilo podrían describir diferentes presentaciones para impresión, pantallas y editores.

 Mejorar las capacidades de la presentación en la web fue un tema de interés para muchos en las comunidades web, y 9 diferentes lenguajes de hojas de estilos fueron propuestos en la lista de correo www-style. ​ De esas nueve propuestas, dos influenciaron profundamente en lo que sería CSS: Cascading HTML Style Sheetsy Stream-based Style Sheet Proposal (SSP). ​ Dos navegadores fueron usados para pruebas para las propuestas iniciales; Lie trabajó con Yves Lafon para implementar CSS en el navegador Arena creado por Dave Raggett. Bert Bos implementó su propia propuesta SSP en el navegador Argo. Desde entonces, Lie y Bos trabajaron juntos para desarrollar el estándar CSS. La 'H' se eliminó del nombre porque estas hojas de estilo pueden ser aplicadas a otros lenguajes de marcado además de HTML.

La propuesta de Lie fue presentada en la conferencia "Mosaic and the Web" (más tarde llamada WWW2) en Chicago, Illinois en 1994, y de nuevo con Bert Bos en 1995. En ese tiempo el W3C ya estaba siendo establecido, y mostraba interés en el desarrollo de CSS. Organizó un taller para ese fin presidido por Steven Pemberton. Esto resultó en que W3C le dio más trabajo sobre CSS a los resultados del Comité de Revisión Editorial (ERB). Lie y Bos eran el equipo técnico principal en esta parte del proyecto, con participantes adicionales como Thomas Reardon de Microsoft. En agosto de 1996 Netscape Communication Corporation presentó una alternativa de lenguaje de hoja de estilos llamada JavaScript Style Sheets (JSSS). ​ La especificación nunca fue finalizada y quedó obsoleta. A finales de 1996, CSS estaba listo para ser oficial, y la recomendación CSS 1 fue publicada en diciembre.

El desarrollo de HTML, CSS, y DOM había sido realizado en un solo grupo, el HTML Editorial Review Board (ERB). A comienzos de 1997, el ERB fue dividido en tres grupos de trabajo: HTML Working Group, liderado por Dan Connolly del W3C; DOM Working group, liderado por Lauren Wood de SoftQuad; y CSS Working Group, liderado por Chris Lilley del W3C.

El grupo de trabajo de CSS comenzó corrigiendo errores que no habían sido revisados en el CSS 1, resultando en la creación de CSS 2, el 4 de noviembre de 1997. Fue publicado como una recomendación el 12 de mayo de 1998. Las adiciones a CSS de allí en adelante, conocidas colectivamente como "CSS3", tomaron un aspecto modular, desarrollándose cada función de forma independiente.

En 2005 el grupo de trabajo de CSS decidió mejorar los requerimientos de los estándares de forma más estricta. Esto significó que los estándares ya publicados como CSS 2.1, CSS3 Selectors y CSS3 Text fueron retrocedidos del estado "Recomendaciones candidatas" a "Borrador de trabajo".

Videos referentes al tema:

1.

2.

 3.