Trucos avanzados con CSS

  • Por
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.

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&oacute;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&aacute;rrafo con estilo de letras verdes</p>
<p class=fondonegroletrasblancas>
Esto es un p&aacute;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&oacute;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.

Nota: 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 a fondo.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Domingo Peña

02/4/2004
Les envio este efecto rollover muy configurable realizado con css.

<!--Realizado por Domingo Peña-->
<head>
<style type="text/css">
.imagen{background-image:url('04cwwhr.jpg');
width:477px;height:650px;
background-repeat:no-repeat
;border-color:red;
border-width:5px}

.imagen2{background-image:url('2004_03_17.jpg');
width:500px;height:800px;
background-repeat:no-repeat;border-color:red;
border-width:5px}
</style>
</head>
<body>
<form>
<input type="button" class="imagen" onmouseOver="this.className='imagen2'" style="cursor:hand" onmouseOut="this.className='imagen'">
</body>
</form>
<!--final-->

muy bueno.

Domingo Peña

03/4/2004
Menu desplegable con CSS
es muy configurable.

!Que lo disfruten¡



<head>
<style type="text/css">
.1a{visibility:display}
.2a{visibility:hidden}
</style>
</head>
<div align="left">
<table border="1" style="border-style:dotted;border-width:5px" bgColor="orange" cellpadding="0" onmouseOver="a.className='1a'" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="127" height="28" id="AutoNumber1">
<tr>
<td width="127" height="28"><div align="center">
Menu</td>
</tr>
</table>
</div>
<head>
<style type="text/css">
#ca{position:absolute;top:11%;left:15%}
</style>
</head>
<div id="ca">
<span>
<table border="1" style="border-style:dotted;border-width:5px" bgColor="#00FFFF" ID="a" class="2a" onmouseOut="this.className='2a'" onmouseMove="this.className='1a'" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="127" id="AutoNumber2" height="116">
<tr>
<td width="125" height="116">&nbsp;&nbsp;&nbsp;&nbsp;<p>&nbsp; <b>
<font color="#FF0000"><div align="center"><a href="http://ww.google.com/">
<font size="4">&nbsp;Campo</font></a></p>
</font></b></p>
<p><b><font color="#FF0000"><div align="center">
<a href="http://ww.google.com/"><font size="4">Mesas</font></a></font></b><p></p>
<p><b><font color="#FF0000"><div align="center"><a href="http://ww.google.com/">&nbsp;<font size="4">Teatro</font></a></font></b></td>
</tr>
</table>
</div>
</span>

</div>

</div>

</div>

</div>

</div>



Ignacio

27/9/2004
En el artículo se comenta que el atributo CSS A:hover solo funciona para IE. No he probado con más, pero s%E?ä‡0e también funciona con Mozilla.
Espero ayudar en algo.

Salaaadef

24/12/2004
Me gustaria saber como podria hacer para que cuando alguin pase por encima de lso enlaces de mi web eston cmabien d ecolor, peor o de tamaño.

Manuel Santana

16/2/2006
Alguien me ayudes por favor. He entendido un poco pero no entiendo como aplicar el texto que deceo alos resultado obtenido con css. alguien me puede ayudar por favor gracias.

carlos

16/7/2006
excelente artículo, muy práctico ya que tiene varios ejemplos que hacen más fácil la experiencia de conocer lo que son las CSS.......gracias.

alex

18/8/2006
el efecto hover solo funciona en IE para etiquetas a, en mozilla firefox, el efecto hover funciona para todas las etiquetas

coca

10/11/2006
hola, quiero saber si se pueden agregar 2 hojas de estilos con difentes colores de vinculos para dos tablas diferentes pero en la misma pagina

Fix

21/12/2006
Es posible CSS realizar varios enlaces con atributos diferentes en la misma pagina, como?

Arturo

12/7/2007
Corrijan el codigo ya que podrian confundirse los que estan aprendiendo, el primero es con minusculas (link normal) y el segundo con mayusculas

<a href="http://dominioinexistente.nofunciona.com">Enlace normal</a>
<br>

<br>
<A href="enlaces.html">Enlace visitado</a>


saludos

José Hernández Lugo

16/5/2009
Navegadores
Me gustaria que hablaran de otros navegadores, tengo Firefox y quiero saber si tiene limitaciones con las hojas de estilo CSS.

Marcelo Pontarelli

03/11/2009
a:hover funciona tambien en firefox, opera y safari
a:hover funciona en los browsers nombrados aparte de IE


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a:hover en Firefox, Opera y Safari</title>

<style type="text/css">
.menu a {
display:inline-block; width:140px; color:#00FF00; background-color:#444444; text-align:center; text-decoration:none; outline:none; float:left;
font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:22px; font-weight:bold; }
.menu a:hover {
background-color:#0000FF; color:#FFFF00; text-decoration:none; outline:none }
</style>

</head>

<body>
<div class="menu">
<a>si que funciona</a>
</div>

</body>
</html>

ssje

25/11/2009
PROBLEMAS CON EL ANCHO(WIDTH) CON LA ETIQUE EN OTROS BUSCADORES
EN IE EL ANCHO ME FUNCIONA CORECTAMENTE, PERO EN FIREFOX,OPERA Y OTROS.....EL TAMA;O ASIGNADO NO LO TOMA EN CUENTA......... EL SIGUIENTE CODIGO ES UN PEQUE;O EJEMPLO DE LO QUIERO Q ME RESPONDAN, EN REALIDA LO Q QUIERO ES Q LAS IMAGENES SE ADAPTE AL TAMA;O ASIGNADO.......

.....ESPERO SU AYUDA GRACIA POR SU TIEMPO......

<html>
<head>
<title>CREANDO MENU DE STYLE</title>
<style type="text/css">
A:link{text-decoration:none;color:blue;background-image:url(inferior.gif)}
A:active{text-decoration:none;color:magenta;background-image:url(inferior.gif)}
A:visited{text-decoration:none;color:orange;}
A:hover{text-decoration:none;color:white;background-image:url(superior.gif)}


/-- BUENO ESTA PARTE AQUI ES Q NO SE ADAPTA A OTRO BUSCADORE OSEA LAS IMAGES--/
a{
width:100px;height:23px;text-align:center;
}
</style>
</head>
<body>
<a href="http://wwww.google.com.do"> Mi Web </a>
</body>
</html>

Henrry

14/12/2009
Problema con los enlaces
Hola, tengo un problema con mis enlaces, hice como esta en el manual y la cuestion es que asigna los valores a todos los enlaces de mi sistema, y yo en realidad no quiero eso, por ejemplo al especificar un color cuando esta normal no se ve bien algunos enlaces porque tienen fondo oscuro y otros fondo claros, y quisiera configurar diferentes enlaces de diferentes formas, como puedo hacer eso.

Cotelandia

20/11/2011
Links
He visto que los links visitados de la forma que lo muestran ustedes ya no funciona para firefox (versión 8.0), para opera, chrome y ie (últimas versiones a la fecha) si funciona. Hay otra forma para que mozilla lo acepte?