COLOR DE LOS ENLACES (CSS)
- Se realizó el primer indicador = Habilidad#1
7.1.1. Tamaño, color y decoración
Los estilos más sencillos que se pueden aplicar a los enlaces son los que modifican su tamaño de letra, su color y la decoración del texto del enlace. Utilizando las propiedades
text-decoration y font-weightse pueden conseguir estilos como los que se muestran en la siguiente imagen:
Figura 7.1 Ejemplo de enlaces con estilos diferentes
A continuación se muestran las reglas CSS del ejemplo anterior:
a { margin: 1em 0; display: block;}
.alternativo {color: #CC0000;}
.simple {text-decoration: none;}
.importante {font-weight: bold; font-size: 1.3em;}
.raro {text-decoration:overline;}
<a href="#">Enlace con el estilo por defecto</a>
<a class="alternativo" href="#">Enlace de color rojo</a>
<a class="simple" href="#">Enlace sin subrayado</a>
<a class="importante" href="#">Enlace muy importante</a>
<a class="raro" href="#">Enlace con un estilo raro</a>
EJERCICIO DE CLASE:
En archivo index.html:
<html>
<head><title>links</title></head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<body>
<br>
<a href="https://www.google.com" target="_blank" class="verde">ir a la pagina google</a>
<br>
<a href="https://www.google.com" target="_blank" class="azul"> ir a la pagina google</a>
<br>
<a href="https://www.google.com" target="_blank" class="rojo">ir a la pagina google</a>
<br>
<br>
<br>
bucaramanga<span class="teclado">ciudad</span>bonita
</body>
</html>
En archivo estilo.css:
a.verde {
color:#00ff00;
font-size:10px;
}
a.azul {
color: #0000ff;
font-size:10px;
}
a.rojo {
color:#ff0000;
font-size:10px;
}
.teclado{
color:#ff0000;
font-size:16px;
}
Comentarios
Publicar un comentario