• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Crear apariencias dinámicas

Log in or subscribe for free to enjoy all this course has to offer!

Este es uno de sus puntos fuertes: CSS también nos permite combinar la apariencia de los elementos dinámicamente, en todas palabras, los elementos pueden cambiar la forma una vez que la página se ha cargado. Vamos a usar una característica poderosa del CSS: los seudoformatos.

En este capítulo vamos a ver cómo cambiar la apariencia:

  • al desplazarse;

  • al hacer clic;

  • al centrarse (elemento seleccionado);

  • cuando se ha visitado un enlace;

¡Verás que CSS todavía tiene muchas sorpresas!

Al desplazarse

En este capítulo vamos a descubrir varios seudoformatos CSS. Lo primero que te voy a mostrar se llama :hover. Como todos los otros seudoformatos que vamos a ver, se trata de información añadida después del nombre de etiqueta (o clase) en el CSS, así:

a:hover
{
   
}

:hover puede interpretarse como: «Cuando el ratón se coloca encima del enlace» (cuando señalas hacia él).

Depende de ti definir la apariencia que el enlace tiene cuando haces clic sobre él. Dale rienda suelta a tu imaginación, no hay límite.

Aquí tienes un ejemplo de presentación de enlace, pero siéntete libre de inventar la tuya propia:

a /* Enlaces por defecto (cuando no se pasa por encima) */
{
   text-decoration: none;
   color: red;
   font-style: italic;
}

a:hover /* Apariencia de los enlaces cuando se pasa por encima */
{
   text-decoration: underline;
   color: green;
}

Hemos definido dos versiones de estilos para los enlaces:

  • para enlaces por defecto (cuando no se pasa por encima)

  • para enlaces cuando se pasa por encima.

El resultado se muestra en la figura siguiente.

Cambia la apariencia cuando se pasa por encima el ratón
Cambia la apariencia cuando se pasa por encima el ratón

Bonito, ¿no?

Aunque normalmente se usa en enlaces, puedes cambiar la apariencia de cualquier elemento. Por ejemplo, puedes cambiar la apariencia de párrafos cuando pasas por encima:

p:hover /* Cuando señalas un párrafo */
{

}

Al hacer clic y seleccionar

Puedes interactuar más en CSS. ¡Vamos a ver que podemos cambiar la apariencia de los elementos cuando hacemos clic sobre ellos o cuando los seleccionamos!

:active: cuando se hizo clic

El seudoformato :active te permite aplicar un estilo particular cuando haces clic. En la práctica, sólo se usa en enlaces.

El enlace no mantendrá esta apariencia durante mucho tiempo: de hecho, el cambio se produce cuando se pulsa la tecla del ratón. Claramente, esto no siempre será visible.

Puedes, por ejemplo, cambiar el color del fondo del enlace cuando lo has pulsado.

a:active /* Cuando el visitante hace clic en el enlace */
{
    background-color: #FFCC66;
}

:focus: cuando se selecciona un elemento

En este caso, es un poco diferente. El seudoformato :focus aplica un estilocuando se selecciona un elemento.

¿En otras palabras?

Una vez pulsado, el enlace permanece «seleccionado» (tiene un pequeño borde de puntos alrededor). Esa es la selección.

Intentémoslo en enlaces:

a:focus /* Cuando el visitante selecciona el enlace */
{
    background-color: #FFCC66;
}

Cuando el enlace ya se ha visitado

Puedes aplicar un estilo a un enlace a una página que ya se ha visitado. Por defecto el navegador cambia el color del enlace a un púrpura bastante feo (en mi opinión, al menos).

Puedes cambiar esta apariencias con :visited. En la práctica, para os enlaces visitados, no puedes cambiar mucho aparte del color (siguiente figura).

a:visited /* Cuando el visitante ya ha visto la página correspondiente */
{
    color: #AAA; /* Aplicar un color gris */
}

Enlaces visitados en gris
Enlaces visitados en gris

Si no quieres que los enlaces ya visitados tengan otro color, tienes que aplicarles el mismo color que a los enlaces normales. Muchas páginas web hacen esto. Una excepción importante: Google... que es bastante manejable, como puedes ver en los resultados de búsqueda si has o no visitado las páginas web encontradas por Google.

En resumen

  • En CSS, puedes cambiar la apariencia de algunas secciones dinámicamente, después de que la página se cargue, cuando suceden algunos eventos. Con este fin, se usan los seudoformatos.

  • El seudoformato :hover se usa para cambiar la apariencia al pasar el ratón por encima (por ejemplo: a:hover para cambiar la apariencia de los enlaces cuando el ratón pasa por encima).

  • El seudoformato :active cambia la apariencia de los enlaces cuando haces clic en ellos, :visited cuando un enlace ya ha sido visitado.

  • El seudoformato :focus se usa para cambiar la apariencia de un elemento seleccionado.

Example of certificate of achievement
Example of certificate of achievement