Curso CSS Módulo 4

 

Módulo 4: Enlaces, botones y navegación en CSS

En este módulo aprenderás a dar estilo a los enlaces y botones de tu página web, así como a crear menús de navegación básicos. Los enlaces y botones son elementos esenciales para la interacción del usuario, y con CSS podrás hacerlos más atractivos y funcionales.

---

🔗 Estilizando enlaces

Por defecto, los enlaces en HTML aparecen en azul y subrayados. Con CSS puedes cambiar:

• ✔️ El color del enlace.
• ✔️ El subrayado (quitarlo o personalizarlo).
• ✔️ El estilo cuando el enlace está en diferentes estados (hover, visited, active).

a { color: #007BFF; /* Color normal */ text-decoration: none; /* Sin subrayado */ } a:hover { color: red; /* Al pasar el mouse */ text-decoration: underline; } a:visited { color: purple; /* Enlaces ya visitados */ }

👉 Con esto, el enlace cambia de color al pasar el mouse y muestra una experiencia visual más profesional.

---

🎛️ Creando botones con CSS

Los botones pueden ser creados con la etiqueta <button> o con enlaces <a> estilizados. CSS permite que parezcan “clicables” y modernos.

button { background-color: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #218838; }

✅ Ahora el botón tiene color verde, esquinas redondeadas y cambia de tono al pasar el mouse.

---

📜 Menús de navegación básicos

Un menú de navegación guía a los usuarios por tu sitio web. Generalmente se hace con una lista <ul> y enlaces <a>.

nav ul { list-style-type: none; background-color: #333; padding: 0; margin: 0; display: flex; } nav ul li { margin: 0; } nav ul li a { color: white; padding: 14px 20px; display: block; text-decoration: none; } nav ul li a:hover { background-color: #111; }

✅ Este código crea un menú horizontal con fondo oscuro y enlaces que cambian de color al pasar el mouse.

---

📥 Preguntas de repaso

Pregunta 1

¿Qué pseudo-clase se usa para cambiar el estilo de un enlace cuando el usuario pasa el mouse?

• A) active
• B) hover
• C) visited
• D) focus

✅ Respuesta correcta: B) hover

---

Pregunta 2

¿Cuál propiedad CSS elimina el subrayado de los enlaces?

• A) text-decoration
• B) underline: none
• C) no-underline
• D) font-style

✅ Respuesta correcta: A) text-decoration

---

Pregunta 3

¿Qué elemento HTML suele usarse para construir un menú de navegación?

• A) <table>
• B) <ul>
• C) <form>
• D) <h1>

✅ Respuesta correcta: B) <ul>

---

Este módulo forma parte del curso básico de CSS. En el próximo módulo veremos cómo dar estilo a tablas para que se vean más limpias, modernas y fáciles de leer.