🎨 Diccionario de propiedades CSS
Igual que la página anterior, esta no es un módulo para seguir en orden, sino un diccionario de las propiedades CSS más usadas: las que ya viste en los módulos 5 y 6, y algunas "vecinas" muy útiles que no llegamos a explicar. Vuelve aquí cada vez que quieras cambiar "cómo se ve" algo y no recuerdes el nombre exacto de la propiedad.
{ }, y dentro,
propiedad: valor; (qué le cambias y a qué). Todas
las propiedades de esta página se usan siempre dentro de esa
misma estructura.
selector {
propiedad: valor;
}1. Color y fondo
| Propiedad | ¿Para qué sirve? | Ejemplo |
|---|---|---|
color | El color del texto. | color: #2b6e63; |
background-color | El color de fondo de la caja (Módulo 6). | background-color: #ffe7d6; |
background-image | Una imagen de fondo en vez de, o además de, un color. | background-image: url("fondo.jpg"); |
opacity | Transparencia del elemento entero: de 0 (invisible) a 1 (totalmente visible). | opacity: 0.5; |
- Por nombre
- Palabras en inglés:
red,blue,white. Fácil, pero con pocas opciones. - Hexadecimal
- Empieza por
#y seis letras/números, como#d9622b. Es la forma más usada; muchas herramientas (como el propio inspector del navegador del Módulo 0) te dejan elegir un color con un selector visual y te dan este código. - rgb()
- Tres números de 0 a 255 para rojo, verde y azul:
rgb(217, 98, 43).
2. Texto y tipografía
| Propiedad | ¿Para qué sirve? | Ejemplo |
|---|---|---|
font-family | La tipografía o "letra" del texto (Módulo 5). | font-family: Georgia, serif; |
font-size | El tamaño del texto. | font-size: 18px; |
font-weight | El grosor del texto: normal o negrita. | font-weight: bold; |
font-style | Cursiva o normal. | font-style: italic; |
text-align | Alineación horizontal del texto dentro de su caja. | text-align: center; |
text-decoration | Líneas decorativas: subrayado, tachado o ninguna. Muy usada para quitar el subrayado de los enlaces. | text-decoration: none; |
line-height | El espacio vertical entre líneas de un mismo párrafo (a más número, más "aireado" se ve el texto). | line-height: 1.6; |
- font-weight
normal,bold, o un número de100a900(400 = normal, 700 = negrita).- text-align
left(por defecto),center,right,justify.- Tamaños (px, rem, %)
pxes un tamaño fijo, en píxeles. En este curso, para empezar, usa siemprepx: es el más fácil de entender.
3. El modelo de caja
Recuerda la analogía del cuadro en la pared del Módulo 6: content, padding, border y margin, de dentro hacia fuera.
| Propiedad | ¿Para qué sirve? | Ejemplo |
|---|---|---|
width | El ancho de la caja. | width: 300px; |
height | El alto de la caja. | height: 200px; |
padding | Espacio interior, entre el borde y el contenido (Módulo 6). | padding: 16px; |
margin | Espacio exterior, entre el borde y los elementos vecinos (Módulo 6). | margin: 20px; |
border | El borde de la caja: grosor, estilo y color, en ese orden (Módulo 6). | border: 2px solid #444; |
border-radius | Redondea las esquinas de la caja. Un número grande crea un círculo u óvalo. | border-radius: 12px; |
box-sizing | Decide si el padding y el borde se suman al ancho/alto o se descuentan de él. Con border-box, el tamaño final es más fácil de calcular. | box-sizing: border-box; |
Tanto padding como margin aceptan
hasta 4 valores seguidos, en este orden: arriba, derecha,
abajo, izquierda (como las agujas de un reloj, empezando
arriba). Por ejemplo, padding: 10px 20px 10px 20px;.
Si solo escribes un valor, como padding: 16px;,
se aplica igual a los cuatro lados.
4. Colocar elementos: display, position y flex
Estas son las propiedades que deciden dónde va cada caja en la pantalla, más allá de su tamaño y su color.
| Propiedad | ¿Para qué sirve? | Ejemplo |
|---|---|---|
display | Cómo se comporta la caja: si ocupa toda la fila, si va en línea con el texto, o si organiza a sus hijos en fila (Módulo 6). | display: flex; |
gap | El espacio entre los elementos de un contenedor flex, sin necesidad de margin (Módulo 6). | gap: 16px; |
flex | En un hijo de un contenedor flex, cuánto espacio ocupa en proporción a sus hermanos (Módulo 6). | flex: 1; |
justify-content | Cómo se reparten los hijos de un flex a lo largo de la fila (izquierda, centro, con espacio entre ellos...). | justify-content: center; |
align-items | Cómo se alinean los hijos de un flex en la dirección "vertical" de la fila. | align-items: center; |
position | Cómo se posiciona la caja: en su sitio normal, o "flotando" encima de otras. | position: relative; |
- block
- Ocupa toda la fila y salta de línea. Por defecto en
div,p,h1... - inline
- Ocupa solo el espacio de su contenido, no salta de línea. Por defecto en
span,a,strong... - flex
- Convierte la caja en un contenedor que coloca a sus hijos en fila, uno al lado de otro (Módulo 6).
- none
- Oculta el elemento por completo, como si no existiera.
position y sus valores (relative,
absolute, fixed) son de las
propiedades más difíciles de dominar al principio, y no las
necesitas para las dos actividades del curso. Para organizar en
filas y columnas, con display: flex (Módulo 6)
tienes de sobra. Vuelve a position más adelante,
cuando ya te sientas cómodo/a con lo demás.
5. Detalles que dan un toque profesional
| Propiedad | ¿Para qué sirve? | Ejemplo |
|---|---|---|
box-shadow | Una sombra alrededor de la caja, para darle relieve. | box-shadow: 0 4px 10px rgba(0,0,0,0.15); |
cursor | Qué forma toma el puntero del ratón al pasar por encima. Muy usado con valor pointer para indicar "esto se puede pulsar". | cursor: pointer; |
transition | Hace que un cambio de estilo (por ejemplo, al pasar el ratón) sea suave y progresivo, en vez de instantáneo. | transition: all 0.2s; |
:hover pegado a un selector, le dices al
navegador "aplica este estilo solo cuando el ratón esté encima".
Es como decir "esta silla es azul, pero se vuelve roja mientras
alguien se sienta en ella".
.boton:hover {
background-color: #b74e1e;
cursor: pointer;
}
Esta regla dice: "cuando el ratón esté encima de un elemento con
clase boton, cambia su fondo y el cursor". Pruébalo
pasando el ratón sobre cualquier botón de este mismo curso.