| 2002 a 2006 |
Ángel
R. Puente Pérez |
 |
 |
18.3.- Estilos para un sitio entero. Hoja de estilos externa.
Si queremos definir de golpe los estilos para todos los documentos de un sitio, debemos hacerlo desde un documento externo:
Abrimos el bloc de notas y, en él, escribimos el código:
body { margin-left: 50px; margin-top: 20px; margin-right: 40px;
font-weight: bold; color: #996600; }
div { background: url(../imag/claro1.gif)} |
Lo guardamos con el nombre que queramos pero con la extensión .css , por ejemplo, estilo.css
Ahora habrá que hacer una llamada desde cada uno de los documentos que queramos vincular con esa hoja de estilos. La llamada se hace dentro de <head> con la siguiente sintaxis:
<link href="estilo.css" rel="stylesheet" type="text/css"> |
Como puede deducirse, nuestro documento .css está en la misma carpeta que el resto de los documentos del sitio. Si no es así, habría que indicar la ruta completa dentro de las comillas de href. Por ejemplo: href="carpeta2/estilo.css"
Los tres niveles de concreción pueden usarse simultáneamente en los documentos de un sitio. Para que no haya problemas de entendimiento entre los tres, existen unas reglas:
- Prevalecen las definiciones de estilo de la etiqueta puntual.
- En segundo lugar la definición de estilo del documento.
- En tercer lugar la hoja de estilos.
18.3.1.- Nombrar a los estilos definidos en la hoja.
Podemos, en la hoja de estilos, hacer declaraciones de estilo no referidas a una etiqueta concreta sino a un conjunto de parámetros que pueden afectar a más de una etiqueta. Y nombrar a ese estilo con una palabra relacionada con la implementación que queremos hacer. Por ejemplo, este sitio está vinculado con una hoja de estilos en los que, siempre que aparece una etiqueta en el texto explicativo, está de color azul. El estilo, dentro de la hoja, se ha denominado .etiquetas (con el punto por delante) y su declaración se ha hecho de forma similar a la declaración de las etiquetas. Veamos la hoja de estilos que se está empleando en este sito:
.palabras_clave { color: #CC0000} |
Se guarda con el nombre que se desee: hoja.css y, ahora, cada vez que queremos utilizar uno de estos estilos, además de hacer la declaración de vinculación en la cabecera, tendremos que emplear una etiqueta span con la siguiente sintaxis:
<span class="nombre_del_estilo">texto afectado</span> |
Veamos un ejemplo:
Esto es una <etiqueta>. Esto estilo.css es el nombre de un archivo. Esto es una palabra clave y esto es un título.
|
|
| 2002 a 2006 |
Ángel
R. Puente Pérez |
