Menu
Coddy logo textTech
EMPEZAR A APRENDER
flag Es iconEspañoldown icon

Resaltar menú activo

Parte de la sección CSS Mastery del Journey de HTML de Coddy. Lección 39 de 43.

challenge icon

Desafío

Fácil

Se proporciona un menú de navegación sencillo con cuatro enlaces. Tu tarea es hacerlo más interactivo utilizando pseudoclases.

Escribe CSS para:

  1. Cambiar el color de fondo de un enlace cuando un usuario pase el cursor sobre él a rgba(50, 168, 82, 1).
  2. Cambiar el color del texto a white cuando se esté haciendo clic activamente en el enlace.

Pruébalo tú mismo

<html>
<head>
  <title>Highlight Active Menu</title>
  <style> 
    nav a {
      padding: 10px;
      text-decoration: none;
      color: black;
    }
    /* Add your styles here */

  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#" class="active">Blog</a>
    <a href="#">Contact</a>
  </nav>
</body>
</html>

Todas las lecciones de CSS Mastery

1Dominio de selectores – Combinación

IntroducciónSelector de descendienteSelector de hijoSelector de hermano adyacenteSelector de hermano generalDesafío de repaso

4Proyecto de menú desplegable

Añadir el submenúMostrar el submenúMás estilosInput y botón

7Construye con CSS Grid

Conceptos básicos de GridPosicionamiento de elementos en Grid-rowÁreas con nombreDesafío de repaso

2Pseudoclases interactivas

PseudoclasesEfectos de hoverEfectos de focusEstilos de estado activoDesafío de repaso

5Efectos visuales

DegradadosFiltros CSSTransformacionesTransiciones y efectos hoverDesafío de repaso

8Sitio web de Flavor Fiesta

Configuración del gridEncabezadoLa parte principalPie de página

3Pseudoclases estructurales

Pseudoclases estructuralesSeleccionando el primer hijoSeleccionando el último hijoEl poder de los patrones: Usando nth-childDesafío de repaso

6Landing Page

Dar estilo a la sección del encabezadoDar estilo al botónDiseño de la secciónDiseño de tarjetasAñadir los toques finales

9Desafíos finales

Resaltar menú activoFilas de tabla tipo cebraEfecto hover en botonesDiseño de tarjetas en GridImagen Hero desenfocada

Practica por tu cuenta: Playground de Web