【Introducción a CSS】¡La Guía Completa de Propiedades Básicas de Diseño Web para Copiar y Pegar!
Introducción
CSS (Hojas de Estilo en Cascada) es responsable de la "apariencia" de un sitio web. El diseño de todo lo que los usuarios ven, incluyendo el color y tamaño del texto, la maquetación y las animaciones, se crea con CSS.
Basada en los puntos clave de 46 artículos, esta guía selecciona y presenta cuidadosamente las propiedades de CSS más esenciales y fundamentales que los principiantes en desarrollo web deben aprender primero. Cada elemento incluye un enlace a una explicación más detallada y a código que puedes copiar y pegar para usar de inmediato. Comencemos por obtener una visión general con este artículo, y luego profundicemos en los temas que te interesen.
Índice
- 1. ¡Lo primero que hay que saber! Reglas Básicas de CSS
- 2. Dando Estilo al Texto (Tipografía)
- 3. Quien Domina el Espaciado, Domina la Maquetación (El Modelo de Caja)
- 4. Organizando Elementos con Libertad (Maquetación)
- 5. Definiendo la Impresión de un Sitio con Color y Fondos
- 6. Atrayendo a los Usuarios con Decoraciones y Animaciones
- 7. Un Paso Más Allá con Técnicas Avanzadas de CSS
1. ¡Lo primero que hay que saber! Reglas Básicas de CSS
La base de CSS es especificar "a qué elemento" se aplica "qué estilo". Veamos algunas reglas para ello.
Selectores (class / id / etiqueta)
Así es como se especifica a qué elemento HTML se aplica un estilo. La distinción básica es usar class para propósitos generales, id para un elemento único específico, y un selector de etiqueta como p para todos los párrafos.
Reseteo de CSS
Este es el concepto de resetear los estilos predeterminados que tienen los navegadores, como el subrayado en los enlaces, para evitar inconsistencias en el diseño.
2. Dando Estilo al Texto (Tipografía)
La impresión de un sitio web cambia drásticamente con la apariencia de su texto. Aquí están los fundamentos para crear expresiones de texto legibles y atractivas.
Color del Texto (color)
Esta es la propiedad más básica para especificar el color del texto. Usar texto rojo para advertencias o mensajes de error te permite transmitir información con precisión.
Grosor de la Fuente (font-weight)
Esto pone el texto en negrita para enfatizar partes importantes.
Estilo Cursiva (font-style)
Esto pone el texto en cursiva. Se utiliza como un acento para citas o en diseños.
Tamaño de la Fuente (font-size)
Esto ajusta el tamaño del texto. Usar unidades em te permite especificar un tamaño relativo al elemento padre.
Altura de Línea (line-height)
Esto ajusta el espaciado entre las líneas de texto, mejorando la legibilidad en pasajes largos.
Espaciado entre Letras (letter-spacing)
Esto ajusta el espacio entre caracteres. Espaciarlos ligeramente en los encabezados puede crear una impresión sofisticada.
Alineación del Texto (text-align)
Esto alinea horizontalmente elementos en línea como texto dentro de su elemento padre.
3. Quien Domina el Espaciado, Domina la Maquetación (El Modelo de Caja)
Todos los elementos HTML se tratan como "cajas", y ajustar el espacio a su alrededor es fundamental para la maquetación.
Borde (border)
Esto dibuja una línea alrededor de una caja. Puedes crear varios estilos como líneas sólidas o punteadas.
Espaciado Interno y Externo (padding / margin)
padding ajusta el espacio dentro de una caja, mientras que margin ajusta el espacio fuera de ella. Dominar estos es clave para maquetaciones hermosas.
4. Organizando Elementos con Libertad (Maquetación)
Esta es la técnica para no solo apilar elementos verticalmente, sino también para organizarlos uno al lado del otro o ajustarlos.
Los Fundamentos de la Maquetación Lado a Lado (display: flex)
Esta es la técnica más potente y extendida en la maquetación web moderna. Simplemente especificándola en un elemento padre, puedes organizar fácilmente los elementos hijos uno al lado del otro.
Ajuste de Texto (float)
Esta es una técnica de maquetación clásica utilizada para cosas como ajustar texto alrededor de una imagen.
Bloque en Línea (display: inline-block)
Una propiedad conveniente que permite que los elementos se organicen uno al lado del otro mientras también tienen ancho y alto.
Control de Altura y Anchura (width / height)
Esto especifica el tamaño de una caja. Especificar un porcentaje relativo al elemento padre, como width: 100%, es fundamental para el diseño responsivo.
Ocultar Elementos (display: none)
Esto oculta completamente un elemento de la pantalla. Como también se elimina de la maquetación, se comporta como si el elemento nunca hubiera existido.
Maquetación Práctica de 2 Columnas
Usando display: flex, puedes crear fácilmente una maquetación común de 2 columnas, como una barra lateral y contenido principal.
5. Definiendo la Impresión de un Sitio con Color y Fondos
El color y el fondo son elementos importantes que determinan la atmósfera general de un sitio.
Color de Fondo (background-color)
Esto establece el color de fondo de un elemento. Especificarlo en la etiqueta `body` establece el color de fondo para todo el sitio, creando un diseño unificado.
Degradado (linear-gradient)
Esto crea una transición de color suave (degradado) en el fondo. Puede expresar un diseño más profundo y moderno que un solo color sólido.
Translucidez (rgba)
Esto te permite especificar la transparencia de un color. Es útil para cosas como superponer texto sobre una imagen de fondo, donde puedes mantener la legibilidad mientras permites que el fondo se vea.
6. Atrayendo a los Usuarios con Decoraciones y Animaciones
Estas son técnicas para crear un sitio interactivo y atractivo.
Esquinas Redondeadas (border-radius)
Esto redondea las esquinas de una caja, dándole una impresión más suave. Se utiliza con frecuencia en el diseño de botones y tarjetas.
Añadir Sombras (box-shadow)
Esto añade una sombra a un elemento, creando una sensación de profundidad. Es eficaz para hacer que elementos como los botones parezcan flotar.
Maquetación de Tarjetas
Crea un diseño de estilo de tarjeta que organiza la información de forma ordenada combinando esquinas redondeadas y sombras.
Efectos al Pasar el Ratón (:hover)
Esto cambia el estilo de un elemento cuando el cursor del ratón está sobre él, proporcionando retroalimentación visual.
Desactivar Botones (:disabled)
Este es el estilo que se utiliza cuando un botón no debe ser clicable intencionadamente, como cuando la entrada de un formulario está incompleta.
Animación (@keyframes)
Esta es una potente función para añadir movimiento a los elementos. Permite una amplia gama de expresiones, como hacer que un elemento parpadee, aparezca gradualmente o se deslice.
Línea Debajo del Encabezado
Usa la propiedad border-bottom para dibujar una línea debajo de un encabezado, lo que define claramente las secciones.
7. Un Paso Más Allá con Técnicas Avanzadas de CSS
Una vez que hayas aprendido lo básico, aprendamos también técnicas para escribir un código más eficiente y manejable.
Variables de CSS (:root)
Define valores como los colores del tema como "variables" y reutilízalos en varios lugares para mejorar drásticamente la mantenibilidad.
Contenido Desplazable (overflow)
Esto fija la altura de un elemento y muestra cualquier contenido que se desborde con una barra de desplazamiento.
Diseño de Formularios
Dar estilo a los campos de entrada al enfocarlos o personalizar los botones de radio es importante para mejorar la usabilidad del formulario.
Conclusión
En esta guía, hemos organizado y presentado propiedades básicas de CSS por propósito. Aunque cada función es simple por sí sola, combinarlas abre un sinfín de posibilidades de diseño.
Primero, intenta usar este artículo de resumen como referencia para experimentar con las técnicas que te interesen. Luego, copiando y pegando el código de las páginas de explicación individuales, esperamos que experimentes la diversión de CSS al verlo en acción.