Unidad 4.2 - CSS

En esta unidad se estudian las propiedades fundamentales de CSS relacionadas con tamaños, colores, bordes, fondos, tipografías, alineaciones y comportamiento visual de los elementos. También se profundiza en overflow, decoración del texto y personalización avanzada.

4.10 Medidas

px em vh

CSS utiliza diferentes unidades de medida para controlar tamaños, espaciados y dimensiones.

Medidas absolutas

Unidad Descripción
px Píxeles
cm Centímetros
mm Milímetros

Medidas relativas

Unidad Uso
em Relativa al tamaño padre
rem Relativa al root
% Porcentaje

Medidas flexibles

width: 100vw; height: 100vh;

Ejemplo práctico

div{ width:50%; height:200px; padding:2rem; }
rem es una de las unidades más usadas actualmente.

Mini-test

1. ¿Qué unidad es relativa al tamaño root?

4.11 Color

RGB HEX

CSS permite aplicar colores mediante nombres, RGB, HEX y HSL.

Color hexadecimal

color:#ff0000;

Color RGB

color:rgb(255,0,0);

Color RGBA

color:rgba(255,0,0,.5);

Gradientes

background: linear-gradient( to right, red, black );
HEX es uno de los formatos más usados en diseño web.

Mini-test

1. ¿Qué formato permite transparencia?

4.12 Bordes, relleno y margen

margin padding border

Todo elemento HTML funciona como una caja.

Modelo de caja

  • Contenido
  • Padding
  • Border
  • Margin
div{ border:2px solid red; padding:20px; margin:30px; }

Border radius

border-radius:20px;

Tipos de borde

Valor Resultado
solid Línea sólida
dashed Línea discontinua
dotted Punteado
Padding genera espacio interno. Margin genera espacio externo.

Mini-test

1. ¿Qué propiedad genera espacio interno?

4.13 Contorno

outline

El outline crea un contorno exterior al borde.

button{ outline:3px solid red; outline-offset:5px; }

Diferencia con border

  • Border ocupa espacio.
  • Outline no modifica dimensiones.

Outline styles

outline-style:dashed;
Outline suele usarse para accesibilidad y focus.

Mini-test

1. ¿Qué propiedad separa outline del borde?

4.14 Fondo

background

Las propiedades background controlan fondos y colores.

body{ background-color:black; }

Imagen de fondo

background-image: url("fondo.jpg");

Background shorthand

background: black url("fondo.jpg") no-repeat center cover;

Background-size

background-size:cover;
cover adapta la imagen al contenedor completo.

Mini-test

1. ¿Qué valor adapta una imagen al contenedor?

4.15 Importación de fuentes

Google Fonts

Google Fonts permite importar tipografías externas.

@import url( 'https://fonts.googleapis.com/css2?family=Roboto' );
body{ font-family:'Roboto',sans-serif; }

Tipos de fuente

  • serif
  • sans-serif
  • monospace
  • cursive
Usar máximo 2 o 3 tipografías por proyecto.

Mini-test

1. ¿Qué propiedad cambia la tipografía?

4.16 Modo de escritura

writing-mode

Permite cambiar orientación del texto.

writing-mode: vertical-rl;

Valores

  • horizontal-tb
  • vertical-rl
  • vertical-lr
Muy usado en diseños creativos y orientales.

Mini-test

1. ¿Qué valor coloca texto vertical?

4.17 Alineaciones

text-align

CSS permite controlar alineaciones horizontales y verticales.

p{ text-align:center; }

Alineación vertical

vertical-align:middle;

Valores comunes

  • left
  • right
  • center
  • justify
justify se usa mucho en artículos y periódicos.

Mini-test

1. ¿Qué valor justifica texto?

4.18 Tamaño, estilo, peso y variantes

font-size font-weight

Tamaño

font-size:20px;

Estilo

font-style:italic;

Peso

font-weight:bold;

Variantes

font-variant: small-caps;
font-weight puede ir desde 100 hasta 900.

Mini-test

1. ¿Qué propiedad aplica negrita?

4.19 Decoración, sombra y transformaciones

text-shadow

Decoración

text-decoration: underline;

Sombra

text-shadow: 2px 2px 5px red;

Transformación

text-transform: uppercase;

Valores transform

  • uppercase
  • lowercase
  • capitalize
capitalize pone en mayúscula la primera letra.

Mini-test

1. ¿Qué valor pone texto en MAYÚSCULAS?

4.20 Espaciados

letter-spacing

Espaciado entre letras

letter-spacing:4px;

Espaciado entre palabras

word-spacing:10px;

Sangría

text-indent:40px;

White-space

white-space:nowrap;
nowrap evita saltos automáticos de línea.

Mini-test

1. ¿Qué propiedad separa letras?

4.21 Enlaces

hover

Estados de enlaces

a:link{} a:visited{} a:hover{} a:active{}

Ejemplo

a:hover{ color:red; }

Eliminar subrayado

text-decoration:none;
hover es fundamental para efectos interactivos.

Mini-test

1. ¿Qué pseudoclase actúa al pasar el ratón?

4.22 Overflow

overflow

Controla el contenido que sobresale del contenedor.

overflow:hidden;

Valores

  • visible
  • hidden
  • scroll
  • auto

Ejemplo completo

div{ width:300px; height:150px; overflow:auto; }
overflow:auto muestra scroll solo cuando es necesario.

Mini-test

1. ¿Qué valor muestra scroll automáticamente?

Unidad 4.2 completada 🚀