CSS: Evaluación CSS
CSS 3: Evaluación de conocimiento y ejercicios para dominar el diseño web. Incluye ejemplos prácticos y preguntas clave.
Aprende CSS GRATIS y certifícateEste módulo está diseñado para evaluar tus conocimientos sobre CSS 3 y proporcionarte ejercicios prácticos que te ayudarán a consolidar tus habilidades en el diseño web. CSS 3 es una de las tecnologías fundamentales para la creación de interfaces de usuario y su dominio es esencial para cualquier desarrollador web.
Evaluación de conocimiento
Para evaluar tu comprensión de CSS 3, te proponemos una serie de preguntas clave que abarcan desde conceptos básicos hasta temas avanzados.
Preguntas de evaluación
¿Qué es una hoja de estilo en cascada? Una hoja de estilo en cascada (CSS) es un lenguaje que describe la presentación de un documento escrito en HTML o XML.
Explica la diferencia entre
margin
ypadding
.Margin
se refiere al espacio exterior de un elemento, mientras quepadding
se refiere al espacio interior, entre el contenido del elemento y su borde.¿Cómo se aplica un
flexbox
en CSS? Para aplicar unflexbox
, se debe establecer la propiedaddisplay: flex;
en el contenedor padre. Luego, se pueden usar propiedades comojustify-content
,align-items
yflex-direction
para controlar la distribución de los elementos hijos.¿Qué es una pseudo-clase en CSS? Una pseudo-clase es una palabra clave añadida a un selector que especifica un estado especial del elemento seleccionado. Ejemplo:
:hover
para cambiar el estilo de un elemento cuando el ratón está sobre él.
Ejercicios prácticos
A continuación, se presentan ejercicios prácticos para reforzar tus conocimientos en CSS 3.
Ejercicio 1: Crear un layout flexible
Crea un contenedor que utilice flexbox
para distribuir tres elementos hijos de manera equitativa en el espacio disponible.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio Flexbox</title>
<style>
.container {
display: flex;
justify-content: space-around;
border: 1px solid #000;
padding: 10px;
}
.item {
background-color: #f4f4f4;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
</body>
</html>
Ejercicio 2: Aplicar una animación
Crea una animación que cambie el color de fondo de un botón cuando el usuario pase el ratón sobre él.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio Animación</title>
<style>
.btn {
background-color: #008CBA;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #005f73;
}
</style>
</head>
<body>
<button class="btn">Hover me</button>
</body>
</html>
Ejercicio 3: Uso de grid layout
Implementa una cuadrícula que contenga cuatro elementos, distribuidos en dos filas y dos columnas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 10px;
}
.grid-item {
background-color: #f4f4f4;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
</div>
</body>
</html>
Lecciones de este módulo de CSS
Lecciones de programación del módulo Evaluación CSS del curso de CSS.
Ejercicios de programación en este módulo de CSS
Evalúa tus conocimientos en Evaluación CSS con ejercicios de programación Evaluación CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.