2000/08/21
1 Comment
Reading time: 18 – 30 minutes
Després d’una serie de dies barallant-me en el format HTML de la web
he decidit fer una estructura CSS q li doni el format a tot el portal. Per tal
de poder fer això he trobat un mini-manual q suposo q serà
suficient per crear aquests fitxers .css.
Hojas de estilo en cascada.
Introducción
Las hojas de estilo son un gran avance en el diseño de páginas Web,
ya que permiten un mejor manejo de la apariencia.
Hasta el momento era necesario recurrir a diversos trucos para suplir las
limitaciones del HTML y mejorar la presentación de las páginas. Estos
trucos normalmente usados han tenido efectos secundarios ya que suelen
funcionar solo para algunas navegadores o plataformas, aumentan la complejidad
de la pagina, tienen poca flexibilidad y tienden a aumentar el peso de la
pagina (mas Kbs).
Agunos de estos trucos son:
- Uso de comandos no estándar.
- Convertir el texto en imagen.
- Usar imágenes transparentes para crear espacios en blanco.
- Uso de tablas para forzar determinadas presentaciones.
- Uso programas o lenguajes ajenos al HTML para conseguir determinados
efectos. (JavaScrip, JAVA, CGIs, etc)
Las hojas de estilo en cascada nos devuelven el controlar de la
presentación. Por ejemplo, nos permiten determinar margenes, espacio
interlíneal, tipo y tamaño de las fuentes, colores de texto y fondo,
así como la redefinicion a voluntad de cualquier comando.
Además hay otro aspecto muy importante en las hojas de estilo y es que
separan por completo la información para la
presentación de una página de su
contenido, con lo que se facilita mucho el diseño y
revisión de las páginas, pues se puede variar la presentación de
una página, o de todo el conjunto de ellas, sin cambiar una sola
línea del código del HTML.
Como veremos más adelante, se pueden definir variaciones de diseño
por medio de las “clases”. Por ejemplo, si se necesitan cinco estilos de
párrafos diferentes, se pueden definir cinco subcomandos
<P>: P.normal, P.indentado, P.subrayado, P.rojo y
P.dobleespacio.
NOTA: Las hojas de estilo en cascada solo son soportadas
por Explorer 3.0 y Netscape 4.0 en adelante. Otros navegadores, o versiones
anteriores simplemente lo ignorarán.
Cómo funcionan ?
Las hojas de estilo en cascada nos permiten redefinir las
reglas que usa el navegador para presentar una página del Web.
Todos los navegadores tienen sus reglas. Así, por
ejemplo se define H1 como un texto alineado a la izquierda, un
par de puntos mayor que el resto y en negrita.
Cada comando define sus propias reglas para mostrar el texto que engloba.
Con las hojas de estilo podemos cambiar cada una de estas
reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el
comportamiento de cada comando.
Hay tres maneras de añadir estilos a nuestras
páginas Web.
- Añadiendo instrucciones de estilo sólo a
comandos concretos o a un grupo de ellos.
- Incluyendo las instrucciones de estilo en el documento
HTML de una página concreta, permite cambiar la apariencia de una hoja
entera.
- Enlazando varias paginas con un archivo de
estilo, de modo que se puede cambiar la apariencia de múltiples
páginas retocando dicho archivo .CSS
Podemos usar en nuestras páginas uno, dos o los tres métodos
descritos, como se verá más adelante.
1. Estilo para camandos concretos o grupos de comandos
Este método es el apropiado si sólo se desea cambiar el estilo en
unas secciones determinadas de una página. Con él podemos manipular
las propiedades de alguna comando o de algún grupo de comandos.
Se hace añadiendo el parametro STYLE, que contiene una
serie de propiedades, dentro del comando correspondiente. Veamos el siguiente
ejemplo: <P>
"Este es un párrafo normal, sin márgenes a la izquierda ni a
la derecha, con el color de su texto en negro".
<P STYLE="margin-left: 0.5in; margin-right: 0.5in;
color:green">
"Quiero que este otro párrafo tenga un margen izquierdo de media
pulgada, al igual que el margen derecho. Además quiero que su texto sea de
color verde".
Que se verá (en los navegadores que soportan hojas de estilo) de esta
manera:
“Este es un párrafo normal, sin márgenes a la izquierda ni a la
derecha, con el color de su texto en negro”.
“Quiero que este otro párrafo tenga un margen izquierdo de
media pulgada, al igual que el margen derecho. Además quiero que su texto
sea de color verde”.
Como se ve en este ejemplo, hemos variado la manera de cómo se comporta
habitualmente la comando <P>. Podíamos haber conseguido
otras muchas más cosas, como se verá más adelante.
Obsérvese la sintaxis del parametro
STYLE. Se ponen entre comillas una serie de propiedades (por
ejemplo, margin-left), y después de dos puntos se pone el
valor de esa propiedad (en este caso, 0.5in o sea, 0.5
pulgadas). Las distintas propiedades deberán estar separadas por punto y
coma.
Si queremos cambiar la apariencia de una sección
entera (que agrupe un conjunto de comandos), se puede usar el comando
<DIV>, con lo que definimos el estilo globalmente para
esa sección.
En el siguiente ejemplo cambiamos el color (a rojo) y el tamaño de la
fuente (a 16 puntos) de un bloque de comandos por medio del comando
<DIV>, lo que tiene el mismo efecto que si
hubiéramos asignado este estilo separadamente a cada una de las comandos
englobados (<P>, <UL> y
<LI>):
<DIV STYLE="font-size: 16pt; color: red">
<P>La definición del estilo (rojo y 16 puntos), afecta a todo el
bloque de comandos.
<P>Este texto también es rojo y tiene 16 puntos de altura.
<P>Al igual que esta línea.
</DIV>
Que se ve de la siguiente manera:
La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de
comandos.
Este texto también es rojo y tiene 16 puntos de altura.
Al igual que esta línea.
Qué ocurre si a una de los comandos englobados por DIV
le introducimos un estilo distinto ? Comprobémoslo introduciendo un estilo
propio al segundo comando <P>:
<DIV STYLE="font-size: 16pt; color: red">
<P>
Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el
bloque de comandos, hasta el comando de cierre de DIV.
<P STYLE="color: blue">Esta línea es azul, a pesar de estar
englobada dentro de DIV, porque tiene su propio estilo.
<P>Esta otra cumple con el estilo de DIV, porque no tiene estilo
propio.
</DIV>
Este es el resultado:
Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el
bloque de comandos.
Esta línea es azul, a pesar de estar englobada dentro de
DIV, porque tiene su propio estilo.
Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.
Como se comprueba en este caso, el estilo dentro de un comando
concretaotiene preferencia sobre el estilo del bloque,
impuesto por DIV.
La preferencia de unos métodos sobre otros, se debe al orden en que
estos son activados por el navegador, por este motivo es que se llamen
Hojas de estilo en cascada ya que hay una cascada de
métodos para aplicar los estilos, teniendo un orden de preferencia
riguroso de unos sobre otros.
Este método de introducir el estilo en comandos concretas o en
conjuntos de comandos es sencillo de aplicar y es el adecuado si sólo se
desea hacer algún cambio puntual en una página. Sin embargo no es la
verdadera potencia de los hojas de estilo.
2. Inclusión global del estilo en un documento HTML
Se hace poniendo un bloque de instrucciones dentro de los comandos
<STYLE> y </STYLE>, que
deberá estar dentro de la cabecera del documento, después del
título, entre las comandos </TITLE> y
</HEAD>.
Este comando <STYLE> tiene un parametro,
TYPE, que especifica el tipo de medio en que va a ser
publicado en Internet, en nuestro caso será “text/css”, que permitirá
a los navegadores que no soporten estilos ignorarlos. Por tanto, la estructura
será la siguiente:
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
[bloque de instruciones de estilo]
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las comandos que componen la página]
</BODY>
</HTML>
Veamos ahora con un ejemplo, cómo se escribe el bloque de instrucciones
del estilo, incluido dentro de la comando <STYLE> (en el
capítulo siguiente se ve con detalle cada uno de los atributos):
<STYLE TYPE="text/css">
BODY {background: yellow ;font-size: 10pt; font-family: Arial;
margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>
Como se ve en este ejemplo, se ponen las distintas comandos a las que se
quiere atribuir un estilo (en este caso BODY, H1, H2 y
DIV, pero podrían haber sido otras cualesquiera); a
continuación del nombre de cada comando, y englobadas por los signos “{” y
“}” van las distintas propiedades con sus respectivos valores, separadas unas
de otras por un punto y coma.
Si se coloca este bloque en la cabecera del documento HTML, donde se ha
indicado antes, veremos que cada vez que se usa una de las comandos que tienen
una definición de estilo, no se comportará de la forma habitual, sino
tal como la hemos definido. El resto de los comandos, que no están
incluidas en el bloque de definición del estilo, se comportarán de la
forma habitual.
3. Enlazando distintos documentos a una hoja de estilo
Si nuestro sitio del Web está compuesto por muchas páginas, y
queremos darles un estilo uniforme a unas cuantas, en vez de incluir un bloque
de definición de estilo repetido en cada una de ellas (como se ha visto en
la sección anterior), se puede establecer un enlace a un archivo
de texto que contiene el bloque de definición del estilo.
Supongamos que queremos aplicar a unas cuantas páginas el estilo visto
en el ejemplo anterior. Tendríamos que crear un archivo de
texto como este:
BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left:
0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)} |
Obsérvese que no tiene ningun comando, pues no es un
documento normal HTML, sino que es un archivo de texto que sólo contiene
el bloque de definición del estilo.
Se guarda con el nombre que se quiera, pero tiene que tener necesariamente
la extensión .css Supongamos que lo guardamos con el
nombre de hoja.css
En todas las páginas que queremos que tengan este estilo concreto,
sólamente deberemos de añadir (en el mismo sitio de la cabecera que
para el caso anterior, es decir entre </TITLE> y
</HEAD>, el siguiente comando:
<LINK REL=stylesheet HREF=hoja.css TYPE="text/css">
Aquí se ha supuesto que el archivo hoja.css se ha
dejado en el mismo directorio donde están los documentos HTML. Si no es
así, es decir, si está en otro subdirectorio en el servidor,
habría que indicar la ruta (por, ejemplo:
HREF=ruta/hoja.css).
Un ejemplo de este método lo constituye este manual,
en donde todos los capítulos están enlazados con un archivo que
contiene la hoja de estilo para todos ellos, llamado
hoja.css.
Mezclando los métodos
Como se ha visto anteriormente, hay tres métodos de aplicar las hojas
de estilo en cascada.
Se pueden aplicar más de uno a la vez en una misma página ?
Sí. Por ejemplo, en la confección de este manual se utilizan
simultáneamente algunos de ellos. En las páginas del índice y de
la portada se utilizan el segundo método (inclusión de la hoja de
estilo en el documento HTML) y también el primero (inclusión del
estilo en comandos concretas). Y en la totalidad de los capítulos se usan
el tercero (enlace a la hoja de estilo) y el primero.
Qué ocurre si hay información contradictoria entre ellos ?
Para evitar conflictos entre los distintos métodos usados
simultáneamente, existe un orden de preferencia, es
decir, cuál prevalecerá sobre el otro si dan órdenes
contradictorias sobre un aspecto concreto.
El orden de preferencia es el siguiente (de mayor a menor):
- Estilo dentro de una comando.
- Bloque de estilo en la cabecera del documento.
- Enlace a un archivo que contiene la hoja de estilo
.CSS
Esto quiere decir que una orden de estilo, por ejemplo el color del texto,
puesta dentro de un comando, prevalecerá sobre la que esté indicada
en los otros dos métodos, si es que se usan en esa página.
Lo más práctico es usar el tercer método (enlace a una hoja
de estilo), para dar una apariencia consistente a todas las páginas, y si
es necesario modificar un aspecto concreto en alguna de ellas, usar el primero
o el segundo metodo.
Hojas de estilo en cascada.
Atributos
A continuación se muestra una tabla con el resumen de los parametros
que se pueden incluir en las hojas de estilo. Pulsando el enlace con el nombre
del atributo nos lleva a la sección donde se comenta con m s detalle.
| Atributo |
Descripción |
Valores |
Ejemplo |
| Font-Size |
Establece el tamaño de texto. |
Puntos (pt)
Pixels (px)
centímetros (cm)
pulgadas (in) |
{font-size: 12pt}
{font-size: 24px}
{font-size: 5cm}
{font-size: 1in} |
| Font-Family |
Establece el tipo de fuente. |
Nombre de la fuente o familia de fuente |
{font-family: “Comic Sans MS”,Sans-Serif} |
| Font-Weight |
Establece el peso de la fuente, pero dependen de ella. |
Extra-Light
Light
Demi-Light
Medium
Demi-Bold
Bold
Extra-Bold |
{font-weight: bold} |
| Font-Style |
Establece el texto como letra cursiva. |
Normal
Italic
Minusculas
oblicuas |
{font-style: italic} |
| Line-Height |
Establece la distancia entre líneas. |
puntos (pt)
pixels (px)
centímetros (cm)
pulgadas (in)
porcentaje (%) |
{Line-Height: 24pt} |
| Color |
Establece el color del texto. |
Nombre del color
valores RGB |
{color: blue} |
| Text-Decoration |
Subraya o remarca el texto. |
None (ninguna)
Underline (Subratado)
Italic (cursiva)
Line-Through (Tachado) |
{text-decoration: underline} |
| Margin-left |
Establece el márgen izquierdo de la p gina |
Puntos (pt)
pixels (px)
centímetros (cm)
pulgadas (in) |
{margin-left: 3cm} |
| Margin-right |
Establece el márgen derecho de la p gina. |
Puntos (pt)
pixels (px)
centímetros (cm)
pulgadas (in) |
{margin-right: 3cm} |
| Margin-top |
Establece el márgen superior de la p gina. |
Puntos (pt)
pixels (px)
centímetros (cm)
pulgadas (in) |
{margin-top: -20px} |
| Text-align |
Establece la alineacion del texto. |
Left
Center
Right |
{text-align: right} |
| Text-Indent |
Establece la indentación del texto. |
Puntos (pt)
pixels (px)
centímetros (cm)
pulgadas (in) |
{text-indent: 1.5cm} |
| Background |
Establece la imagen o el color del fondo. |
URL,
nombre del color
valor RGB |
{background:#33CC00}
{background: red}
{background: URL(isla.gif)} |
Hojas de estilo en cascada.
Consejos de uso
En este capítulo se amplíaan los conceptos vistos en los dos
capítulos anteriores, y se introducen algunos nuevos sobre las hojas de
estilo en cascada.
Agrupando distintos atributos
Supongamos que se quieren atribuir los mismos atributos a
diferentes comandos, como por ejemplo:
H1 {font-size: 15pt;
font-weight: bold;
color: maroon}
H2 {font-size: 15pt;
font-weight: bold;
color: maroon}
H3 {font-size: 15pt;
font-weight: bold;
color: maroon}
Se pueden agrupar de esta manera:
H1, H2, H3 {font-size: 15pt;
font-weight: bold; color: maroon}
Agrupación de los atributos del texto
En el capmtulo anterior se han visto una serie de atributos relacionados con
la apariencia del texto. Se pueden simplificar agrupandolos de una manera
determinada. Asm, por ejemplo, en lugar de:
P {font-weight: bold; font-style: italic; font-size: 12pt;
line-height: 20pt; font-family: Times, serif; }
Se pueden agrupar en un znico atributo llamado font:
P {font: bold italic 12pt/20pt Times, serif}
Nota: El orden de los atributos es significativo. Los
atributos Font-Weight y Font-Style se deben
especificar antes que los demas.
Agrupación de los atributos de los márgenes
Tambiin se pueden agrupar los tres distintos atributos para los margenes
(superior, derecho e izquierdo) en un znico atributo llamado
margin.
Así, por ejemplo, en lugar de:
BODY {margin-top: 20px; margin-right: -10px; margin-left: -10px}
Se puede poner:
BODY {margin: 20px -10px-10px}
El orden de colocacisn es significativo. Debe ser: superior (top), derecho
(right) e izquierdo (left). Si se pone un znico valor, sera aplicado a los tres
margenes.
Variaciones por medio de clases
En el capmtulo 23 vimos que uno de los mitodos era la inclusisn global del
estilo, en el que se definman los estilos de un bloque de distintas comandos.
Vimos allm este ejemplo:
<STYLE TYPE="text/css"> BODY {background: yellow ; font-size: 10pt;
font-family: Arial; margin-left: 0.5in; margin-right: 0.5in} H1
{background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red} DIV {background:
URL(nubes.jpg)} </STYLE>
Como se puede ver, se define para la comando H2, por
ejemplo, que su texto sea de color rojo (red). Pero esto hace que,
obligatoriamente, todas las cabeceras de nivel H2 sean de este color en toda la
p gina.
Pero nos podrma interesar, por el motivo que sea, que unas veces tenga el
color rojo y otras veces sea de otros colores. Para conseguirlo, se pueden
emplear unas clases (variantes de esta comando). Para ello, se
define separadamente la comando H2, seguida de un punto y un nombre que
queramos, como por ejemplo:
H2.rojo {font-size: 12pt; font-weight: bold; color:
red} H2.verde {font-size: 12pt; font-weight: bold; color: green} H2.
azul {font-size: 12pt; font-weight: bold; color: blue}
y en la pagina, podremos utilizar, según nos convenga, una u otra de
estas variantes de la siguiente manera:
<H2 CLASS=rojo>Esta cabecera sera de color rojo</H2>
<H2 CLASS=verde>Esta cabecera sera de color verde</H2>
<H2 CLASS=azul>Esta cabecera sera de color
azul</H2>
Como se ve, esto nos da una flexiblidad azn mayor para obtener la apariencia
que queramos en nuestra paginas.
Aplicacisn de estilo a los enlaces
Las hojas de estilo tambiin permiten modificar a voluntad la apariencia de
los enlaces, asignando cualquiera de los atributos vistos
(color del texto, tamaqo de la fuente, existencia o no del subrayado,
etc.).
Hay dos tipos de enlaces que se pueden modificar:
A:link enlaces que todavma no han sido visitados
(pulsados)
A:visited enlaces que ya han sido visitados (pulsados)
Por ejemplo:
A:link {color: red} A:visited {color: green}
hace que los enlaces sin visitar sean de color rojo, y una vez visitados se
pongan de color verde.
Si se les aplica el atributo text-decoration visto en el
Capmtulo anterior, ajustado al parametro none (ninguno), hace
que los enlaces no estin subrayados. Ejemplo:
A:visited {color: fuchsia; text-decoration: none}
hace que los enlaces visitados sean de color fucsia y no estén
subrayados.
Comentarios
Se pueden añadir comentarios propios a las hojas de
estilo, que pueden servir de recordatorio posterior. Se pueden colocar en
cualquier sitio de la especificacisn, siempre que vayan englobados entre los
caracteres /* y */. Ejemplo:
H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde para las
cabeceras de nivel 1 */
Diseñando para todos los navegadores
Si se usa el metodo de incluir un bloque de estilo en la cabecera, que
consiste en poner las distintas instrucciones de estilo entre las comandos
<STYLE> y </STYLE>, tal como en
el ejemplo que se visúalisara:
<STYLE TYPE="text/css"> BODY
{background: yellow ; font-size: 10pt; font-family: Arial;
margin-left: 2cm; margin-right: 2cm} H1 {background: blue;
font-size: 14pt; font-weight: bold; color: red} H2 {font-size: 12pt;
font-weight: bold; color: red} DIV {background: URL(isla.gif)}
</STYLE>
en los navegadores que no implementen las hojas de estilo se ignoraran las
comandos <STYLE> y </STYLE>, pero
podrá ocurrir que aparezca como texto el bloque de definición del
estilo.
Para evitar esto, es conveniente englobar dicho bloque de información
entre los símbolos <!– y –>. Por
tanto, es conveniente poner el bloque de definición del estilo de esta
manera:
<STYLE TYPE="text/css"> <!-- BODY {background: yellow
; font-size: 10pt; font-family: Arial; margin-left: 2cm;
margin-right: 2cm} H1 {background: blue; font-size: 14pt;
font-weight: bold; color: red} H2 {font-size: 12pt; font-weight:
bold; color: red} DIV {background: URL(nubes.jpg)} -->
</STYLE>
Aprovechando la herencia entre comandos
Como sabemos, las comandos de un documento HTML tienen una estructura
definida, que de manera muy resumida se puede poner de esta forma:
<HTML> <BODY> (conjunto de
comandos que conforman la pagina) </BODY> </HTML>
Como se puede ver, el comando <BODY>
engloba a todas las demas. Si se la asigna un estilo
determinado a esta comando, todos los elementos que estin dentro de la pagina
(tablas, listas, parrafos, etc.) heredaran este estilo.
Por tanto, para establecer un estilo global a la pagina entera, lo mas
apropiado es atribumserlo a la comando <BODY>. Por
ejemplo:
BODY {font: 10pt/11pt
Arial, Helvetica, sans-serif; background: url(isla.gif);
margin-left: 2cm; margin-right: 2cm}
Establece para la pagina entera la fuente, separación entre líneas,
imagen de fondo y espesor de los margenes. Si se precisa que ciertos elementos
concretos dentro de la pagina tengan otras caractermsticas distinta a la
general, entonces hay que definirlas por separado.
Manual de HTML v2.1
Ing Enrique Garrido-Lecca Risco
Universidad ALAS Peruanas