DesarrolloWeb.com > Manuales > Manual de CSS, hojas de estilo

Trucos avanzados con CSS

01 de enero de 2001

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (15)

Vamos a ver una serie de técnicas con hojas de estilo, imprescindibles para utilizar esta tecnología con toda su potencia.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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:

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 () 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.

Enviar un comentario a este artículo

Ver comentarios del artículo (15)

Compartir en redes sociales

Comparte este manual en tus redes sociales

MANUAL: Manual de CSS, hojas de estilo

Pseudo-element en CSS (pseudo elementos)

Qué son las capas

Comentarios

Enviar un comentario al artículo

Fueron enviados 15 comentarios al artículo

2 comentarios no revisados

13 comentarios revisados:

Por: Domingo Peña

02/4/2004

Les envio este efecto rollover muy configurable realizado con css.


<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>


muy bueno.

Por: 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">    <p>  <b>
<font color="#FF0000"><div align="center"><a href="http://ww.google.com/">
<font size="4"> 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/"> <font size="4">Teatro</font></a></font></b></td>
</tr>
</table>
</div>
</span>

</div>

</div>

</div>

</div>

</div>

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

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

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

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

Por: 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

Por: 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

Por: Fix

21/12/2006

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

Por: 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

Navegadores
Por: José Hernández Lugo

16/5/2009

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

ssje

PROBLEMAS CON EL ANCHO(WIDTH) CON LA ETIQUE EN OTROS BUSCADORES

25/11/2009

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>

Cotelan...

Links

20/11/2011

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?

Ver otros 2 comentarios pendientes de revisar

Enviar un comentario al artículo