Clase 05 · Elementos principales CSS

01 · Box model

Box model

El box model es la representación de un contenedor de información, por ejemplo un DIV. Cada contenedor está formado por 4 capas:

Box model

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Margin

Border

Padding

Content

Content: el contenido, un párrafo, una imagen…
Padding: el espaciado entre el contenido y el límite del contenedor.
Border: el borde del contenedor.
Margin: el espaciado del contenedor con otro contenedor.

Dos contenedores uno debajo de otro

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

02 · Padding

Padding

El padding es el espaciado entre el contenido y el límite (borde) del contenedor.

style.css

/* Apply to all four sides */
padding: 1em;

/* top and bottom | left and right */
padding: 5% 10%;

/* top | left and right | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

Podemos definir el padding con el mismo valor para todos los lados, o un valor diferente en cada lado en una única fila de código. El orden que sigue para definir cada lado es el de las agujas del reloj (arriba, derecha, abajo, izquierda).

Padding: 1 valor vs. 4 valores

padding: 1em;

padding: 5px 1em 0 2em;

Definir el padding de cada lado de forma independiente

style.css

padding-top: 6px;
padding-bottom: 6px;
padding-left: 6px;
padding-right: 6px;

Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/padding

03 · Margin

Margin

El margin es el espaciado del contenedor con otro contenedor.

style.css

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

Igual que el padding: un mismo valor para todos los lados, o un valor distinto por lado en una sola línea, siguiendo el orden de las agujas del reloj. Además, el margin admite valores negativos y auto.

Margin: separación entre contenedores

margin-bottom: 24px;

Otro contenedor

Definir el margin de cada lado de forma independiente

style.css

margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
margin-right: 6px;

Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/margin

04 · Border

Border: las 3 propiedades

El borde tiene 3 propiedades: color (border-color), estilo (border-style) y grosor (border-width).

Color: border-color

style.css

/* <color> values */
border-color: red;

/* top and bottom | left and right */
border-color: red #f015ca;

/* top | left and right | bottom */
border-color: red rgb(240 30 50 / 70%) green;

/* top | right | bottom | left */
border-color: red yellow green blue;

Estilo: border-style

style.css

/* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

Los distintos border-style

solid

dotted

dashed

double

groove

ridge

inset

outset

Grosor: border-width

style.css

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */
border-width: 4px;
border-width: 1.2rem;

/* top and bottom | left and right */
border-width: 2px 1.5em;

/* top | left and right | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/border

04 · Border

Border en una línea

Podemos definir las 3 propiedades en una misma línea:

Podemos definir las 3 propiedades (color, style y width) en una misma línea de código.
Pero solo podremos poner un único valor por propiedad.
Podemos definir las propiedades en el orden que queramos.

✔ Correcto

style.css

border: 1px solid blue;

✘ Incorrecto: varios valores por propiedad

style.css

border: 1px 4px solid dotted blue red

Resultado del ejemplo correcto

border: 1px solid blue;

¡Muy importante! Si no definimos alguno de los 3 valores (color, style o width) el borde no se visualizará.

05 · Border-radius

Border-radius

Definimos el radio de las esquinas del borde:

style.css

border-radius: 25px;

Podemos definir el borde de cada esquina de forma independiente

style.css

border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;

Definimos independientes las 2 caras de una esquina

style.css

border-top-left-radius: 25px 80px;
border-top-right-radius: 25px 80px;
border-bottom-left-radius: 25px 80px;
border-bottom-right-radius: 25px 80px;

Más información: https://www.w3schools.com/cssref/css3_pr_border-radius.php

05 · Border-radius

Ejemplos de border-radius

style.css

border-radius: 25px;

style.css

border-radius: 500px;

style.css

border-radius: 500px 500px 0px 500px;

Ejemplos de border-radius

Podemos definir las 4 esquinas en una misma línea de código exactamente igual que con la propiedad border (arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda).

05 · Border-radius

Border-radius en una imagen

También podemos aplicar border-radius a una etiqueta <img>:

index.html

<img src="https://picsum.photos/600/400?random=1"
width="350px" height="350px" style="border-radius: 500px;">

index.html

<img src="https://picsum.photos/200/300?random=1"
width="300px" height="300px"
style="border-radius:500px;
border:3px black dotted;
padding:16px;">

Resultado (con una imagen local de ejemplo)

Paisaje verde con border-radius, borde punteado y padding

A la segunda imagen, aparte de un border-radius, le hemos aplicado un borde punteado y un padding.

06 · Color / background-color

Color / background-color

Hay 4 formas de definir el color, tanto para color (texto) como para background-color (fondo):

1 · Nombre del color

Hay 140 nombres de color definidos en CSS (ir al listado de colores).

style.css

.class{color: aquamarine;}

2 · Valor hexadecimal

Antes de escribir los 6 dígitos que forman este valor pondremos el símbolo #. Los selectores de color de los editores gráficos muestran este valor como «hexadecimal».

style.css

.class{color: #ff0000;}

3 · Valores RGB

Estos valores irán entre paréntesis y separados por comas.

style.css

.class{color: rgb(245, 168, 0);}

4 · Valores RGBA

Igual que RGB, pero el último valor define el canal Alpha (la transparencia). Los decimales del valor Alpha se definen con el símbolo del punto.

style.css

.class{color: rgba(245, 168, 0, 0.5);}

Canal Alpha: transparencia

0
Opacidad = 0%

0.5
Opacidad = 50%

1
Opacidad = 100%

07 · Unidades

Unidades

Pixels (px) — valor determinado en píxeles.
EM (em) — una unidad EM es equivalente a 16px.
Porcentaje (%) — valor determinado en tanto por ciento.
Viewport — el valor lo determina el área visible de la pantalla: 100 es el valor máximo y 0 el mínimo. vh: viewport height (alto de la pantalla). vw: viewport width (ancho de la pantalla).

Herencia

% es la única unidad que hereda el valor del contenedor padre: si tenemos un contenedor padre del 80% y luego un hijo de 50%… este 50% es respecto al 80% del padre y no al total.

index.html

<div style="width:80%">
  <div style="width:600px">
    Contenido
  </div>
</div>

index.html

<div style="width:80%">
  <div style="width:50vw">
    Contenido
  </div>
</div>

Herencia del porcentaje

Padre: width: 80% del total

Hijo: width: 50% del padre (= 40% del total)

El resto de unidades son independientes al valor del padre.

08 · Width / Height

Width / Height

Width: definimos la anchura de un elemento.
Height: definimos la altura de un elemento.

index.html

<div style="width:100%;">
  <div style="width:50%;">contenido</div>
  <div style="width:50%">contenido</div>
</div>

index.html

<div>
  <div style="height:80vh;">contenido</div>
  <div style="height:20vh">contenido</div>
</div>

width:800px

El contenedor siempre ocupa el tamaño asignado, independientemente de lo que ocupe el contenido.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

08 · Width / Height

Max-width / Min-width

Max-width: definimos el ancho máximo del contenedor; una vez lleguemos al ancho el contenedor no seguirá creciendo.
Min-width: definimos la anchura mínima.

Si el contenido ocupa 200px el contenedor será de 200px… pero si el contenido tiene 800px de ancho y tenemos un max-width de 600 en el contenedor… una vez lleguemos a 600px de ancho hará un salto de línea.

max-width:300px

El contenedor ocupará el espacio que ocupe el contenido como máximo; si supera este ancho hará un salto de línea.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation. No rebasará el máximo asignado

min-width:300px

El contenedor ocupará como mínimo 300px aunque el contenido ocupe menos; si el contenido supera ese ancho, el contenedor seguirá creciendo.

Texto corto

Max-height / Min-height

Tiene el mismo funcionamiento que el width.

09 · Ejercicio

Ejercicio de clase

Vamos a hacer una landing page similar al ejemplo de la imagen, utilizando las siguientes propiedades CSS:

padding
text-align
background-color
color
border
border-radius

Ejemplo de la landing page

Paleta de colores

#f1ed8e
R:241 G:237 B:142

#bcd13e
R:188 G:209 B:62

#9dc656
R:157 G:198 B:86

10 · Enlaces útiles

Enlaces útiles

La biblia de CSS: https://www.w3schools.com/css/default.asp