CSS
Las hojas de estilo en
cascada o (Cascading Style Sheets, o sus siglas CSS)
hacen referencia a un lenguaje de hojas de estilos usado para describir la
presentación semántica (el aspecto y formato) de un documento escrito en
lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs
escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de
documentos XML,
incluyendo SVG y XUL.
La información de estilo puede ser
adjuntada como un documento separado o en el mismo documento HTML. En este
último caso podrían definirse estilos generales en la cabecera del documento o
en cada etiqueta particular mediante el atributo "<style>".
SINTAXIS
selector [, selector2, ...] [:pseudo-class][::pseudo-element] {
propiedad: valor;
[propiedad2: valor2;
...]
}51515151616626
Formas de
Usar CSS
1. Mediante
CSS introducido por el autor del HTML
1. Un estilo
en línea (online) es un método para insertar el lenguaje de
estilo de página directamente dentro de una etiqueta HTML. Esta manera de
proceder no es totalmente adecuada. El incrustar la descripción del formateo
dentro del documento de la página Web, a nivel de código, se convierte en una
manera larga, tediosa y poco elegante de resolver el problema de la
programación de la página. Este modo de trabajo se podría usar de manera
ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo
claro o estructurado que debería ser, pero funciona.
Dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (online).
Dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (online).
2. Una hoja de
estilo interna, que es una hoja de estilo que está incrustada dentro de un
documento HTML, dentro del elemento <head>, marcada por la etiqueta
<style>. De esta manera se obtiene el beneficio de separar la información
del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja
de estilo incrustada de una página a otra (esta posibilidad es difícil de
ejecutar si se desea para guardar las copias sincronizadas). En general, la
única vez que se usa una hoja de estilo interna, es cuando se quiere
proporcionar alguna característica a una página Web en un simple fichero, por
ejemplo, si se está enviando algo a la página Web.
3. Una hoja de
estilo externa, es una hoja de estilo que está almacenada en un archivo
diferente al archivo donde se almacena el código HTML de la página Web. Esta es
la manera de programar más potente, porque separa completamente las reglas de
formateo para la página HTML de la estructura básica de la página.
2. Estilos CSS
introducidos por el usuario que ve el documento, mediante un
archivo CSS especificado mediante las configuraciones del navegador, y que
sobreescribe los estilos definidos por el autor en una, o varias páginas web.
3. Los estilos
marcados "por defecto" por los user
agent, para diferentes elementos de un documento HTML, como por
ejemplo, los enlaces.
Funcionamiento
básico de CSS
Antes
de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban
etiquetas HTML especiales para modificar el aspecto de los elementos de la
página. El siguiente ejemplo muestra una página HTML con estilos definidos sin
utilizar CSS:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la página</font></h1>
<p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p>
</body>
</html>
El
ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para
definir el color, el tipo y el tamaño de letra de cada elemento de la página.
El
problema de utilizar este método para definir el aspecto de los elementos se
puede ver claramente con el siguiente ejemplo: si la página tuviera 50
elementos diferentes, habría que insertar 50 etiquetas <font>. Si el
sitio web entero se compone de 10.000 páginas diferentes, habría que definir
500.000 etiquetas <font>. Como cada etiqueta <font> tiene
tres atributos, habría que definir 1.5 millones de atributos.
Como
el diseño de los sitios web está en constante evolución, es habitual modificar
cada cierto tiempo el aspecto de las páginas del sitio. Siguiendo con el
ejemplo anterior, cambiar el aspecto del sitio requeriría modificar 500.000
etiquetas y 1.5 millones de atributos.
La
solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color:
red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana;
font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
CSS
permite separar los contenidos de la página y la información sobre su aspecto.
En el ejemplo anterior, dentro de la propia página HTML se crea una zona
especial en la que se incluye toda la información relacionada con los estilos
de la página.
Utilizando
CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el
código HTML de los contenidos con etiquetas <font>. Como se verá más
adelante, la etiqueta<style> crea una zona especial donde se
incluyen todas las reglas CSS que se aplican en la página.
En
el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de
la página se deben ver de color rojo, con un tipo de letra Arial y con un
tamaño de letra grande. Además, las etiquetas <p> de la página
se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de
letra medio.
Definir
los estilos de esta forma ahorra miles de etiquetas y millones de atributos
respecto a la solución anterior, pero sigue sin ser una solución ideal. Como
los estilos CSS sólo se aplican en la página que los incluye, si queremos que
las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se deberían
copiar 10.000 veces esas mismas reglas CSS. Más adelante se explica la solución
que propone CSS para evitar este problema.
Soporte de
CSS en los navegadores
El trabajo del diseñador web siempre
está limitado por las posibilidades de los navegadores que utilizan los
usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer
el soporte de CSS en cada uno de los navegadores más utilizados del mercado.
Internamente los navegadores están
divididos en varios componentes. La parte del navegador que se encarga de
interpretar el código HTML y CSS para mostrar las páginas se denomina motor.
Desde el punto de vista del diseñador CSS, la versión de un motor es mucho más
importante que la versión del propio navegador.
La siguiente tabla muestra el
soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores más utilizados por
los usuarios:
Navegador
|
Motor
|
CSS 1
|
CSS 2.1
|
CSS 3
|
Google Chrome
|
WebKit
|
Completo desde la versión 85
del motor
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades
|
Internet
Explorer |
Trident
|
Completo desde la versión 7.0
del navegador
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades a partir de la versión 10.0 del navegador
|
Firefox
|
Gecko
|
Completo desde la versión 1.0
del navegador
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades
|
Safari
|
WebKit
|
Completo desde la versión 85
del motor
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades
|
Opera
|
Presto
|
Completo desde la versión 1.0
del navegador
|
Completo
|
Todos los selectores,
pseudo-clases y muchas propiedades
|
Los navegadores Firefox, Chrome,
Safari y Opera son los más avanzados en el soporte de CSS, ya que incluyen
muchos elementos de la futura versión CSS 3 y un soporte casi perfecto de la
actual version 2.1.
Por su parte, el navegador Internet
Explorer sólo puede considerarse adecuado desde el punto de vista de CSS a
partir de su versión 7. Internet Explorer 6, utilizado todavía por un número no
despreciable de usuarios, sufre carencias muy importantes y contiene decenas de
errores en su soporte de CSS. Internet Explorer 8 soporta casi todas las
propiedades y características de CSS 2.1.
http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada
http://librosweb.es/css/capitulo_1/funcionamiento_basico_de_css.html
http://librosweb.es/css/capitulo_1/soporte_de_css_en_los_navegadores.html
0 comentarios:
Publicar un comentario