Guía de Taller
1
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
_______________________________________________________________________
Diseño y Maquetación Web
Los elementos web a través de hojas de estilo
Sesión 4
LOGRO DE LA SESIÓN
Personaliza los elementos del sitio web mediante hojas de estilos CSS para la aplicación de formatos.
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
CONFIGURAR PROPIEDADES INICIALES PARA LOS ELEMENTOS WEB
CSS Box Model
Todos los elementos HTML se pueden considerar como cuadros. En CSS, el término "Box Model" se utiliza
cuando se habla de diseño y maquetación.
El Box-Model CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en: márgenes, bordes,
relleno y el contenido real. La siguiente imagen ilustra el Box-Model:
Explicación:
Content: el contenido del cuadro, donde aparecen el texto y las imágenes.
Padding: limpia un área alrededor del contenido. El acolchado es transparente
Border: un borde que rodea el relleno y el contenido.
Margin: borra un área fuera del borde. El margen es transparente
El Box-Model nos permite agregar un borde alrededor de los elementos y definir el espacio entre los
elementos.
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
_______________________________________________________________________
Ejemplo:
Ancho y alto de un elemento
Para establecer correctamente el ancho y alto de un elemento en todos los navegadores, necesita saber cómo
funciona el Box-Model.
Importante: cuando establece las propiedades de ancho y alto de un elemento con CSS, simplemente establece
el ancho y alto del área de contenido. Para calcular el tamaño completo de un elemento, también debe agregar
relleno, bordes y márgenes.
Ejemplo
Este elemento <div> tendrá un ancho total de 350px:
POSICIONAMIENTO DE LOS ELEMENTOS WEB
La propiedad de posición especifica el tipo de método de posicionamiento utilizado para un elemento
(estático, relativo, fijo, absoluto o fijo).
• static
• relative
• fixed
• absolute
• sticky
Luego, los elementos se colocan utilizando las propiedades top, bottom, left, and right properties. Sin
embargo, estas propiedades no funcionarán a menos que se establezca primero la propiedad de posición.
También funcionan de forma diferente según el valor de la posición.
position: static;
Los elementos HTML se colocan static de forma predeterminada.
Los elementos de posición static no se ven afectados por las propiedades top, bottom, left, and right.
Diseño y Maquetación Web – Formación Continua
1
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
_______________________________________________________________________
Diseño y Maquetación Web
Los elementos web a través de hojas de estilo
Sesión 4
LOGRO DE LA SESIÓN
Personaliza los elementos del sitio web mediante hojas de estilos CSS para la aplicación de formatos.
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
CONFIGURAR PROPIEDADES INICIALES PARA LOS ELEMENTOS WEB
CSS Box Model
Todos los elementos HTML se pueden considerar como cuadros. En CSS, el término "Box Model" se utiliza
cuando se habla de diseño y maquetación.
El Box-Model CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en: márgenes, bordes,
relleno y el contenido real. La siguiente imagen ilustra el Box-Model:
Explicación:
Content: el contenido del cuadro, donde aparecen el texto y las imágenes.
Padding: limpia un área alrededor del contenido. El acolchado es transparente
Border: un borde que rodea el relleno y el contenido.
Margin: borra un área fuera del borde. El margen es transparente
El Box-Model nos permite agregar un borde alrededor de los elementos y definir el espacio entre los
elementos.
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
_______________________________________________________________________
Ejemplo:
Ancho y alto de un elemento
Para establecer correctamente el ancho y alto de un elemento en todos los navegadores, necesita saber cómo
funciona el Box-Model.
Importante: cuando establece las propiedades de ancho y alto de un elemento con CSS, simplemente establece
el ancho y alto del área de contenido. Para calcular el tamaño completo de un elemento, también debe agregar
relleno, bordes y márgenes.
Ejemplo
Este elemento <div> tendrá un ancho total de 350px:
POSICIONAMIENTO DE LOS ELEMENTOS WEB
La propiedad de posición especifica el tipo de método de posicionamiento utilizado para un elemento
(estático, relativo, fijo, absoluto o fijo).
• static
• relative
• fixed
• absolute
• sticky
Luego, los elementos se colocan utilizando las propiedades top, bottom, left, and right properties. Sin
embargo, estas propiedades no funcionarán a menos que se establezca primero la propiedad de posición.
También funcionan de forma diferente según el valor de la posición.
position: static;
Los elementos HTML se colocan static de forma predeterminada.
Los elementos de posición static no se ven afectados por las propiedades top, bottom, left, and right.
Diseño y Maquetación Web – Formación Continua
