Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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).3
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.4 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 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 23185. El W3C
proporciona una herramienta de validación de CSS gratuita para los documentos CSS.
Índice
1 Sintaxis
1.1 Selectores
1.2 Bloque de declaraciones
1.3 Uso
1.4 Fuentes
1.5 Especificidad
1.5.1 Ejemplo
1.6 Herencia
1.6.1 Ejemplo
1.7 Espacios en blanco
1.8 Posicionamiento
1.8.1 Propiedades de posicionamiento
1.8.2 Float y clear
2 Historia
3 Niveles
3.1 CSS1
3.2 CSS2
3.2.1 CSS 2.1
3.3 CSS3.1
4 Soporte por los navegadores web
5 Limitaciones
6 Limitaciones resueltas
7 Ventajas
8 Framework CSS
9 Véase también
10 Referencias
11 Enlaces externos
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
Los selectores declaran qué etiquetas se le aplican los estilos que coincidan con
la etiqueta o atributo señalados en la regla.
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.
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), 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.
<style>
h1 {color: red}
</style>
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.
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 sobreescribir
solo el estilo de los encabezados rojos en itálica sin alterar otros atributos.
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
Ejemplo
Considera este documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#id{propiedad:valor;}
</style>
</head>
<body>
<p id="xyz" style="color: blue;">Para demostrar la especificidad</p>
</body>
</html>
En este ejemplo, la declaración en el atributo style sobreescribe la declaración
del elemento <style> porque tiene un especificidad más alta.
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 sólo 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 a 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 and 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.7
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.
Ejemplo
Se tiene la siguiente hoja de estilos:
h1 {
color: pink;
}
Éste es un elemento h1 con una etiqueta de énfasis (em) dentro:
<h1>
Esto es para <em>ilustrar</em> la herencia
</h1>
Si no se asigna un color al elemento em, la palabra «ilustrar» heredará el color
del elemento padre, h1. Entonces, la palabra «ilustrar» aparecerá de color rosa.
Espacios en blanco
Los espacios en blanco entre propiedades y selectores se ignoran. Este pedazo de
código:
body{overflow:hidden;background:#000000;}
es igual a este otro:
body {
overflow: hidden;
background: #000000;
}
Aunque el espaciado mejora la legibilidad del código.
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.8
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 a 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
Forza 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.9 Al
mismo tiempo, Lie trabajaba con Tim Berners-Lee en el CERN.10 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)11 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.12
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 80s, y CSS fue
desarrollado para proveer hojas de estilos para la web.13 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».13
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,14 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.15 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.14
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.10 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 lo 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).10 La
especificación nunca fue finalizada y quedó obsoleta.20 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. CSS3, cuyo desarrollo
inició en 1998, sigue en desarrollo en 2014.
Niveles
CSS se ha creado en varios niveles y perfiles. Cada nivel de CSS se construye sobre
el anterior, generalmente añadiendo funciones al nivel previo.
Los perfiles son, generalmente, parte de uno o varios niveles de CSS definidos para
un dispositivo o interfaz particular. Actualmente, pueden usarse perfiles para
dispositivos móviles, impresoras o televisiones.
CSS1
La primera especificación oficial de CSS, recomendada por la W3C fue CSS1,
publicada en diciembre de 1995,21 y abandonada en abril de 2008.21
En abril de 2011, CSS 2.1 volvió a ser propuesta como candidata,24 y después de ser
revisada por el W3C Advisory Committee, fue finalmente publicada como recomendación
oficial el 7 de junio de 2011.25
CSS3.1
A diferencia de CSS2, que fue una única especificación que definía varias
funcionalidades, CSS3.1 está dividida en varios documentos separados, llamados
"módulos".
Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se
preservan las anteriores para mantener la compatibilidad.
Como los sitios web adoptan nuevas normas del código que son incompatibles con los
navegadores más antiguos, a estos navegadores se les quita el acceso a muchos de
los recursos en la web (a veces intencionalmente). Muchos de los sitios más
populares en Internet no solo son visualmente feos en los navegadores antiguos
debido a la mala compatibilidad con CSS, sino que no funcionan en absoluto, en gran
parte debido a la evolución de JavaScript y otras tecnologías web.32
Limitaciones
Algunas de las limitaciones conocidas de las capacidades actuales de CSS son:
Alineado vertical
Mientras que el alineado horizontal es generalmente fácil de controlar, el alineado
vertical es frecuentemente no intuitivo, o de plano imposible. Simples tareas, como
la de centrar un elemento verticalmente o poniendo un pie de página abajo es muy
difícil. El Flexible Box Module mejora esta situación considerablemente y el
alineado vertical es mucho más simple y soportado en todos los navegadores
actuales. Los navegadores más viejos no tienen estas características
(principalmente Internet Explorer 9 y abajo) y no son soportados actualmente por
sus fabricantes38.
Ausencia de expresiones
No hay aun una opción estándar para especificar los valores de propiedades como una
expresión simple (como margin-left: 10% – 3em + 4px;). Esto puede ser útil en
muchos casos, como para calcular el número de columnas de una tabla. Internet
Explorer en sus versiones 5 a 7 soportan una extensión propietaria expression()39,
con una funcionalidad similar. expression() ya no es soportada por Internet
Explorer 8 en adelante, excepto en los modos de compatibilidad. Esta decisión fue
tomada para mejorar "el cumplimiento de los estándares, el rendimiento del
navegador, y por razones de seguridad"39. Como sea, una recomendación candidata
calc() para superar esta limitación ha sido publicada por el CSS WG y ahora está
soportada por la mayoría de los navegadores modernos40.
Ausencia de la declaración de columnas de texto
Aunque ya es posible implementar esto en la especificación de CSS3 (usando el
módulo column-count), las capas con muchas columnas son difíciles de implementar
con CSS 2.141. Con CSS 2.1, el proceso se hace usando elementos flotantes, los
cuales son renderizados de diferente manera en los distintos navegadores, tamaños,
formas de pantalla y sistemas operativos. Ahora, todos los navegadores modernos
soportan esta característica de CSS3 de una forma u otra42.
Ventajas
Por otro lado, algunas ventajas de utilizar CSS son:
Véase también
Em (tipografía)
HTML
Acid3
CSSTidy
CSS Zen Garden
Lista de lenguajes de estilos
Mejora progresiva