Divs, bordes y fondos
Este es el módulo más importante para las dos actividades: vamos a
aprender a dividir la página en secciones usando
<div>, y a darles color y forma con CSS.
En este módulo vas a...
- Usar
<div>para agrupar contenido en secciones. - Usar
classeidpara "nombrar" esas secciones. - Entender el modelo de caja: contenido, padding, border y margin.
- Aplicar
borderybackground-color. - Organizar divs en filas y columnas.
La etiqueta <div>
<div> significa division (división). No tiene ningún significado especial por sí misma: es una "caja" vacía que usamos para agrupar otras etiquetas y así poder darles estilo o moverlas juntas.
<div> es esa caja: agrupa
el título, la imagen y el texto de "una sección" para poder
tratarlos como un conjunto.
<div>
<h2>Sobre nosotros</h2>
<p>Somos una comunidad de creativos...</p>
</div>Nombrar las cajas: class e id
En el Módulo 5 usamos selectores como h1 o
p, que aplican el estilo a todas las
etiquetas de ese tipo. Pero, ¿y si quieres que solo una
caja concreta tenga un estilo distinto? Para eso necesitamos
ponerle un nombre propio a esa caja, usando los atributos
class o id.
class e id son esa etiqueta
con nombre propio para tus divs.
| Atributo | ¿Cuándo usarlo? | Selector en CSS |
|---|---|---|
class | Puede repetirse en varios elementos. Úsalo casi siempre. | .nombre-clase |
id | Debe ser único en toda la página (solo un elemento con ese id). | #nombre-id |
<div class="cabecera">...</div>
<div class="tarjeta">...</div>
<div class="tarjeta">...</div>.cabecera {
background-color: #222;
}
.tarjeta {
border: 1px solid #ccc;
}
Fíjate en el punto . antes del nombre de clase en el
CSS: es lo que le dice "esto es una clase, no una etiqueta".
El modelo de caja: content, padding, border, margin
· El content es la foto en sí.
· El padding es el passepartout (el marco blanco pegado a la foto, por dentro).
· El border es el marco de madera.
· El margin es el espacio vacío entre el cuadro y el siguiente cuadro de la pared.
.tarjeta {
padding: 16px; /* espacio entre el borde y el contenido */
border: 2px solid #444;
margin: 20px; /* espacio fuera del borde, hacia los vecinos */
}border y background-color
La propiedad border se escribe en un orden fijo: grosor, estilo y color.
.tarjeta {
border: 2px solid #d9622b;
background-color: #ffe7d6;
}| Parte | Ejemplos de valores |
|---|---|
| Grosor | 1px, 2px, 4px... |
| Estilo | solid (continuo), dashed (rayas), dotted (puntos) |
| Color | nombre (red), hexadecimal (#d9622b), rgb(217, 98, 43) |
Practica: dale estilo a una tarjeta
Añade a .tarjeta: un borde de 2px sólido, un color de fondo, y un poco de padding para que el texto respire.
Organizar divs en filas y columnas
Por defecto, cada <div> se coloca uno debajo de
otro, como fichas de dominó apiladas. Para la Actividad 2
necesitarás colocar varias tarjetas en fila (una
al lado de otra) en vez de apiladas. La forma moderna y sencilla
de hacerlo es con display: flex en el div que las
contiene (la "fila").
<div class="fila">
<div class="columna">Noticia 1</div>
<div class="columna">Noticia 2</div>
<div class="columna">Noticia 3</div>
</div>.fila {
display: flex; /* coloca a sus hijos en fila, uno al lado de otro */
gap: 16px; /* espacio entre columnas, sin usar margin */
}
.columna {
flex: 1; /* todas las columnas ocupan el mismo ancho */
border: 1px solid #ccc;
padding: 12px;
}
Por defecto, un <div> ocupa todo el ancho
disponible y salta de línea (se dice que es un elemento de
tipo bloque). Solo cuando su div padre tiene
display: flex, sus divs hijos se colocan uno al
lado de otro en horizontal.
Practica: tres columnas de noticias
Convierte .fila en un contenedor flex para que las tres tarjetas queden una al lado de otra.