| |
Las hojas de estilos son un tema largo del que
se han escrito libros enteros. Nosotros nos centramos
en los temas prácticos y por ello vamos a
acabar ya con este capítulo, en unos cuantos
puntos
Definir estilos utilizando clases
Las clases nos sirven para crear definiciones
de estilos que se pueden utilizar repetidas veces.
Una clase se puede definir entre las etiquetas
<STYLE> (en la cabecera del documento), o
en un archivo externo a la página. Para definirlas
utilizamos la siguiente sintaxis, un punto seguido
del nombre de la clase y entre llaves los atributos
de estilos deseados. De esta manera:
.nombredelaclase {atributo: valor;atributo2:valor2;
...}
Una vez tenemos una clase, podemos utilizarla en
cualquier etiqueta HTML. Para ello utilizaremos
el atributo class, poniéndole como valor
el nombre de la clase, de esta forma:
<ETIQUETA class="nombredelaclase">
Ejemplo de la utilización de clases
<html>
<head>
<title>Ejemplo de la utilización
de clases</title>
<STYLE type="text/css">
.fondonegroletrasblancas {background-color:black;color:white;font-size:12;font-family:arial}
.letrasverdes {color:#009900}
</STYLE>
</head>
<body>
<h1 class=letrasverdes>Titulo
1</h1>
<h1 class=fondonegroletrasblancas>Titulo
2</h1>
<p class=letrasverdes>
Esto es un párrafo con
estilo de letras verdes</p>
<p class=fondonegroletrasblancas>
Esto es un párrafo con
estilo de fondo negro y las letras
blancas. Es todo!</p>
</body>
</html>
|
|
Estilo en los enlaces
Una técnica muy habitual, que se puede
realizar utilizando las hojas de estilo en cascada
y no se podía en HTML, es la definición
de estilos en los enlaces, quitandoles el subrayado
o hacer enlaces en la misma página con distintos
colores.
Para aplicar estilo a los enlaces debemos definirlos
para los distintos tipos de enlaces que existen
(visitados, activos...). Utilizaremos la siguiente
sintaxis, en la declaración de estilos global
de la página (<STYLE>) o del sitio
(Definición en un archivo externo):
Enlaces normales
A:link {atributos}
Enlaces visitados
A:visited {atributos}
Enlaces activos (Los enlaces están
activos en el presiso momento en que se pincha sobre
ellos)
A:active {atributos}
Enlaces hover (Cuando el ratón
está encima de ellos, solo funciona en ieplorer)
A:hover {atributos}
El atributo para definir enlaces sin subrayado
es text-decoration:none, y para
darles color es color:tu_color.
También podemos definir el estilo de cada
enlace en la propia etiqueta <A>, con el atributo
style. De esta manera podemos hacer que determinados
enlaces de la página se vean de manera distinta
Ejemplo de estilos en enlaces
<html>
<head>
<title>Ejemplos de estilo en enlaces</title>
<STYLE type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;font-weight:bold}
</STYLE>
</head>
<body>
<a href="http://dominioinexistente.nofunciona.com">Enlace
normal</a>
<br>
<br>
<a href="enlaces.html">Enlace
visitado</a>
Pulsar este enlace para verlo activo,
poner el ratón por encima
para que cambie.
</body>
</html>
|
|
URL como valor de un atributo:
Determinados atributos de estilos, como background-image
necesitan una URL como valor, para indicarlas podemos
definir tanto caminos relativos como absolutos.
Así pues, podemos indicar la URL de la imagen
de fondo de estas dos maneras:
background-image: url(fondo.gif)
En caso de que la imagen esté en el mismo
directorio que la página. background-image:
url(http://www.desarrolloweb.com/images/fondo.gif)
ç
Ocultar estilos en navegadores antiguos
En caso de definir dentro de la etiqueta
<STYLE> unas declaraciones de estilos debemos
asegurarnos que estas no se imprimirán en
la página web con navegadores antiguos. Pensar
en un navegador que no reconozca la etiqueta <STYLE>,
pensará que corresponde con algo que no entiende
y se olvidará de la etiqueta. Lo siguiente
que encuentra es texto normal y hará que
este se vea en la página, como con cualquier
otro texto.
Para evitarlo debemos ocultar con comentarios HTML
(<!-- esto es un comentario -->) todo lo que
hay dentro de la etiqueta <STYLE>. Se puede
ver un ejemplo de esto a continuación:
|
