hojas de estilo

Hojas de estilo

Las hojas de estilo son unas definiciones de tipos de letra que se pueden definir en la cabecera del documento (entre los códigos </title> y </head>). Permiten cambiar rápidamente el formato de un documento porque con sólo cambiar la definición del estilo cambiará todo el formato del documento, aunque haya varios estilos distintos entremezclados.

En esta página hemos definido 5 estilos:

a
Se refiere a los enlaces. Hemos formateado los enlaces para que aparezcan en color rojo, como éste.
a:hover
Se refiere al color de un enlace sobre el que colocamos el cursor (sin pinchar en él). Si sitúas el cursor sobre este enlace este enlace verás que se vuelve azul.
a:visited
Se refiere a un enlace que ya has visitado. Este enlace aparece en color morado porque dirige a esta misma página, así que ya la has visitado.
li
Se refiere al texto que aparece en las listas de elementos, como ésta.
td
Se refiere al texto que aparece en las tablas.

Además hemos inventado otros tres estilos: normal, verde y azul. Podemos usar estos estilos personalizados para formatear un párrafo. El código que hay que usar para formatear uno o varios párrafos con un estilo. Los que hemos usado en este documento son:

El código que hemos incluido al principio del documento es:

El último código de la lista de ejemplos no lleva un punto delante: esto hace innecesario usar el código <p_class=...>, y en efecto es como si hubiéramos inventado un código nuevo, igual que usamos para destacar algo en negrita, podemos usar <code> (o cualquier otra palabra) para, en este caso, resaltar parte del texto con un fondo de color naranja pálido, rodeándolo con un borde, como si fuera un botón:
<code>Ejemplo</code>

También podemos modificar un código ya existente: el código en esta página no sólo muestra una letra en negrita, también le cambia el tipo (Comic Sans MS), tamaño (24pt) y color (naranja), como en este ejemplo: naranja

Para ello hemos añadido este código al inicio del documento:

b {font-family: Comic Sans MS; font-size: 35px; color: #FFFF00}

Sin embargo, ésta no es una práctica aconsejable, porque puede llevarnos a cometer errores con frecuencia al escribir nuestras páginas. Es mejor inventarnos un nombre para un código nuevo, como <code>:

Inventar un código nos permite combinar
diferentes formatos dentro de un mismo párrafo.

Nota:
el texto del recuadro anterior se muestra preformateado, es decir, el final de la primera línea es igual que como aparece en el código de la página, no hace falta usar el código , pero tampoco se adaptará al tamaño de la pantalla si se reduce la ventana.

El uso de hojas de estilo permite utilizar el tamaño de letra que queramos, especificado en píxeles (no tenemos ya que limitarnos a usar los 7 tamaños predeterminados con ):

size 1 (10 px)
size 2 (14 px)
size 3 (16 px)
size 4 (18 px)
size 5 (24 px)
size 6 (32 px)
size 7 (48 px)

Tamaño personalizado (30 px)

La única limitación es que no podemos mezclar estilos dentro de un mismo párrafo.

Si queremos formatear varias páginas al mismo tiempo podemos escribir estos códigos en un fichero .css, de modo que al cambiar los códigos en el fichero .css cambie el aspecto de todas las páginas de un sitio web al mismo tiempo. En este caso, en cada página tendremos que incluir solamente estos códigos:

EJEMPLO DE USO EN LAS PÁGINAS WEB:

<html> <head> <title> Ejemplo </title> </head>
<link href="estilo.css" rel="stylesheet" type="text/css"> ---> Éste es el único código inicial que necesitas.
<body background="images/fondo.gif">
...
 Título tipo 1 ---> Estos códigos permiten formatear un párrafo.
 Texto principal de la página ---> Estos códigos permiten formatear uno o varios párrafos.
...

EJEMPLOS DE CÓDIGOS EN EL FICHERO estilo.css:

A {color: #008800}
A:hover {background-color : #000000}

.links{
FONT-FAMILY: Britannic Medium;
FONT-SIZE: 18pt;
FONT-WEIGHT: normal;
color:#000088
}

.titulo1{
FONT-FAMILY: Goudy Handtooled;
width: 500px;
FONT-SIZE: 24pt;
color:#000000;
background-color: #DD9900
}
.titulo2{
FONT-FAMILY: Kauflinn;
FONT-SIZE: 24pt;
color:#000000
}
.texto{
FONT-FAMILY: Arial;
FONT-SIZE: 15pt;
color:#000000;
LIST-STYLE: square
}
.num1{color: #FFFFFF; font-size:18pt} /* Nº de subdivisiones */

.info{
FONT-FAMILY: Village Square;
FONT-SIZE: 18pt;
color: #000000;
}

.index1{font-family: Vivante-dtc; font-size:30pt; color: #FF7700}