Clase 4

Estilos CSS Parte 2.

Interacciones dinámicas.
Código de interacción.
Optimización y accesibilidad.

Sección dos

Instrucciones y Ejercicios:

Convertir todas las unidades en px (pixel) a rem

Guìa comentadas en el archivo estilos.css. Cada "EJERCICIO" numerado pedirá descomentar o añadir cierto código CSS para ver el efecto.

Ejercicio 1: Estilos Base y Reset Mínimo

Abrir index.html en el navegador. Verás una lista con viñetas. En estilos.css, descomentar (o escribe si no está) el código bajo
/* ----- EJERCICIO 1: Estilos Base y Reset Mínimo ----- */.

Guardar estilos.css y actualizar el navegador.
Observar: Los puntos de la lista desaparecen, los elementos se alinean horizontalmente y se centran, y los enlaces ya no tienen subrayado.
El header tiene un fondo y es "pegajoso".

Ejercicio 2: Efecto Hover Básico

En estilos.css, descomenta el código bajo
/* ----- EJERCICIO 2: Efecto Hover Básico ----- */.

Guardar y actualizar.
Observar: Al pasar el mouse sobre los enlaces del menú, el color de fondo y el color del texto cambian.

Ejercicio 3: Bordes y Separadores

Aquí hay dos opciones, probar una o ambas (comentando la otra):

Opción A:
Descomentar la línea
/* border-bottom: 3px solid #ffc107; */
dentro de la regla :hover del ejercicio anterior.
Esto añade un borde inferior al pasar el mouse.

Opción B:
Descomentar el bloque
/* .menu-principal ul li:not(:last-child) { ... } */.
Esto añade una línea vertical entre los elementos del menú.

Guardar y actualizar para ver cada efecto.

Ejercicio 4: Transiciones Suaves

En estilos.css, localizar la regla .menu-principal ul li a (la original, no la de :hover). Añadir (o descomentar si ya se aactivo) la propiedad
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-out;.

Localizar la regla
.menu-principal ul li a:hover y añadir (o descomentar)
transform: translateY(-3px);.

Guardar ambos archivos y actualizar.
Observar: Los cambios de color al hacer hover ahora son animados y suaves. Además, los ítems del menú se elevan ligeramente.

Ejercicio 5: Elemento Activo

En el archivo index.html, modificar uno de los enlaces para que tenga la clase activo.
Por ejemplo:

                <li class="nav-item"> 
                <a href="#inicio" class="activo">  Inicio  < /a > 
            

En estilos.css, descomentar el bloque
/* ----- EJERCICIO 5: Elemento Activo ----- */.

Guardar ambos archivos y actualizar.
Observar: El elemento del menú al que le añadiste la clase activo ahora tiene un estilo diferente, indicando que es la sección actual.

Ejercicio 6: Variante - Menú Vertical

Para probar esto, primero comentar los estilos que hacen el menú horizontal:

En .menu-principal ul li, comentar
display: inline-block;.
En .menu-principal ul, comentar
text-align: center;.
Luego, en estilos.css, cambiar el nombre de la clase en el HTML de menu-principal a menu-principal-vertical (o simplemente aplicar los estilos de
.menu-principal-vertical a .menu-principal en el CSS).

Descomentar el bloque
/* ----- EJERCICIO 6: Variante - Menú Vertical ----- */.

Guardar y actualizar.
Observar: El menú ahora se muestra verticalmente. Se puede ajustar el padding-left en ul o el width del
<nav> o <header>
para controlar su posición.
Recuerda revertir estos cambios (o trabajar en una copia) si quieres seguir con el menú horizontal para el siguiente ejercicio.

Ejercicio 7: Mejoras Visuales Adicionales

Fuentes Personalizadas:

Seguir las instrucciones en los comentarios de estilos.css para añadir Google Fonts al index.html.
Descomentar las reglas CSS bajo
/* Fuentes Personalizadas ... */
para aplicar las nuevas fuentes y estilos de texto.

Sombras y Profundidad:

Descomentar (o asegurase que esté) la propiedad
box-shadow en la regla .menu-principal ul li a:hover.

Estilo de Botón para los Enlaces:

Si se quiere que los enlaces parezcan botones, comentar los estilos anteriores de
.menu-principal ul li a y
.menu-principal ul li a:hover (excepto las transiciones si se quieren mantener).

Descomentar el bloque completo bajo
/* Estilo de Botón para los Enlaces */.

Ajustar el padding del header como se sugiere si es necesario.
Guardar y actualizar para ver los cambios.

Puntos Clave para comprender el funcionamiento del CSS:

Selectores TAG:
Para seleccionar elementos html (body, header, ul, li a, etc.).
Pseudo-clases: :hover (cuando el mouse está encima), :last-child (el último hijo), :not() (para excluir).
Propiedades de Caja (Box Model): margin, padding, border.
Display: block, inline-block y cómo afectan al layout.
Colores y Fondos: color, background-color.
Texto y Fuentes: text-decoration, font-weight, font-family, font-size, text-transform, letter-spacing.
Transiciones: transition para animaciones suaves.
Transformaciones: transform: translateY() para mover elementos.
Sombras: box-shadow para dar profundidad.
Especificidad: Cómo se aplican las reglas CSS y cómo algunas pueden sobreescribir a otras.
Clases: Usar clases (.activo, .menu-principal) para aplicar estilos específicos.
Se pueden reutilizar en el mismo documento HTML
Enlace a CSS Externo:
La etiqueta < link rel="stylesheet" href="estilos.css"> .
Experimenta cambiando valores, añadiendo nuevas propiedades que conozcas o investigues. ¡La práctica es la mejor manera de aprender! Avísame si tienes alguna duda con alguno de los pasos.

Sección Datos

El ròtulo individual (index.html) de cada integrante debe contener:

Un menu hacia el resto de los integrantes del equipo y al rotulo de equipo
Un menu a las ejercitaciones de cada clase
Datos Obligatorios para la pagina rotulo individual.
Estructura semàntica HTML y css (vanilla) externo

CSS Vanilla es simplemente CSS sin ninguna herramienta adicional, un enfoque "puro" donde el desarrollador escribe todo el código CSS sin depender de frameworks o bibliotecas. Es la base del diseño web y lo que cualquier navegador web moderno interpreta de manera nativa.

Sección Imagenes

descargar Logos

Sección Contacto

Ponte en contacto con nosotros.