Especificación Oficial

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un
lenguaje que describe la presentacin de los documentos estructurados en hojas de

estilo para diferentes mtodos de interpretacin, es decir, describe como se va a
mostrar un documento en pantalla, por impresora, por voz (cuando la informacin es
pronunciada a travs de un dispositivo de lectura) o en dispositivos tctiles basados en
Braille.
Especificacin Oficial.
La especificacin o norma oficial que se utiliza actualmente para disear pginas web
con CSS es la versin CSS 2.1, actualizada por ltima vez el 7 de junio de 2011 y que
se puede consultar libremente en w3.org/TR/CSS21.
Desde hace varios aos, el organismo W3C trabaja en la elaboracin de la prxima

versin de CSS, conocida como CSS 3. Esta nueva versin incluye multitud de cambios
importantes en todos los niveles y es mucho ms avanzada y compleja que CSS 2.
Puedes consultar el estado actual de cada componente de CSS 3 en
w3.org/Style/CSS/current-work. Tambin existe un blog oficial en el que se publican
todas las novedades relacionadas con el estndar CSS.
Funcionamiento bsico
Antes de que se generalizara el uso de CSS, los diseadores de pginas web utilizaban
etiquetas HTML especiales para modificar el aspecto de los elementos de la pgina. El
siguiente ejemplo muestra una pgina 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 pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo 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 tamao de letra de cada elemento de la pgina.El problema
de utilizar este mtodo para definir el aspecto de los elementos se puede ver
claramente con el siguiente ejemplo: si la pgina tuviera 50 elementos diferentes,
habra que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000
pginas diferentes, habra que definir 500.000 etiquetas <font>. Como cada etiqueta
<font> tiene tres atributos, habra que definir 1.5 millones de atributos.
Como el diseo de los sitios web est en constante evolucin, es habitual modificar
cada cierto tiempo el aspecto de las pginas del sitio. Siguiendo con el ejemplo
anterior, cambiar el aspecto del sitio requerira modificar 500.000 etiquetas y 1.5
millones de atributos.La solucin que propone CSS es mucho mejor, como se puede ver
en el siguiente ejemplo:
<head>
<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 pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
CSS permite separar los contenidos de la pgina y la informacin sobre su aspecto. En

el ejemplo anterior, dentro de la propia pgina HTML se crea una zona especial en la
que se incluye toda la informacin relacionada con los estilos de la pgina.Utilizando
CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el
cdigo HTML de los contenidos con etiquetas <font>. Como se ver ms adelante, la
etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se
aplican en la pgina.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas
<h1> de la pgina se deben ver de color rojo, con un tipo de letra Arial y con un
tamao de letra grande. Adems, las etiquetas <p> de la pgina se deben ver de color
gris, con un tipo de letra Verdana y con un tamao de letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos
respecto a la solucin anterior, pero sigue sin ser una solucin ideal. Como los estilos
CSS slo se aplican en la pgina que los incluye, si queremos que las 10.000 pginas
diferentes del sitio tengan el mismo aspecto, se deberan copiar 10.000 veces esas
mismas reglas CSS. Ms adelante se explica la solucin que propone CSS para evitar
este problema.
Formas de inclusin
Mtodo para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya
que tiene los mismos problemas que la utilizacin de las etiquetas <font>.
Ejemplo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
</body>
</html>
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en
determinadas situaciones en las que se debe incluir un estilo muy especfico para un
solo elemento concreto.
Uso de comentarios
CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son
contenidos de texto que el diseador incluye en el archivo CSS para su propia
informacin y utilidad. Los navegadores ignoran por completo cualquier comentario de
los archivos CSS, por lo que es comn utilizarlos para estructurar de forma clara los
archivos CSS complejos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del

comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas lneas como sea necesario, pero no se puede
incluir un comentario dentro de otro comentario:
/* Este es un
Comentario CSS de varias
Lneas */
Aunque los navegadores ignoran los comentarios, su contenido se enva junto con el
resto de estilos, por lo que no se debe incluir en ellos ninguna informacin sensible o
confidencial. La sintaxis de los comentarios CSS es muy diferente a la de los
comentarios HTML, por lo que no deben confundirse:


Agrupacin de reglas
Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual
que los estilos que se aplican a un mismo selector se definan en diferentes reglas:
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
Las tres reglas anteriores establecen el valor de tres propiedades diferentes de los
elementos <h1>. Antes de que el navegador muestre la pgina, procesa todas las
reglas CSS de la pgina para tener en cuenta todos los estilos definidos para cada
elemento.
Cuando el selector de dos o ms reglas CSS es idntico, se pueden agrupar las
declaraciones de las reglas para hacer las hojas de estilos ms eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
El ejemplo anterior tiene el mismo efecto que las tres reglas anteriores, pero es ms
eficiente y es ms fcil de modificar y mantener por parte de los diseadores. Como
CSS ignora los espacios en blanco y las nuevas lneas, tambin se pueden agrupar las
reglas de la siguiente forma:
h1 { color: red; font-size: 2em; font-family: Verdana; }
Si se quiere reducir al mximo el tamao del archivo CSS para mejorar ligeramente el
tiempo de carga de la pgina web, tambin es posible indicar la regla anterior de la
siguiente forma:
h1 {color: red; font-size: 2em; font-family:Verdana;}
Colores
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave,
colores del sistema, RGB hexadecimal, RGB numrico y RGB porcentual. Aunque el
mtodo ms habitual es el del RGB hexadecimal, a continuacin se muestran todas las
alternativas que ofrece CSS.
CSS define 17 palabras clave para referirse a los colores bsicos. Las palabras se
corresponden con el nombre en ingls de cada color:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red,
silver, teal, white, yellow
Estilos
Veamos los parmetros disponibles para dar estilo al texto. Como ya sabes, las
unidades de medida aplicables a todos ellos son varias, pero para mayor claridad, en
todos los ejemplos utilizaremos solamente el pxel: px. Sea por ejemplo la siguiente
pgina:
<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</HEAD>
<BODY>
Texto fuera de prrafo.<BR> Segunda lnea fuera de prrafo.
<P>texto de prrafo. <BR> segunda lnea de prrafo.</P>
</BODY>
</HTML>
Y si escribimos la siguiente hoja de estilo estilo.css:
BODY {color:green }
P {color:red;
font-size:20px;
font-family:Courier;
font-weight:bold;
font-style:italic;
line-height:30px;
letter-spacing:5px;
text-decoration:underline;
text-transform:capitalize;
text-align:left;
text-indent:30px;
font-size:20px; Tambin muy conocido: define el tamao de los caracteres.

Adems del tamao definido por el usuario, expresado en cualquiera de las
unidades de medida conocidas, puede tener alguno de los siguientes valores
absolutos: xx-large x-large large medium small x-small xx-small.
font-family:Courier; Indica el nombre (o nombres) del tipo de letra que se va a

emplear. En el ejemplo se ha utilizado el tipo "Courier", pero pueden escribirse
varios separados por comas, lo que indica al navegador que si no existe en la
mquina el primer tipo, utilice el segundo, y si tampoco, el tercero, etc. Por
ejemplo: font-family:Courier,Verdana,Arial;
Cuando definas tipos de letra, recuerda que muchos programas y algunos
drivers de impresora instalan sus propias fuentes en el sistema sin avisarte, y
puede que en tu mquina haya tipos que no son estndar en Windows. No se
deben utilizar tipos extraos que difcilmente se encontrarn en las mquinas
de los clientes, es decir, el tipo de fuente indicado en la hoja simplemente le
indica al navegador qu fuente debe usar, NO se la sirve. En la versin 3 de CSS
parece que se podr indicar al cliente dnde obtener una fuente que no tenga
instalada.
font-weight:bold; Aqu se especifica el peso o grosor de la fuente. Pueden

emplearse literales como lighter, normal (por defecto) o bold. Tambin se
pueden utilizar nmeros entre 100 y 900, escritos de 100 en 100 (no sirve 190,
pero s 200). Los pesos no tienen los mismos resultados en todas las mquinas,
ya que depende mucho de la calidad de su pantalla, de su resolucin, del
navegador que emplea... En cualquier caso, no deben hacerse combinaciones
extraas, como definir un size muy pequeo y darle peso 900, ya que lo nico
que conseguirs es un borrn perfectamente ilegible.
font-style:italic; Solamente tiene dos posibilidades: normal (por defecto) o
italic que es el empleado en el ejemplo que estamos analizando, y que hace que
el texto tenga cierta inclinacin.
line-height:30px; Sirve para establecer la distancia entre lneas consecutivas

de un mismo prrafo. Adems de en pxels o alguna de las unidades de medida
que ya conocemos, puede indicarse con un simple nmero que viene a indicar,
aproximadamente, cuantas anchuras de lnea se tomarn como unidad de
medida para separar una lnea de otra. As, por ejemplo, si pones 0 la segunda
lnea se suporpone a la primera.
letter-spacing:5px; Establece la separacin entre los caracteres de la lnea.
word-spacing:5px; Establece la separacin entre las palabras de la lnea.
text-decoration:underline; Con este parmetro, que no influye en el tamao,

puedes acompaar al texto de una delgada lnea decorativa que puede estar en
tres posiciones distintas, como underline (el tpico subrayado debajo de la
lnea), through (en el centro de la lnea -tachado-) o overline (encima del texto).
Para que no aparezca se utiliza none (por defecto). El valor none se puede
utilizar para eliminar el efecto de subrayado que ponen otros elementos, como
ocurre en los links.
text-transform:capitalize; Curioso efecto que provee de cuatro posibilidades:

capitalize que convierte en mayscula la primera letra de cada palabra del
texto, como puedes ver en el ejemplo, donde el texto original no es as.
uppercase para convertir todas las letras a maysculas y lowercase para lo
contrario, es decir, convertir todas las letras a minsculas. El valor por defecto
es none, que como ya habrs supuesto, deja el texto tal como est escrito.
text-align:left; Alinea el texto segn convenga. Con left a la izquierda (por
defecto), right a la derecha, center centrado, y justify justificado, es decir,
igualando todas las lneas en longitud a izquierda o derecha.
text-indent:30px Produce que la primera lnea del prrafo se escriba

adentrada (indentada) un cierto espacio hacia la derecha o hacia la izquierda,
dependiendo de la alineacin activa.
Herencia
Una de las caractersticas principales de CSS es la herencia de los estilos definidos para
los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus
elementos descendientes heredan de forma automtica el valor de esa propiedad. Si se
considera el siguiente ejemplo:
<head>
<title>Ejemplo de herencia de estilos</title>
body { color: blue; }
</style>
</head>
<body>
</body>
</html>
En el ejemplo anterior, el selector body solamente establece el color de la letra para el

elemento <body>. No obstante, la propiedad color es una de las que se heredan de
forma automtica, por lo que todos los elementos descendientes de <body> muestran
ese mismo color de letra. Por tanto, establecer el color de la letra en el elemento
<body> de la pgina implica cambiar el color de letra de todos los elementos de la
pgina.
Aunque la herencia de estilos se aplica automticamente, se puede anular su efecto

estableciendo de forma explcita otro valor para la propiedad que se hereda, como se
muestra en el siguiente ejemplo:
<head>
<title>Ejemplo de herencia de estilos</title>
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
</body>
</html>
En el ejemplo anterior, se establece en primer lugar el color y tipo de letra del

elemento <body>, por lo que todos los elementos de la pgina se mostraran con ese
mismo color y tipo de letra. No obstante, las otras reglas CSS modifican alguno de los
estilos heredados.De esta forma, los elementos <h1> de la pgina se muestran con el
tipo de letra Verdana establecido por el selector h1 y se muestran de color negro que
es el valor heredado del elemento <body>. Igualmente, los elementos <p> de la
pgina se muestran del color rojo establecido por el selector p y con un tipo de letra
Arial heredado del elemento <body>.
La mayora de propiedades CSS aplican la herencia de estilos de forma automtica.

Adems, para aquellas propiedades que no se heredan automticamente, CSS incluye
un mecanismo para forzar a que se hereden sus valores, tal y como se ver ms
adelante.
Por ltimo, aunque la herencia automtica de estilos puede parecer complicada,

simplifica en gran medida la creacin de hojas de estilos complejas. Como se ha visto
en los ejemplos anteriores, si se quiere establecer por ejemplo la tipografa base de la
pgina, simplemente se debe establecer en el elemento <body> de la pgina y el resto
de elementos la heredarn de forma automtica.

Especificación Oficial

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Especificación Oficial

Transféré par

Droits d'auteur :

Formats disponibles

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un

lenguaje que describe la presentacin de los documentos estructurados en hojas de

Desde hace varios aos, el organismo W3C trabaja en la elaboracin de la prxima

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos sin CSS</title>

<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>

<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos con CSS</title>

h1 { color: red; font-family: Arial; font-size: large; }

p { color: gray; font-family: Verdana; font-size: medium; }

<p>Un prrafo de texto no muy largo.</p>

CSS permite separar los contenidos de la pgina y la informacin sobre su aspecto. En

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en el propio documento</title>

<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>

El comienzo de un comentario se indica mediante los caracteres /* y el final del

/* Este es un comentario en CSS */

Comentario CSS de varias

Comentario HTML de varias

h1 { color: red; font-size: 2em; font-family: Verdana; }

h1 {color: red; font-size: 2em; font-family:Verdana;}

<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">

Texto fuera de prrafo.<BR> Segunda lnea fuera de prrafo.

<P>texto de prrafo. <BR> segunda lnea de prrafo.</P>

Y si escribimos la siguiente hoja de estilo estilo.css:

font-size:20px; Tambin muy conocido: define el tamao de los caracteres.

font-family:Courier; Indica el nombre (o nombres) del tipo de letra que se va a

font-weight:bold; Aqu se especifica el peso o grosor de la fuente. Pueden

line-height:30px; Sirve para establecer la distancia entre lneas consecutivas

letter-spacing:5px; Establece la separacin entre los caracteres de la lnea.

word-spacing:5px; Establece la separacin entre las palabras de la lnea.

text-decoration:underline; Con este parmetro, que no influye en el tamao,

text-transform:capitalize; Curioso efecto que provee de cuatro posibilidades:

text-indent:30px Produce que la primera lnea del prrafo se escriba

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de herencia de estilos</title>

body { color: blue; }

<p>Un prrafo de texto no muy largo.</p>

En el ejemplo anterior, el selector body solamente establece el color de la letra para el

Aunque la herencia de estilos se aplica automticamente, se puede anular su efecto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<title>Ejemplo de herencia de estilos</title>

body { font-family: Arial; color: black; }

<p>Un prrafo de texto no muy largo.</p>

En el ejemplo anterior, se establece en primer lugar el color y tipo de letra del

La mayora de propiedades CSS aplican la herencia de estilos de forma automtica.

Por ltimo, aunque la herencia automtica de estilos puede parecer complicada,

Vous aimerez peut-être aussi