El modo de funcionamiento de las hojas de estilo en cascada (CSS) consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:
- Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
- Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.
- Una porción del documento, aplicando estilos visibles en un trozo de la página.
- Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con margenes, sin ellos...
La potencia de la tecnología salta a la vista. Pero no solo se queda
aquí, ya que además esta sintaxis CSS permite aplicar al documento
formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto
para maquetar las páginas y teníamos que utilizar trucos para conseguir
nuestros efectos, ahora tenemos muchas más herramientas que nos permiten
definir esta forma:
- Podemos definir la distancia entre líneas del documento.
- Se puede aplicar identado a las primeras líneas del párrafo.
- Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
- Y mucho más, como definir la visibilidad de los elementos, margenes, subrayados, tachados...
Y seguimos mostrandoos ventajas, ya que si con el HTML tan sólo podíamos
definir atributos en las páginas con pixeles y porcentajes, ahora
podemos definir utilizando muchas más unidades como:
- Pixels (px) y porcentaje (%), como antes.
- Pulgadas (in)
- Puntos (pt)
- Centímetros (cm)
CSS sirve para definir el aspecto de las páginas web, eso ya debe haber
quedado claro. No obstante, hay diferentes niveles a los que podemos
aplicar los estilos y es algo que vamos a describir ahora.
Hemos denominado a este apartado los diferentes usos de las CSS y relata
justamente eso, los distintos niveles a los que podemos usar las Hojas
de Estilo, que van desde definir los estilos de manera específica, para
un pequeño fragmento de una página, hasta los estilos para todo un sitio
web completo. Todo esto pasando por diversos otros niveles que
resultarán de mucha utilidad también en nuestro día a día como
diseñadores.
Vamos por orden, describiendo los puntos desde el más específico al más
general, de manera que que también iremos aumentando la dificultad e
importancia de los distintos usos. Hemos partido este capítulo en dos
partes por su extensión y por haber varias formas distintas de aplicar
estilos, aquí veremos las más sencillas y en el capítulo siguiente otras
más complicadas pero más potentes.
Nota: CSS tiene una sintaxis propia. En
este artículo ofreceremos diversos códigos de CSS, aunque no hemos
explicado la sintaxis todavía.
A través de los próximos ejemplos veremos una pequeña introducción a la
manera de escribir código CSS
Pequeñas partes de la página
Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su atributo style
indicamos en sintaxis CSS las características de estilos. Lo vemos con
un ejemplo, pondremos un párrafo en el que determinadas palabras las
vamos a visualizar en color verde.
<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil.
</p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil.
</p>
Que tiene como resultado:
Esto es un párrafo con varias palabras en color verde. resulta muy fácil.
Estilo definido para una etiqueta
De este modo podemos hacer que toda una etiqueta muestre un estilo
determinado. Por ejemplo, podemos definir un párrafo entero en color
rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>
Que tiene como resultado:
Esto es un párrafo de color rojo.
Esto es un párrafo de color azul.
Estilo definido en una parte de la página
Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.
<div style="color:#000099;
font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>
Que tiene como resultado:
Estas etiquetas van en azul y negrita
Seguimos dentro del DIV, luego permanecen los etilosEstilo definido para toda una página
Podemos definir, en la cabecera del documento, estilos para que sean
aplicados a toda la página. Es una manera muy cómoda de darle forma al
documento y muy potente, ya que estos estilos serán seguidos en toda la
página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al
documento. Además, si deseamos cambiar los estilos de la página lo
haremos de una sola vez.
Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de
manera más avanzada. Pero no te preocupes puesto que con los ejemplos
irás aprendiendo su uso y más tarde comentaremos la sintaxis en
profundidad.
En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en
la cabecera de la página para definir los distintos estilos del
documento.
A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el
nombre de la etiqueta que queremos definir los estilos y entre llaves
-{}- colocamos en sintaxis CSS las características de estilos.
<html>
<head>
<title>Ejemplo de estilos para toda una página</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>
<head>
<title>Ejemplo de estilos para toda una página</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>
<body>
<h1>Página con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p>
</body>
</html>
<h1>Página con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p>
</body>
</html>
Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará
- Subrayado
- Centrada
También, por ejemplo, hemos definido que el cuerpo entero de la página
(etiqueta <BODY>) se le apliquen los estilos siguientes:
- Color del texto negro
- Color del fondo grisaceo
- Margen lateral de 1 centímetro
Caber destacar que si aplicamos estilos a la etiqueta <BODY>,
estos serán heredados por el resto de las etiquetas del documento. Esto
es así siempre y cuando no se vuelvan a definir esos estilos en las
siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta
será el que mande. Puede verse este detalle en la etiqueta <P>,
que tiene definidos estilos que ya fueron definidos para <BODY>.
Los estilos que se tienen en cuenta son los de la etiqueta <P>,
que es más concreta.
Por último, ha de apreciarse los comentarios HTML que engloban toda la
declaración de estilos: <!--Declaración de estilos-->. Estos
comentarios se utilizan para que los navegadores antiguos, que no
comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la
página. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape
3) escribirían ese "feo código" en la página.
Hemos preparado la misma página, pero con declaraciones de estilos
distintas, para que comprobéis las diferencias en la forma del documento
con sólo unos cambios en sus estilos. Puedes verla pinchando aquí.
Estilo definido para todo un sitio web
Una de las características más potentes de la programación con hojas de
estilos consiste en que, de una vez, podemos definir los estilos de todo
un sitio web. Esto se consigue creando un archivo donde tan sólo
colocamos las declaraciones de estilos de la página y enlazando todas
las páginas del sitio con ese archivo. De este modo, todas las páginas
comparten una misma declaración de estilos y, por tanto, si la
cambiamos, cambiarán todas las páginas. Con las ventajas añadidas de que
se ahorra en líneas de código HTML (lo que reduce el peso del
documento) y se evita la molestia de definir una y otra vez los estilos
con el HTML, tal como se comentó anteriormente.
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.
Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1
{
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD
{
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY
{
background-color : #006600;
font-family : arial;
color : White;
}
background-color : #006600;
font-family : arial;
color : White;
}
2- Enlazamos la página web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK> con los atributos
Para ello, vamos a colocar la etiqueta <LINK> con los atributos
- rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
- type="text/css" porque ela archivo es de texto, en sintaxis CSS
- href="estilos.css" indica el nombre del fichero fuente de los estilos
Veamos una página web entera que enlaza con la declaración de estilos anterior:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>
</html>
Reglas de importancia en los estilos
Los estilos se heredan de una etiqueta a otra, como se indicó
anteriormente. Por ejemplo, si tenemos declarado en el <BODY> unos
estilos, por lo general, estas declaraciones también afectatarán a
etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo,
dentro de todo el cuerpo.
En muchas ocasiones más de una declaración de estilos afecta a la misma
porción de la página. Siempre se tiene en cuenta la declaración más
particular. Pero las declaraciones de estilos se pueden realizar de
múltiples modos y con varias etiquetas, también entre estos modos hay
una jerarquía de importancia para resolver conflictos entre varias
declaracionesde estilos distintas para una misma porción de página. Se
puede ver a continuación esta jerarquía, primero ponemos las formas de
declaración más generales, y por tanto menos respetadas en caso de
conflicto:
- Declaración de estilos con fichero externo. (Para todo un sitio web)
- Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)
- Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
- Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)
Ya vimos cómo incluir estilos en la página, de todas las maneras
posibles e hicimos un repaso con la lista anterior. Ahora estás en
condiciones de empezar a usar las hojas de estilo en cascada para
mejorar tus páginas y aumentar la productividad de tu trabajo.
No hay comentarios:
Publicar un comentario