Diseño Web con CSS: Fuentes y Layouts

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

¿Cuál es la propiedad que permite cargar fuentes personalizadas en CSS?

@font-face (correct)

@font-style

@font-load

@font-family

¿Qué propiedad se utiliza para controlar la alineación vertical del texto en un contenedor en línea?

vertical-align (correct)

line-height

text-align

align-content

¿Cuál de las siguientes propiedades permite controlar el espaciado entre palabras en CSS?

spacing-control

word-spacing (correct)

text-spacing

letter-spacing

¿Qué sistema de diseño CSS permite organizar elementos en filas y columnas?

CSS Grid Signup and view all the answers

¿Cuál es la ventaja principal de usar Flexbox?

Facilita la organización de elementos en una sola dirección. Signup and view all the answers

¿Qué propiedad de CSS se utiliza para activar o desactivar variantes como small-caps?

font-variant Signup and view all the answers

En un contenedor Flexbox, ¿qué propiedad se utiliza para distribuir los elementos a través del espacio disponible?

justify-content Signup and view all the answers

¿Cómo se define un contenedor de grid con tres columnas iguales en CSS?

grid-template-columns: repeat(3, 1fr); Signup and view all the answers

¿Qué efecto tienen las Media Queries en el diseño de una página web?

Permiten ajustar el ancho del contenedor según el tamaño de la pantalla. Signup and view all the answers

¿Cuál es el ancho del contenedor cuando la pantalla tiene un ancho mínimo de 1200px?

40% Signup and view all the answers

¿Qué propiedad se está utilizando para asegurar que el margen exterior de todos los elementos sea 0?

margin: 0; Signup and view all the answers

¿Qué formato se utiliza para importar la fuente 'Poppins' desde Google Fonts?

@import url('https://fonts.googleapis.com/...'); Signup and view all the answers

¿Qué efecto tiene el uso de box-sizing: border-box en el modelo de caja?

Incluye el contenido, el relleno y el borde en las dimensiones especificadas. Signup and view all the answers

¿Cuál es la altura del elemento header según el estilo indicado?

100px Signup and view all the answers

¿Cuál es el propósito de la propiedad display=swap en la importación de fuentes?

Permite que se cargue la fuente de respaldo mientras se carga la principal. Signup and view all the answers

¿Cómo afecta el selector universal (*) a los elementos de la página web?

Aplica las mismas reglas de estilo a todos los elementos de la página. Signup and view all the answers

¿Qué efecto tiene el valor positivo de 'radio de propagación' en una sombra CSS?

Aumenta el tamaño de la sombra en todas direcciones. Signup and view all the answers

¿Cómo se centra horizontalmente un contenedor utilizando las propiedades de CSS?

'margin: auto;' en combinación con un ancho definido. Signup and view all the answers

¿Cuál es el efecto de usar la propiedad 'align-items: center;' en un contenedor flex?

Alinea verticalmente los elementos hijos en el centro del contenedor. Signup and view all the answers

¿Qué representa 'var(--main_color-secundary)' en CSS?

Una variable CSS que permite personalizar el color de fondo. Signup and view all the answers

¿Qué propiedad se utiliza para establecer un ancho máximo en un contenedor CSS?

'max-width: 1200px;' Signup and view all the answers

¿Cuál es el efecto del 'padding-top: 100px;' en un contenedor?

Agrega un espacio de 100px en la parte superior del contenedor. Signup and view all the answers

¿Qué significa 'width: 100%;' en CSS para un elemento?

El elemento ocupará todo el ancho disponible de su contenedor padre. Signup and view all the answers

¿Cuál es el propósito de la propiedad 'display: flex;' en un contenedor?

Habilitar el modelo de caja flexible para la disposición de los elementos hijos. Signup and view all the answers

Study Notes

Fuentes Web y Variantes

Las fuentes web permiten cargar fuentes personalizadas utilizando la regla @font-face, lo que permite usar fuentes que no están instaladas en el sistema del usuario.
CSS3 introduce propiedades como font-stretch para controlar la compresión o expansión de la fuente y font-variant para activar o desactivar variantes como small-caps.

Alineación Vertical y Espaciado de Texto

La propiedad vertical-align controla la alineación vertical del texto dentro de un contenedor en línea.
Las propiedades letter-spacing y word-spacing controlan el espaciado entre caracteres y palabras, respectivamente.

Flexbox

Flexbox es un sistema de diseño unidimensional para organizar elementos de manera flexible dentro de un contenedor.
Ideal para diseñar elementos flexibles, como menús de navegación, barras laterales y diseños de contenido vertical.

CSS Grid

CSS Grid es un sistema de diseño bidimensional para organizar elementos en filas y columnas.
Permite crear diseños más complejos y flexibles, como layouts de página y diseños de tarjetas.

Flexbox vs CSS Grid

Flexbox es ideal para diseños unidimensionales.
CSS Grid es ideal para diseños bidimensionales.

Sombra de Caja

La sombra de caja se define con la propiedad box-shadow, que acepta seis valores: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de propagación, color y opacidad.

Variables Personalizadas en CSS

Las variables personalizadas en CSS (var()) permiten personalizar estilos fácilmente.
Los valores de las variables se pueden cambiar en un solo lugar y se aplicarán automáticamente en todo el documento.

Portada

La clase container__cover establece el padding superior e inferior en 100px, y el color de fondo utilizando una variable CSS personalizada llamada --main_color-secundary.
La clase cover controla el ancho máximo del contenedor, lo centra horizontalmente y verticalmente.

Media Queries

Las Media Queries permiten cambiar el ancho del contenedor en función del tamaño de la pantalla.
Se puede ajustar el diseño de la página según el tamaño de la pantalla, optimizando la experiencia para usuarios en dispositivos móviles, tablets y computadoras de escritorio.

Elementos Utilizados de CSS3

La declaración @import importa una fuente de Google Fonts llamada "Poppins".
El selector universal * aplica reglas de estilo a todos los elementos de la página web.
El selector header aplica reglas específicas al elemento header de la página.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Este cuestionario aborda conceptos clave sobre el uso de fuentes web y propiedades CSS como Flexbox y CSS Grid. Aprende cómo estas herramientas pueden mejorar el diseño y la alineación del texto en tus aplicaciones web. Ideal para estudiantes de diseño web y desarrollo front-end.