1. Introducción
HTML nos permite utilizar hojas de estilos definidas fuera del propio documento para facilitar el mantenimiento de la nuestra Web, así podemos centralizar los estilos que se aplicarán a todos los documentos HTML de nuestra Web.
2. Selectores avanzados
Además de los métodos clásicos de definir reglas basándose en clases e identificadores, hay otros métodos más avanzados que se aplican a diferentes grupos de etiquetas.
2.1. Selector universal
El signo * se emplea para definir a todo el conjunto de etiquetas de una página web. Nos sirve para indicar "esto se aplica a cualquier etiqueta". Por ejemplo:
* {font-family:san-serif; }
Hace que cualquier etiqueta de la página tome ese tipo de letra.
2.2. Agrupación de selectores
También podemos emplear la coma para agrupar varias etiquetas, clases e identificadores. Un par de ejemplos:
p, h1, h2 {font-family: times, word-spacing: 2px;}
img, #portada, hr, .fotografia {margin: 6px;}
Tanto a la etiqueta <p> como <h1> y a <h2> se les aplicaría el estilo definido en el primer ejemplo.
2.3. Sucesores y antecesores
Todavía obtenemos mayor control, gracias a las opciones que nos ofrece CSS para aplicar estilos, si un elemento desciende de otro o es el padre de uno. No entraremos en demasiados detalles, pero observemos la siguiente regla:
h2 strong {font-style: italic; }
Esa línea haría que se mostrase en cursiva el contenido etiquetado dentro de <strong>, pero si y sólo si esta etiqueta se encuentra dentro de una cabecera <h2>. No es necesario que lo sea directamente; puede haber otras etiquetas conteniendo la de <strong>.
Por ejemplo:
<h1>Esta línea no se vería <strong>afectada</strong></h1>
<h2>Esta línea <strong>sí</strong> se vería <strong>afectada</strong></h2>
Quedaría como sigue:
El espacio, por tanto, indica que la aplicación se hará dependiendo de si un elemento está dentro de otro.
Además hay otros operadores que definen el tipo de relación, como el *, el signo de > (que indica que un elemento desciende directamente de otro), ...
2.4. Pseudoclases
Contamos con un último tipo de selectores denominado pseudoclases que permiten definir propiedades para algunos elementos html que cuentan con diferentes estados. El más conocido es el caso de la etiqueta <a>, empleada para definir enlaces. Esta etiqueta puede tener varios estados. Estos son los principales:
- a:link: el estado normal de un enlace no visitado.
- a:visited: el estado de un enlace, una vez que ha sido visitado.
- a:active: cuando se está pulsando sobre el elemento.
- a:hover: cuando el ratón está sobre el elemento.
- a:focus: cuando el elemento tiene el foco del navegador. Es el que está preseleccionado.
Pues bien, si definimos algunos de esos estados, conseguiremos, por ejemplo, que un enlace cambie su apariencia al pasar el ratón sobre él (a:hover) o que cambie de color cuando ha sido visitado (a:visited). Podríamos hacerlo así:
a:link {font-family: sans-serif; }
a:hover {color:red; }
a:visited {color:gray; }
Así cuando hayamos visitado un enlace este aparecerá en color gris.
Aún hay muchas más pseudoclases, centradas en aspectos posicionales, dependientes de si un elemento es el primero de su tipo (:first-of-type, :last-of-type), si es el único descendiente (:only-child), si está vacío (:empty), etc. Incluso tenemos una pseudoclase para no aplicar estilo a un elemento concreto (:not), pero de nuevo su uso es poco frecuente.
Veamos un ejemplo de uso con la lista siguiente:
<ul>
<li>Nombre y cantidad</li>
<li>Pepe. 5 </li>
<li>María. 8 </li>
<li>Manuel. 3</li>
<li>Total. 16</li>
</ul>
Le aplicaremos los estilos siguientes:
li:first-child {font-size:22px; color:#333399; list-style-type: none }
li:last-of-type {font-size:16px; color:#333399 ; font-weight:bolder; }
En este caso no había diferencia entre emplear child o of-type. El resultado que obtenemos es el siguiente:
3. Añadir estilos exteriores
Aún hay un método más para aplicar estilos, consistente en almacenar los estilos fuera de la página web. Pensemos en un sitio web con 20 páginas a las que le vamos a dar una apariencia común. Para usar los estilos en la cabecera de la página, tendríamos que copiar el conjunto de reglas y pegarlo en cada una de las páginas. Sería viable, pero cada vez que fuésemos a modificar algún detalle de los estilos, tendríamos que abrir las 20 páginas y aplicar los cambios. Esto es poco racional.
Para trabajar cómodamente con estilos en sitios grandes, el método ideal se basa en crear un archivo con extensión .css, dentro del que meteremos todos los estilos de nuestro sitio web.
En concreto, un archivo de estilos tendría una apariencia similar a la imagen de la derecha.
4. Enlazar un archivo .css
Para que el archivo con los estilos tenga efecto en la página, debemos indicar en la cabecera del archivo .html que se va a tomar ese estilo, mediante la etiqueta <link>, así:
<link rel="stylesheet" href="misestilos.css" type="text/css" media="all">
Cada parámetro tiene su propio significado:
- rel: indica la relación entre el documento y el archivo que se carga; en este caso será su hoja de estilos.
- href: como en los enlaces normales, indica la URL del archivo. Al encontrarse en la misma carpeta, sólo indicaremos el nombre; pero si estuviese en otro lugar o incluso en otro servidor, crearíamos las rutas siguiendo las normas de los enlaces.
- type: indica el tipo de información. Tanto este valor como el de rel, serán siempre iguales. media: especifica a qué medio se aplicará la hoja de estilo. En este caso se aplica a todos los medios, pero podríamos tener hojas de estilo diferentes para impresión (print), móviles (handheld), televisiones (tv), etc.
Por tanto, esa línea será la que repetiremos a través de nuestras diferentes páginas, para que tomen la apariencia deseada.
5. Múltiples hojas de estilo
Un detalle a tener en cuenta es que una misma página web puede emplear varias hojas de estilo diferentes. De hecho es una práctica muy frecuente para separar, por ejemplo, los aspectos relativos a maquetación de los puramente gráficos.
Cuando llegue el momento de preparar la página web, el navegador juntará todos los estilos y los ordenará, para aplicarlos correctamente.
6. Prioridad de los estilos
Al crear estilos en diferentes lugares, nos surge una duda, ¿qué sucede si definimos un estilo para un párrafo en una página externa, en la propia cabecera de la página y como un estilo interno mediante <style>? ¿Cuál se aplicará?
Las hojas de estilo se denominan "en cascada" precisamente por la forma que tienen de definir su prioridad. Cuando un mismo estilo está definido en varios lugares, se sigue un orden de preferencia muy claro:
- Primero se aplican los estilos de las hojas externas.
- Si en la cabecera de la página se repite alguna propiedad de un estilo, se aplica el de la cabecera, obviando la misma propiedad que estuviese definida en la hoja externa.
- Si en un elemento concreto se ha definido una propiedad específica, se aplica esta última, saltándose las anteriores.
Es decir, se va de mayor a menor, aplicando cada propiedad. Insistimos en lo de la propiedad, ya que podemos encontrarnos con que en la hoja exterior se define el tipo de letra de los párrafos y en el documento interior se define el tamaño. En ese caso se aplicarían las dos propiedades, ya que no hay colisión entre ellas.
El uso del modificador !important en una determinada regla hace que ésta se salte la cadena de prioridades y que se aplique de forma prioritaria. Se emplea así:
p {margin: 6px !important; }
Su uso se suele hacer más en la fase de diseño de la página web que una vez terminada, ya que pocas veces se justifica el saltarse el orden predefinido de los estilos. |
