Scribd
Cargar
12 vistas

MAQUETACION WEB

El documento describe la maquetación web utilizando HTML y CSS, enfocándose en la modificación de atributos visuales como colores, tamaños y márgenes. Se presentan propiedades comunes de CSS y se introduce el modelo Flexbox, que permite una distribución y alineación flexible de los elementos en un contenedor. Además, se detallan las propiedades específicas de Flexbox para controlar la dirección, ajuste y alineación de los elementos.

Cargado por

Jhony 722
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
12 vistas

MAQUETACION WEB

El documento describe la maquetación web utilizando HTML y CSS, enfocándose en la modificación de atributos visuales como colores, tamaños y márgenes. Se presentan propiedades comunes de CSS y se introduce el modelo Flexbox, que permite una distribución y alineación flexible de los elementos en un contenedor. Además, se detallan las propiedades específicas de Flexbox para controlar la dirección, ajuste y alineación de los elementos.

Cargado por

Jhony 722
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

“MAQUETACION WEB”

CSS

HTML

EJECUCION
ESTILOS Y SUS PROPIEDADES

Objetivo: Modificar atributos visuales de los elementos HTML como colores, tamaños,
márgenes, rellenos, bordes y efectos especiales.

Propiedades comunes de CSS:

 Color: Establece el color del texto o los bordes.


 Tamaño: Determina las dimensiones de los elementos.
 Relleno (padding): Define el espacio interior de los elementos, separando el
contenido de los bordes.
 Márgenes (margin): Establece el espacio exterior de un elemento, separándolo
de otros elementos.
 Bordes (border): Define los bordes de los elementos.
 Decoración (text-decoration): Como subrayado, tachado, etc.
 Efectos: Propiedades como sombras, transformaciones, transiciones, etc.

o <header>: Contenido del encabezado de un documento.


o <nav>: Contenido relacionado con la navegación.
o <section>: Define una sección dentro del documento.
o <article>: Representa un artículo en el documento.
o <aside>: Elemento accesorio o secundario, como barras laterales o
comentarios.
o <footer>: Define el pie de página.
o <main>: Contenido principal del documento (único por documento).
o <figure> y <figcaption>: Para imágenes y su descripción.

Flexbox permite distribuir y alinear los elementos dentro de un contenedor de forma


flexible y adaptable a diferentes tamaños de pantalla.

Propiedades de Flexbox:

 display: flex;: Define un contenedor flexible.


 flex-direction: Dirección de los elementos (fila o columna).
o Valores: row, row-reverse, column, column-reverse.
 flex-wrap: Controla el ajuste de los elementos si no caben en una línea.
o Valores: nowrap, wrap, wrap-reverse.
 justify-content: Alineación horizontal de los elementos.
o Valores: flex-start, flex-end, center, space-between, space-around.
 align-items: Alineación vertical de los elementos dentro de su contenedor.
o Valores: flex-start, flex-end, center, baseline, stretch.
 align-content: Distribuye el espacio entre líneas de elementos cuando hay más de
una línea de contenido.
 flex: Atajo para las propiedades flex-grow, flex-shrink y flex-basis.
o Ejemplo: flex: 1 1 auto; (crece, se encoge, y el tamaño base es
automático).
 order: Controla el orden de los elementos dentro de su contenedor flexible.
 align-self: Permite alinear cada elemento de manera independiente.
 flex-grow: Define cuánto debe crecer un elemento si hay espacio disponible.
 flex-shrink: Define cuánto debe encoger un elemento si el contenedor tiene poco
espacio.
 flex-basis: Define el tamaño base de un elemento flexible.

También podría gustarte