Enlace activo de CSS
Ejemplo 1
Abra su archivo HTML para crear enlaces. Para el estilo de estos enlaces, crearemos nuestro archivo CSS. Estamos utilizando el estudio de código visual para realizar estos ejemplos. Entonces, creamos el archivo HTML, y el código HTML también se da aquí. Después de completar el código, guárdelo con el ".extensión HTML ”.
En el código HTML anterior, creamos tres enlaces diferentes. El primer enlace que hemos creado es el enlace "Google", el segundo enlace es el enlace "Yahoo" y el último enlace es el enlace "Firefox". También peinaremos estos enlaces en CSS. Este archivo HTML está aquí para simplemente crear estos enlaces. Ahora, muévase al siguiente archivo CSS y vea cómo diseñar estos enlaces.
Código CSS
En la imagen anterior, usamos el selector ": activo", que usamos para dar estilo a ese enlace. Cuando el usuario presiona este enlace, el color de fondo del enlace se vuelve "amarillo". Luego tenemos el selector ": Enlace", que establece el enlace que no se visita y cambia el color del enlace no visitado a "Azul". Aparecerá "azul" en la pantalla. Después de esto, usamos el selector ": visitado", y este selector visitado cambia el color del enlace visitado a "púrpura". Finalmente, tenemos el selector ": Hover" en el que cambiamos el color del enlace a un color "rojo" cuando el cursor se mueve sobre el enlace. Cuando mueve el mouse en estos enlaces, el color de estos enlaces cambia a "rojo". En este ejemplo, cambiamos el color del enlace cuando se desplaza en él y visita el enlace o el color del enlace no visitado.
Producción
Puedes ver tres enlaces en la imagen anterior. Los dos primeros enlaces son el color "púrpura", por lo que significa que se visitan estos dos enlaces. El color del tercer enlace es "azul", lo que significa que este tercer enlace no se visita, ya que establecemos estos colores en el código CSS para los enlaces visitados y no visitados. Cuando pasamos a pasar un enlace, su color se convierte en un color "rojo". Cuando hacemos clic en cualquier enlace, el color del fondo del enlace aparecerá "amarillo". Cuando hacemos clic en el primer enlace de Google, la página de Google aparecerá en la pantalla, como se muestra en la siguiente imagen:
Ejemplo 2
Este es otro ejemplo en el que creamos un enlace entre el párrafo y damos estilos a este enlace en CSS. Veamos cómo el enlace está activo entre los párrafos.
En la imagen anterior, puede ver que hemos creado un párrafo usando HTML y agregamos un enlace entre el párrafo. Usaremos CSS en este ejemplo para cambiar el color del enlace y el párrafo.
Código CSS
En el archivo CSS anterior, puede ver que cambiamos el color del enlace a "azul" dentro de los aparatos ortopédicos de ": enlace", por lo que este enlace aparecerá azul entre los párrafos. Luego, usamos un color "rojo" para el enlace visitado. Para "flotar", seleccionamos el color de fondo como "amarillo". El color "activo" del enlace se establece como "púrpura", y el color del párrafo activo se designa como color "#eee". Entonces, cuando el enlace está activo, cambia el color del enlace, así como el color de fondo del párrafo.
Producción
En esta primera salida, puede ver que el color del enlace en el párrafo parece "azul" como lo establecemos como "azul" en nuestro archivo CSS.
En la segunda salida, el color del enlace se convierte en "rojo", lo que significa que hemos visitado el enlace aquí, por lo que su color cambia de "azul" a "rojo".
Ejemplo 3
En este tercer ejemplo, cambiaremos el tamaño de fuente del enlace, el estilo de fuente y los colores utilizando CSS. Para esto, tenemos que crear diferentes enlaces en HTML.
En el HTML anterior, hemos creado cinco enlaces diferentes utilizando las diferentes clases dentro del "". Damos el nombre de la clase como "Link1", "Link2", "Link3", "Link4" y "Link5". Usamos estos nombres para cambiar el estilo del enlace.
Código CSS
Usamos el nombre "Link1" de la clase y aplicamos el estilo en este primer enlace. El primer enlace aparece "rojo" cuando está "activo". Luego, cambiamos el "tamaño de fuente" del segundo enlace. Cuando pasamos a pasar por este enlace, el tamaño de este enlace aumenta a "150%". Establecemos el "color de fondo" del tercer enlace a "rojo", por lo que el color de fondo se vuelve "rojo" cuando nos desplazamos sobre el tercer enlace. Cambiamos el estilo de fuente del cuarto enlace utilizando la propiedad "Font-Family". Usamos la "decoración de texto" en el quinto enlace y lo establecemos en "subrayar". Se muestra la salida.
Producción
Esta salida cambia su color cuando pasamos el primer enlace. Cuando pasamos el segundo enlace, su tamaño de fuente cambia. Cuando se trata del tercer enlace, su color de fondo cambia. El estilo de fuente cambia a "monoespacial" cuando pasa el cuarto enlace.
Ejemplo 4
En este ejemplo, crearemos dos botones de enlace con enlaces dentro de los botones. En el primer botón, colocamos el enlace de "Gmail". Dentro del segundo botón, colocamos el enlace de "Facebook". Entonces, cuando haga clic en el botón uno, abrirá la página de Gmail. Cuando haga clic en el segundo botón, abrirá la página de Facebook. Ahora, también queremos aplicar el estilo de estos enlaces.
Cuando este enlace está activo, el color de este enlace aparece "rojo" a medida que colocamos el "color: rojo" dentro de los aparatos ortopédicos del selector ": activo". Cuando nos desplazamos sobre este enlace, que está dentro del botón, el color del botón vuelve "rosa" al configurar este color en el archivo CSS. Después de visitar estos enlaces, el color será "azul", y el color del fondo del botón será "blanco".
Producción
La salida anterior muestra dos botones de enlace en los que tenemos dos enlaces diferentes, y puede ver que el color de ambos enlaces es "azul", lo que significa que se visitan ambos enlaces.
Conclusión
Hemos aprendido sobre el "enlace activo" en esta guía. Hemos aplicado un estilo diferente en diferentes enlaces utilizando las propiedades CSS. Hemos realizado cuatro ejemplos aquí, ya que sabemos que el enlace está activo cuando se presiona. Aquí, hemos cambiado el estilo del enlace activo, el tamaño de la fuente del enlace cuando pasamos sobre él y el color después de visitar el enlace. Utilizamos diferentes colores para los enlaces visitados y no visitados en esta guía. Hemos aprendido a diseñar estos enlaces activos en CSS en detalle.