Vamos a ver una serie de técnicas con hojas de estilo, imprescindibles para utilizar esta tecnología con toda su potencia.
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>
|
Ver el ejemplo anterior
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> |
Ver el ejemplo anterior
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:
De este modo hemos terminado la primera parte del manual de CSS, que espero pueda ayudar a hacer páginas mejores y más rápidamente. Ahora el manual continua explicando
conceptos sobre capas y
maquetación CSS, entre otros asuntos.
Quiero recordaros que siempre es útil ver como han hecho sus páginas otros progradores de Internet. Para ver una página definida enteramente con hojas de estilos podemos visitar
Web Site Album, que está incluso
maquetada con CSS. También podemos visitar la dirección
www.guiarte.com, que está maquetada con tablas, pero todos los estilos se aplican con css.
Para
ver otros manuales, artículos y enlaces a páginas que enseñan a utilizar las hojas de estilos
visitar la
sección correspondiente a CSS de nuestro directorio.
Valoración del artículo:
Usuarios: 
