Resumen del tema
Guía Técnica de CSS: Estructura, Selectores y Modelo de Cajas
Este documento técnico sintetiza los principios fundamentales de las Hojas de Estilo en Cascada (CSS), un estándar del W3C diseñado para separar la presentación de los documentos web de su contenido estructural. A continuación, se detallan sus componentes clave, desde la sintaxis básica hasta el funcionamiento avanzado de la jerarquía de reglas y el modelo de cajas.
Resumen Ejecutivo
CSS (Cascading Style Sheets) es la tecnología esencial para el diseño de interfaces web, permitiendo un control exhaustivo sobre la apariencia de los documentos (X)HTML. Sus beneficios principales incluyen la reducción del código, la mejora de la accesibilidad y la capacidad de modificar globalmente un sitio web mediante un único archivo externo. El éxito en su implementación depende de la comprensión de tres pilares:
1. La Cascada y la Especificidad: El sistema de prioridades que determina qué regla se aplica cuando hay conflictos.
2. Los Selectores: Herramientas de precisión para identificar elementos específicos o grupos de elementos.
3. El Modelo de Cajas: La estructura rectangular que rodea a cada elemento y define su espaciado, bordes y márgenes.
--------------------------------------------------------------------------------
1. Fundamentos y Evolución de CSS
CSS surgió de la necesidad de separar las instrucciones de presentación (colores, fuentes, maquetación) del contenido lógico. Históricamente, el estándar ha evolucionado desde CSS1 (con soporte completo desde 1999) hasta CSS3, que se organiza en módulos para facilitar la integración con tecnologías como SVG y MathML.
Beneficios de su utilización
* Control de diseño superior: Permite alcanzar presentaciones que el HTML base no puede gestionar.
* Eficiencia operativa: La modificación de una hoja externa actualiza todo un sitio web.
* Optimización de documentos: Elimina etiquetas obsoletas como <font> y el uso excesivo de tablas para maquetación, generando archivos más ligeros y rápidos.
* Estructura semántica: Fomenta documentos bien estructurados y accesibles para diversos dispositivos (móviles, lectores de pantalla, TV).
--------------------------------------------------------------------------------
2. Métodos de Implementación
Existen tres formas de aplicar reglas de estilo a un documento HTML, ordenadas de menor a mayor peso jerárquico:
1. Hojas de estilo externas: El método más eficiente. Se vinculan mediante el elemento <link> o se importan con @import dentro de la cabecera.
2. Hojas de estilo incrustadas: Definidas dentro de la etiqueta <style> en la cabecera del documento.
3. Estilos en línea: Aplicados directamente a una etiqueta mediante el atributo style. Es el método con mayor prioridad, pero el menos recomendado para mantenimiento.
--------------------------------------------------------------------------------
3. El Mecanismo de la Cascada
La "cascada" es el proceso de resolución de conflictos cuando varias fuentes de estilo coinciden sobre un mismo elemento. El navegador aplica las reglas basándose en tres criterios:
3.1. Origen de la hoja de estilo
El orden de peso (de menor a mayor) es:
1. Hojas de estilo del navegador.
2. Hojas de estilo del usuario (lector).
3. Hojas de estilo del diseñador (autor).
4. Declaraciones !important del usuario.
3.2. Especificidad del selector
Cuanto más específico sea un selector, mayor será su peso. Por ejemplo, un selector que apunta a un elemento dentro de un contexto (h1 strong) ignorará las reglas de un selector general (strong).
3.3. Orden de las reglas
Si dos reglas tienen el mismo peso y especificidad, prevalece siempre la que aparezca en último lugar en el código.
Nota sobre !important: Esta palabra clave otorga prioridad absoluta a una regla, ignorando el orden natural de la cascada. Se utiliza frecuentemente para forzar estilos cuando otros selectores complejos están interfiriendo.
--------------------------------------------------------------------------------
4. Tipos de Selectores y Sintaxis
El selector identifica el elemento al que se aplicarán las propiedades. La sintaxis básica es: selector { propiedad: valor; }.
Clasificación de Selectores
Tipo de Selector Ejemplo Descripción
Universal * { ... } Afecta a todos los elementos del documento.
De elemento h1, p { ... } Se aplica a etiquetas HTML específicas.
De ID #nuevo { ... } Selecciona un elemento único mediante su atributo id.
De Clase .especial { ... } Agrupa múltiples elementos bajo el atributo class.
Descendente table p { ... } Selecciona párrafos que estén dentro de una tabla.
Hijo directo div > p { ... } Solo afecta a párrafos que son hijos inmediatos de un div.
Hermanos h1 + p Selecciona el párrafo que sigue inmediatamente a un h1.
Pseudoclases y Pseudoelementos
Permiten aplicar estilos basados en el estado del elemento o partes específicas del mismo:
* :link, :visited, :hover, :active: Estados de un enlace (orden recomendado: LVHA).
* :focus: Elementos que tienen el foco (como campos de formulario).
* :first-letter, :first-line: Estilizan la primera letra o línea de un párrafo.
--------------------------------------------------------------------------------
5. El Modelo de Cajas (Box Model)
Es el concepto fundamental para la maquetación. Cada elemento genera una caja rectangular compuesta por cuatro áreas concéntricas:
1. Área de contenido: El núcleo donde reside el texto o imagen. Se define con width y height.
2. Relleno (Padding): Espacio opcional entre el contenido y el borde. Es del mismo color que el fondo del contenido.
3. Borde (Border): Línea que perfila el relleno y el contenido. Requiere definir border-style para ser visible.
4. Margen (Margin): Espacio externo que separa la caja de otros elementos. Es siempre transparente.
Reglas Críticas del Modelo de Cajas
* Orden de medidas: Al definir medidas en una sola línea (ej. margin: 10px 20px 5px 15px;), el orden sigue las agujas del reloj: Top (Arriba), Right (Derecha), Bottom (Abajo), Left (Izquierda).
* Colapso de márgenes: Los márgenes verticales (top y bottom) de elementos adyacentes suelen colapsar, prevaleciendo el de mayor valor, mientras que los horizontales se suman.
* Cálculo de ancho: El ancho total de un elemento es la suma del width del contenido + padding + border + margin.
--------------------------------------------------------------------------------
6. Propiedades de Fuente, Texto y Color
6.1. Fuentes y Formato
* font-family: Lista de fuentes preferidas. Se recomienda incluir una familia genérica (serif, sans-serif) al final.
* font-size: Tamaño del texto (puede ser absoluto en px o relativo en em o %).
* font-weight: Grosor de la fuente (ej. bold o valores numéricos del 100 al 900).
* line-height: Controla el interlineado, vital para la legibilidad.
6.2. Texto y Espaciado
* text-decoration: Permite añadir subrayados o eliminar el formato predeterminado de los enlaces (none).
* text-transform: Convierte el texto a mayúsculas (uppercase), minúsculas o capitaliza palabras.
* text-indent: Sangra la primera línea de un párrafo.
* letter-spacing: Ajusta el espacio entre caracteres.
6.3. Colores y Fondos
CSS permite definir colores mediante nombres clave, hexadecimal o sistema RGB/RGBA.
* color: Define el color del texto y del borde por defecto.
* background-color: Define el color de fondo. Por defecto es transparent.
* background-image: Permite colocar imágenes de fondo, con control sobre su repetición (repeat), posición (position) y fijación (attachment).
--------------------------------------------------------------------------------
7. Tipos de Elementos según Presentación
CSS clasifica los elementos en dos categorías principales de flujo:
* Elementos de bloque (block): Generan saltos de línea antes y después. Ocupan todo el ancho disponible (ej. <div>, <p>, <h1>, <ul>).
* Elementos en línea (inline): No generan saltos de línea y solo ocupan el espacio necesario para su contenido (ej. <span>, <a>, <strong>, <em>).
La propiedad display permite alterar este comportamiento, convirtiendo elementos de bloque en línea y viceversa según las necesidades del diseño.
Este documento técnico sintetiza los principios fundamentales de las Hojas de Estilo en Cascada (CSS), un estándar del W3C diseñado para separar la presentación de los documentos web de su contenido estructural. A continuación, se detallan sus componentes clave, desde la sintaxis básica hasta el funcionamiento avanzado de la jerarquía de reglas y el modelo de cajas.
Resumen Ejecutivo
CSS (Cascading Style Sheets) es la tecnología esencial para el diseño de interfaces web, permitiendo un control exhaustivo sobre la apariencia de los documentos (X)HTML. Sus beneficios principales incluyen la reducción del código, la mejora de la accesibilidad y la capacidad de modificar globalmente un sitio web mediante un único archivo externo. El éxito en su implementación depende de la comprensión de tres pilares:
1. La Cascada y la Especificidad: El sistema de prioridades que determina qué regla se aplica cuando hay conflictos.
2. Los Selectores: Herramientas de precisión para identificar elementos específicos o grupos de elementos.
3. El Modelo de Cajas: La estructura rectangular que rodea a cada elemento y define su espaciado, bordes y márgenes.
--------------------------------------------------------------------------------
1. Fundamentos y Evolución de CSS
CSS surgió de la necesidad de separar las instrucciones de presentación (colores, fuentes, maquetación) del contenido lógico. Históricamente, el estándar ha evolucionado desde CSS1 (con soporte completo desde 1999) hasta CSS3, que se organiza en módulos para facilitar la integración con tecnologías como SVG y MathML.
Beneficios de su utilización
* Control de diseño superior: Permite alcanzar presentaciones que el HTML base no puede gestionar.
* Eficiencia operativa: La modificación de una hoja externa actualiza todo un sitio web.
* Optimización de documentos: Elimina etiquetas obsoletas como <font> y el uso excesivo de tablas para maquetación, generando archivos más ligeros y rápidos.
* Estructura semántica: Fomenta documentos bien estructurados y accesibles para diversos dispositivos (móviles, lectores de pantalla, TV).
--------------------------------------------------------------------------------
2. Métodos de Implementación
Existen tres formas de aplicar reglas de estilo a un documento HTML, ordenadas de menor a mayor peso jerárquico:
1. Hojas de estilo externas: El método más eficiente. Se vinculan mediante el elemento <link> o se importan con @import dentro de la cabecera.
2. Hojas de estilo incrustadas: Definidas dentro de la etiqueta <style> en la cabecera del documento.
3. Estilos en línea: Aplicados directamente a una etiqueta mediante el atributo style. Es el método con mayor prioridad, pero el menos recomendado para mantenimiento.
--------------------------------------------------------------------------------
3. El Mecanismo de la Cascada
La "cascada" es el proceso de resolución de conflictos cuando varias fuentes de estilo coinciden sobre un mismo elemento. El navegador aplica las reglas basándose en tres criterios:
3.1. Origen de la hoja de estilo
El orden de peso (de menor a mayor) es:
1. Hojas de estilo del navegador.
2. Hojas de estilo del usuario (lector).
3. Hojas de estilo del diseñador (autor).
4. Declaraciones !important del usuario.
3.2. Especificidad del selector
Cuanto más específico sea un selector, mayor será su peso. Por ejemplo, un selector que apunta a un elemento dentro de un contexto (h1 strong) ignorará las reglas de un selector general (strong).
3.3. Orden de las reglas
Si dos reglas tienen el mismo peso y especificidad, prevalece siempre la que aparezca en último lugar en el código.
Nota sobre !important: Esta palabra clave otorga prioridad absoluta a una regla, ignorando el orden natural de la cascada. Se utiliza frecuentemente para forzar estilos cuando otros selectores complejos están interfiriendo.
--------------------------------------------------------------------------------
4. Tipos de Selectores y Sintaxis
El selector identifica el elemento al que se aplicarán las propiedades. La sintaxis básica es: selector { propiedad: valor; }.
Clasificación de Selectores
Tipo de Selector Ejemplo Descripción
Universal * { ... } Afecta a todos los elementos del documento.
De elemento h1, p { ... } Se aplica a etiquetas HTML específicas.
De ID #nuevo { ... } Selecciona un elemento único mediante su atributo id.
De Clase .especial { ... } Agrupa múltiples elementos bajo el atributo class.
Descendente table p { ... } Selecciona párrafos que estén dentro de una tabla.
Hijo directo div > p { ... } Solo afecta a párrafos que son hijos inmediatos de un div.
Hermanos h1 + p Selecciona el párrafo que sigue inmediatamente a un h1.
Pseudoclases y Pseudoelementos
Permiten aplicar estilos basados en el estado del elemento o partes específicas del mismo:
* :link, :visited, :hover, :active: Estados de un enlace (orden recomendado: LVHA).
* :focus: Elementos que tienen el foco (como campos de formulario).
* :first-letter, :first-line: Estilizan la primera letra o línea de un párrafo.
--------------------------------------------------------------------------------
5. El Modelo de Cajas (Box Model)
Es el concepto fundamental para la maquetación. Cada elemento genera una caja rectangular compuesta por cuatro áreas concéntricas:
1. Área de contenido: El núcleo donde reside el texto o imagen. Se define con width y height.
2. Relleno (Padding): Espacio opcional entre el contenido y el borde. Es del mismo color que el fondo del contenido.
3. Borde (Border): Línea que perfila el relleno y el contenido. Requiere definir border-style para ser visible.
4. Margen (Margin): Espacio externo que separa la caja de otros elementos. Es siempre transparente.
Reglas Críticas del Modelo de Cajas
* Orden de medidas: Al definir medidas en una sola línea (ej. margin: 10px 20px 5px 15px;), el orden sigue las agujas del reloj: Top (Arriba), Right (Derecha), Bottom (Abajo), Left (Izquierda).
* Colapso de márgenes: Los márgenes verticales (top y bottom) de elementos adyacentes suelen colapsar, prevaleciendo el de mayor valor, mientras que los horizontales se suman.
* Cálculo de ancho: El ancho total de un elemento es la suma del width del contenido + padding + border + margin.
--------------------------------------------------------------------------------
6. Propiedades de Fuente, Texto y Color
6.1. Fuentes y Formato
* font-family: Lista de fuentes preferidas. Se recomienda incluir una familia genérica (serif, sans-serif) al final.
* font-size: Tamaño del texto (puede ser absoluto en px o relativo en em o %).
* font-weight: Grosor de la fuente (ej. bold o valores numéricos del 100 al 900).
* line-height: Controla el interlineado, vital para la legibilidad.
6.2. Texto y Espaciado
* text-decoration: Permite añadir subrayados o eliminar el formato predeterminado de los enlaces (none).
* text-transform: Convierte el texto a mayúsculas (uppercase), minúsculas o capitaliza palabras.
* text-indent: Sangra la primera línea de un párrafo.
* letter-spacing: Ajusta el espacio entre caracteres.
6.3. Colores y Fondos
CSS permite definir colores mediante nombres clave, hexadecimal o sistema RGB/RGBA.
* color: Define el color del texto y del borde por defecto.
* background-color: Define el color de fondo. Por defecto es transparent.
* background-image: Permite colocar imágenes de fondo, con control sobre su repetición (repeat), posición (position) y fijación (attachment).
--------------------------------------------------------------------------------
7. Tipos de Elementos según Presentación
CSS clasifica los elementos en dos categorías principales de flujo:
* Elementos de bloque (block): Generan saltos de línea antes y después. Ocupan todo el ancho disponible (ej. <div>, <p>, <h1>, <ul>).
* Elementos en línea (inline): No generan saltos de línea y solo ocupan el espacio necesario para su contenido (ej. <span>, <a>, <strong>, <em>).
La propiedad display permite alterar este comportamiento, convirtiendo elementos de bloque en línea y viceversa según las necesidades del diseño.