CSS - enlaces

Modificar el formato de los enlaces

Profesores:JAB y Ester Torres
Modificar la visualización de los enlaces
Lo primero que haremos con CSS es:
Para entender el código hay que comprender perfectamente la estructura que tenemos:
  • Existen 3 elementos, cada uno de ellos es un <li>.
  • Los 3 <li> están dentro de un <ul>.
  • Y el <ul> está dentro de una caja de tipo <nav>.

estilos.css
nav li{
   list-style:none;
   display:inline-block;
   padding:4px 70px;
   text-align:center;
   background-color:gray;
}
Pero para eliminar la sangría (o espacio vacío) que por defecto deja cualquier lista a su izquierda, tenemos que modificar el padding de la propia lista <ul> (no de cada uno de los <li>).
estilos.css
ul{
   padding:0;
}

El selector 'nav li{' es el que indica que las propiedades que le siguen sólo afectarán a los <li> que estén dentro de cualquier <nav>.
list-style:none; elimina las viñetas (circulos negros) de cada uno de los tres <li>.
display:inline-block; lo que hace es poner todos los elementos <li> en la misma línea (inline) pero al mismo tiempo los mantiene como bloques (cajas).
padding:4px 70px; sirve para dejar un espacio vacío dentro de la caja de cada <li> de 4 píxeles por arriba y abajo y 70 por la derecha e izquierda.
text-align:center; centra horizontalmente el texto del enlace.
background-color:gray; Provisionalmente colocamos un fondo gris, únicamente para poder visualizar el área de cada uno de los tres <li>.



Cambiar el color y el subrayado de los enlaces
Los enlaces por defecto son azules y están subrayados. Vamos a hacer que tengan otro color y que no estén subrayados.

Como es una característica que tiene que afectar a todos los ficheros html que iremos creando, este selector CSS lo vamos a crear en estilos.css.

estilos.css
 a{
   text-decoration:none;
   color:orange;
   font-size:20px;
  }

a{ es el selector CSS que indica a QUÉ ELEMENTOS van a afectar las propiedades que siguen. Así, en este caso a apunta a todos los enlaces que contenga la página.
text-decoration:none; es una propiedad CSS que elimina el subrayado de los enlaces y que por lo tanto únicamente funciona cuando va dentro de un selector a{.
color:orange; es una propiedad CSS que cambia el color de los enlaces, en este caso a naranja.
font-size:20px; es una propiedad CSS que cambia el tamaño de la fuente de los enlaces, en este caso a un tamaño de 20 píxeles.


 (Haz clic y después pasa con el cursor por encima de los enlaces).

Cambiar el color de los enlaces al pasar el cursor por encima
estilos.css
 a:hover{
   color:white;
  }

a:hover{ es el selector CSS que indica a qué elementos van a afectar las propiedades que siguen, pero SÓLO cuando el cursor del ratón pase por encima de un enlace (:hover).
En este caso, cuando el cursor pase por encima de un enlace, éste se coloreará de blanco.

(Haz clic y después pasa con el cursor por encima de los enlaces).


Modificar el primer 'enlace'
En realidad el primer <li> no es un enlace (ya que no está encerrado entre <a href..> y </a>) y por lo tanto no le afectan las propiedades del selector a{.
Por ello el texto sigue teniendo el color negro habitual y un tamaño más pequeño.

Vamos a poner el primer elemento de color gris/plata y del mismo tamaño que los otros dos enlaces.

estilos.css
 nav{
   color:silver;
   font-size:20px;
 }

El selector 'nav{' afecta al texto que contenga la caja <nav>. En este caso, el único texto que hay es '¿Quiénes somos?, ya que 'Servicios' y 'Contacto' son enlaces (no textos).


(Sitúa el cursor encima de '¿Quiénes somos?' para ver qué tipo de cursor muestra).

Modificar el cursor del 'enlace no activo'
Cuando el usuario pasa con el cursor sobre '¿Quiénes somos?', como NO es un enlace, el cursor se transforma en el de 'seleccionar texto'.
Vamos a cambiar este cursor por el habitual; el de la flecha blanca.
estilos.css
 nav:hover{
   cursor:default;
 }

nav:hover{ afecta al contenido de la caja <nav>, mientras que <:hover> indica qué únicamente se aplicará el CSS cuando el cursor se sitúe encima.
cursor:default; cambia el tipo de cursor por el habitual.


(Sitúa el cursor encima de '¿Quiénes somos?' para ver qué tipo de cursor muestra).