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

Guía de Taller
3
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_
Un elemento con posición: static; no se coloca de ninguna manera especial; siempre se posiciona de acuerdo
con el flujo normal de la página:

Ejemplo

position: relative;

Un elemento con posición: relative; está posicionado en relación con su posición normal.
Establecer las propiedades top, right, bottom y left de un elemento en una posición relativa hará que se ajuste
lejos de su posición normal. El resto del contenido no se ajustará para encajar en ningún espacio dejado por el
elemento.

Ejemplo

position: fixed;

Un elemento con posición: fixed; se coloca en relación con la ventana gráfica, lo que significa que siempre
permanece en el mismo lugar incluso si se desplaza la página. Las propiedades top, right, bottom y left se
utilizan para colocar el elemento.
Un elemento fixed no deja un hueco en la página donde normalmente se habría ubicado.
Observe el elemento fijo en la esquina inferior derecha de la página. Aquí está el CSS que se utiliza:

Ejemplo

Diseño y Maquetación Web – Formación Continua

Guía de Taller
4
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_
position: absolute;

Un elemento con posición: absolute; se posiciona en relación con el antecesor posicionado más cercano (en
lugar de posicionado en relación con la ventana gráfica, como fijo).

Sin embargo; si un elemento de posición absolute no tiene antecesor de posición, utiliza el cuerpo del
documento y se mueve junto con el desplazamiento de la página.

Nota: Un elemento "posicionado" es aquel cuya posición es cualquier cosa excepto static.

Ejemplo:

Código CSS:

position: sticky;
Diseño y Maquetación Web – Formación Continua
Guía de Taller
5
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_
Un elemento con posición: sticky; se posiciona según la posición de desplazamiento del usuario.

Un elemento sticky alterna entre relative y fixed, según la posición de desplazamiento. Se coloca en una
posición relative hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica,
luego se "sticks" en su lugar (como la posición: fixed).

En este ejemplo, el elemento sticky se pega en la parte superior de la página (top: 0), cuando llega a su
posición de desplazamiento.

Elementos superpuestos
Cuando los elementos se colocan, pueden superponerse a otros elementos.
La propiedad z-index especifica el orden de pila de un elemento (qué elemento debe colocarse delante o
detrás de los demás).
Un elemento puede tener un orden de pila positivo o negativo:
Este es un encabezado Debido a que la imagen tiene un índice Z de -1, se colocará detrás del texto.

Ejemplo

Diseño y Maquetación Web – Formación Continua

Guía de Taller
6
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_
Un elemento con un orden de pila mayor siempre está delante de un elemento con un orden de pila menor.

Colocación de texto en una imagen

Cómo colocar texto sobre una imagen:

APLICACIÓN DE COLORES DE FONDO Y DE TEXTO

Fondos CSS
Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.

En estos capítulos, aprenderá sobre las siguientes propiedades de fondo de CSS:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

Color de fondo CSS

La propiedad background-color especifica el color de fondo de un elemento.

Ejemplo
El color de fondo de una página se establece así:

Otros elementos
Puede establecer el color de fondo de cualquier elemento HTML:

Ejemplo
Aquí, los elementos <h1>, <p> y <div> tendrán diferentes colores de fondo:

Diseño y Maquetación Web – Formación Continua

Guía de Taller
7
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_

Opacidad / Transparencia
La propiedad de opacidad especifica la opacidad / transparencia de un elemento. Puede tomar un valor de 0,0
a 1,0. Cuanto menor sea el valor, más transparente:

Transparencia usando RGBA

Si no desea aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, use valores de
color RGBA. El siguiente ejemplo establece la opacidad del color de fondo y no del texto:

Aprendió de nuestro Capítulo Colores CSS, que puede usar RGB como valor de color. Además de RGB, puede
utilizar un valor de color RGB con un canal alfa (RGBA), que especifica la opacidad de un color.

Un valor de color RGBA se especifica con: rgba (rojo, verde, azul, alfa). El parámetro alfa es un número entre
0.0 (completamente transparente) y 1.0 (completamente opaco).

Ejemplo:

Diseño y Maquetación Web – Formación Continua

Guía de Taller
8
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_

CSS Colors

Los colores se especifican utilizando nombres de colores predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.
Nombres de colores CSS
En CSS, se puede especificar un color mediante el uso de un nombre de color predefinido:

CSS Background Color

Puede establecer el color de fondo de los elementos HTML:

Ejemplo

CSS Text Color

Puede establecer el color del texto:

Hola Mundo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
Es por eso que, durante los años, vendré todo, quien no hará ejercicio ullamcorper suscipit lobortis nisl ut
aliquip de ella la ventaja de la receta.

Diseño y Maquetación Web – Formación Continua

Guía de Taller
9
Diseño y Maquetación Web – Los elementos web a través de hojas de estilo
______________________________________________________________________
_
CSS Border Color

Puede establecer el color de los bordes:

Ejemplo

Valores de color CSS

En CSS, los colores también se pueden especificar usando valores RGB, valores HEX, valores HSL, valores RGBA
y valores HSLA:
Igual que el nombre del color "Tomato":

Igual que el nombre del color "Tomato", pero 50% transparente

Ejemplo

Diseño y Maquetación Web – Formación Continua