Vamos a ver una serie de técnicas con hojas de estilo y diversos trucos imprescindibles para utilizar CSS con toda su potencia... y facilidad.
Las hojas de estilos son un tema largo del que se han escrito libros enteros.
Hasta este punto del Manual de CSS nos hemos dedicado a los temas más básicos. De momento vamos a hacer una parada en este artículo para explicar unas cuantas cosas interesantes que nos resultarán especialmente prácticas.
Además, para completar tus primeros conocimientos sobre CSS, te recomendamos ver el vídeo sobre los selectores de CSS, que comenta algunas de las cosas de este capítulo y muchas otras que debes saber para manejar correctamente este lenguaje de estilo.
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 preciso momento en que se pincha sobre ellos)
A:active {atributos}
Enlaces hover (Cuando el ratón está encima de ellos)
A:hover {atributos}
El atributo para definir enlaces sin subrayado es text-decoration: none, y para darles color es color: red o color: #99f.
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:
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.
Para ver otros manuales, artículos y enlaces a páginas que enseñan a utilizar las hojas de estilos visitar la sección CSS.
En el siguiente capítulo de este manual pasamos página para contaros uno de los "nuevos elementos" que cobran una especial importancia desde la llegada de CSS, las capas.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...