Modelo de cajas CSS

Cada elemento de un documento HTML tiene una caja o rectángulo que lo engloba y separa del resto

Partes de una caja

• Contenido HTML que tenga
• Borde, recuadro (visible o no) que la encierra
• Relleno o padding, espacio entre contenido y borde
• Margen (margin), espacio entre caja y otras cajas
• Tamaño de la caja (anchura y altura)
• Color y/o imagen de fondo

Partes de una caja

Márgenes

• margin: superior, derecho, inferior, izquierdo
  • Un solo valor para los cuatro, o uno para cada uno, en ese orden
• margin-top, margin-bottom, margin-right, margin-left

Márgenes

/* Opción 1 */
p
{
    margin: 10px 5px 2px 5px;
}

/* Opción 2 */
p
{
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 2px;
    margin-left: 5px;
}

Relleno o padding

• padding: superior, derecho, inferior, izquierdo
  • Un solo valor para los cuatro, o uno para cada uno, en ese orden
• padding-top, padding-bottom, padding-right, padding-left

Relleno o padding

div
{
    padding: 10px 20px 5px 20px;
}

Bordes: características a definir

• Estilo del borde: solid, double, dotted, none...
• Grosor del borde: normalmente en px
• Color del borde
• Radio del borde (border-radius): 0 para cuadrado

Bordes

• border: definimos estilo, grosor y color separados por espacios
• border-style, border-width, border-color: cada cosa por separado
• border-bottom-style, border-top-width, ...: estilo para cada característica en cada lado
• border-radius: para el radio del borde

Bordes

h1 
{ 
    border-style: double; 
    border-color: red; 
    border-width: 5px; 
}

h2 
{ 
    border-bottom-style: solid; 
    border-right-style: solid; 
    border-bottom-color: blue; 
    border-right-color: blue;
    border-bottom-width: 2px; 
    border-right-width: 2px; 
    /* Borde superior izq, superior der, inferior izq, inferior der */
    border-radius: 5px 5px 10px 10px;
}

h3 
{ 
    border-bottom: solid 1px red; 
    border-radius: 10px;
}

Fondo

p 
{ 
    background-color: ##12FF3A; 
}

div 
{ 
    background-image: url("imagenes/foto.png"); 
    background-repeat: repeat-x:
}

Tamaño

• width y height: anchura y altura del elemento
• max-width, min-width, max-height y min-height para establecer rangos de tamaño
• NO se incluye padding ni tamaño de los bordes (estos se suman al tamaño indicado)

Tamaño

h1 
{ 
    width: 70%; 
    height: 50px; 
}

Ejercicio 1

Crea un documento cajasCSS.html y un CSS externo que defina un selector de clase llamado caja, con los siguientes estilos:

• Margen izquierdo y derecho del 20%, superior de 30 píxeles e inferior de 0
• Relleno (padding) de 10 píxeles a cada lado
• Borde superior rojo de 4 píxeles de grosor, derecho azul de 6 píxeles e inferior verde de 2 píxeles, todos con estilo sólido.
• Color de fondo amarillo

Finalmente, crea un párrafo (más o menos largo, de unas 3 o 4 líneas al menos) y aplícale este estilo.

Posicionando los elementos

• Usando CSS2: definimos el posicionamiento y la ubicación para cada elemento, con respecto a otros elementos o de forma absoluta
• Usando CSS3: utilizamos una rejilla (grid) donde definimos qué casilla(s) ocupa cada elemento

Posicionamiento CSS2

Tipos de posicionamiento

• Normal (static): por defecto. Depende de cada caja (si es en línea o de bloque, tamaño...)
• Relativo (relative): se desplaza respecto a su posición normal
• Absoluto (absolute): posición absoluta respecto de elemento contenedor
• Fijo (fixed): posición fija en pantalla
• Flotante (float): todo lo posible a la izquierda o derecha, puede ser left, right o none

Todas salvo float se especifican como valores de la propiedad position

Ejemplo 1

No hay posicionamiento

#caja1
{
    background-color: blue;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
}

#caja2
{
    background-color: red;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
}

Ejemplo 1

Ejemplo 2

Posicionamiento flotante izquierda y derecha

#caja1
{
    background-color: blue;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
    float: left;
}

#caja2
{
    background-color: red;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
    float: right;
}

Ejemplo 2

Posicionamiento flotante izquierda y derecha

Ejemplo 3

Posicionamiento flotante derecha

#caja1
{
    background-color: blue;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
    float: right;
}

#caja2
{
    background-color: red;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
    float: right;
}

Ejemplo 3

Posicionamiento flotante derecha

Ejemplo 4

Posicionamiento fijo

#caja1
{
    background-color: blue;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
    position: fixed;
    top: 50px;
    right: 50px;
}

#caja2
{
    background-color: red;
    width: 30%;
    height: 100px;
    text-align:center;
    margin: 20px;
    float: right;
}

Ejemplo 4

Posicionamiento fijo

Ejemplo 5

Posicionamiento izquierdo excluyente

.caja1 { float: left; }
.caja2 { float: left; }
.caja3 { float: left; clear:left }

Ejemplo 5

Posicionamiento izquierdo excluyente

Ejercicio 2

Crea un documento cajas.html con tres cajas (div) y con CSS externo con estos estilos:

• Caja 1: fondo azul, borde gris continuo 2px, margen derecho e inferior de 10 píxeles. Anchura 50% y altura 100 px
• Caja 2: fondo amarillo claro, sin borde. Anchura 20% y altura de 50 px
• Caja 3: fondo rojo claro, borde negro doble de 1 px. Anchura 20% y altura 50 px
• Posicionamiento flotante a la izquierda para todas las cajas, pero la tercera debe tener una propiedad clear para estar alineada con el margen izquierdo.

Ejercicio 2

Resultado final (aproximado)

Otros parámetros de posición

top, bottom, left y/o right para distancia respecto a los bordes de la página

/* Posición en esquina inferior izquierda (pegado al borde inferior) */
div
{
    position: fixed;
    bottom: 0px;
    left: 0px;
}

Posicionamiento con rejilla (grid)

1. Ubicar todos los elementos a posicionar dentro de un elemento contenedor (típicamente, un div o section)
2. Definir en el elemento contenedor las dimensiones y tamaños de la rejilla
3. Ubicar cada elemento en la(s) celda(s) deseada(s)

Posicionamiento con rejilla (grid)

Paso 1

<section id="contenedor">
    <div id="elemento1">Uno</div>
    <div id="elemento2">Dos</div>
    <div id="elemento3">Tres</div>
    <div id="elemento4">Cuatro</div>
    ...
</section>

Posicionamiento con rejilla (grid)

Paso 2

/* Rejilla de 2 filas y 3 columnas */
#contenedor
{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px auto;
    gap: 10px;
}

/* Alternativamente, podemos usar otras unidades */
#contenedor
{
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 50px auto;
    gap: 10px;
}

Unidad fr: fracción del espacio disponible

Posicionamiento con rejilla (grid)

Paso 3

#elemento1
{
    grid-row: 1 / 3;
    grid-column: 1;
}

#elemento2
{
    grid-row: 1;
    grid-column: 2 / 4;
}

Posicionamiento con rejilla (grid)

Resultado final

Ejercicio 3

Crea un documento HTML llamado ofertas.html, y trata de simular esta apariencia usando CSS Grid, bordes y otras propiedades CSS que hemos estado viendo hasta ahora:

• Algunas pistas:
  • Margen lateral del 20% a cada lado, y fuente Arial en todo el documento
  • Color blue para bordes, precios y fondo del anuncio

Ejercicio 3

La propiedad display

Define cómo queremos disponer un elemento en la página

• block: elementos en línea se comportan como en bloque
• inline: elementos en bloque se comportan como en línea
• inline-block: como la anterior, pero podemos definir anchura y altura del elemento
• none: elemento oculto
• hidden: elemento oculto pero mantiene su espacio
• grid: para rejillas
• ...

Estilos para listas

• list-style-type
  • disc, circle, square... para listas no ordenadas (ul)
  • decimal, lower-roman, upper-roman, lower-alpha, upper-alpha... para listas ordenadas (ol)
• list-style-position
  • inside / outside (valor por defecto)
• list-style-image (poco flexible para indicar tamaño y posición de la imagen)

Estilos para listas

ol
{
    list-style-type: upper-roman;
    list-style-position: inside;
}

Viñetas personalizadas

ul
{
    list-style-type: none;
}

ul li 
{
    padding-left: 10px;
    background-image: url("imagenes/estrella.svg");
    background-position: 0 0;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
}

Listas y posicionamiento

Menú de navegación con lista inline

nav
{
    background-color: #CCC;
}

nav ul.navegacion
{
    list-style-type: none;
    text-align: center;
}

nav ul.navegacion li
{
    display: inline;
    margin: 20px;
}

Listas y posicionamiento

Menú de navegación con lista inline

<nav>
    <ul class="navegacion">
        <li>Inicio</li>
        <li>Preguntas frecuentes</li>
        <li>Tienda online</li>
        <li>Contacto</li>
    </ul>
<nav>

Listas y posicionamiento

Menú de navegación con lista inline

Ejercicio 4

En este enlace puedes descargar el contenido HTML de una página web que simula la página de inicio de un instituto. Añade el CSS necesario para que se vea como se indica a continuación.

• Algunas pistas:
  • Color de fondo de encabezado y pie: #84250C.
  • Encabezado pegado a la esquina superior izquierda, y pie a la esquina inferior izquierda.
  • Zona entre encabezado y pie: margen superior de 150px, y lateral de 20% a cada lado.

Ejercicio 4