Glosario Técnico de CSS

img

Glosario Técnico Extendido de CSS detallado

| Término CSS | Significado | Caso de Uso | Explicación |

• * (Asterisco, Selector Universal) 

Selecciona todos los elementos de la página. 

Estilos generales, reseteo de estilos predeterminados. 

* { margin: 0; padding: 0; box-sizing: border-box; } 

Elimina los márgenes y rellenos predeterminados de todos los elementos y asegura que el padding y el border se incluyan en el ancho y alto total del elemento. Esto es crucial para un diseño consistente y predecible. 

• element (Selector de Elemento) 

Selecciona elementos HTML del tipo especificado. 

Estilos para p, h1, a, img, etc. 

p { color: blue; font-size: 16px; line-height: 1.5; } 

Establece el color del texto, tamaño de fuente y altura de línea para todos los párrafos. Es la base para estilizar elementos individuales. |

• .class (Selector de Clase) 

Selecciona elementos con la clase especificada. 

Estilos reutilizables para grupos de elementos, anticipado por un punto (.). 

.highlight { font-weight: bold; background-color: yellow; padding: 5px; } 

Aplica negrita, fondo amarillo y relleno a todos los elementos con la clase highlight. Permite la reutilización de estilos y facilita el mantenimiento del código. 

• #id (Selector de ID) 

Selecciona el elemento con el ID especificado. 

Estilos únicos para un elemento específico. 

#main-title { font-size: 3em; text-align: center; margin-bottom: 20px; } 

Establece el tamaño de la fuente, alineación del texto y margen inferior para el elemento con el ID #main-title. Se usa para elementos únicos dentro de la página. 

• element.class (Selector Combinado) 

Selecciona elementos del tipo especificado que también tienen la clase especificada. 

Estilos específicos para elementos que cumplen dos condiciones. 

p.highlight { color: red; } 

Establece el color del texto en rojo para los párrafos con la clase highlight. Aumenta la especificidad del selector.

• element#id (Selector Combinado) 

Selecciona el elemento con el ID especificado que también es del tipo especificado. 

Estilos específicos para un elemento único que también es de un tipo determinado. 

h1#main-title { text-align: center; color: #333; }

Centra el texto y establece el color del encabezado h1 con el ID main-title. Útil para asegurar estilos muy específicos a un elemento único. 

• property: value; (Declaración de Estilo) 

Define un estilo específico para un elemento. 

Asigna un valor a una propiedad CSS. 

color: blue; font-size: 16px; background-color: yellow; display: flex;

Son las unidades básicas de estilo en CSS. 

• color 

Define el color del texto. 

color: red; color: #00ff00; color: rgb(255, 0, 0); color: hsl(0, 100%, 50%); color: rgba(255, 0, 0, 0.5); 

Acepta nombres de colores, códigos hexadecimales, valores RGB, HSL y RGBA (con canal alfa para transparencia). 

• font-size 

Define el tamaño de la fuente. 

font-size: 16px; font-size: 1.2em; font-size: 1rem; font-size: larger; 

Se puede especificar en píxeles (px), ems (em), rems (rem), porcentajes (%), palabras clave (ej: larger), etc. rem es relativo al tamaño de la fuente del elemento raíz, lo que facilita el escalado del diseño. 

• background-color

Define el color de fondo de un elemento. 

background-color: yellow; background-color: #f0f0f0; background-color: rgba(255, 255, 0, 0.5);

 

Similar a color, acepta diferentes formatos de color, incluyendo transparencia con rgba y hsla. 

• background-image

Define una imagen de fondo para un elemento. 

background-image: url("image.jpg"); background-image: linear-gradient(to right, red, yellow);

Se pueden usar imágenes (con url()), gradientes lineales o radiales, e incluso múltiples imágenes. 

• margin 

Define el espacio alrededor de un elemento (externo). 

margin: 10px; margin: 0 auto; margin-top: 20px; margin: 10px 20px 30px 40px;

 

Se puede especificar para todos los lados o individualmente (margin-top, margin-right, etc.). margin: 0 auto; centra horizontalmente un elemento de bloque. 

• padding 

Define el espacio dentro de un elemento interno (1 valor aplica a todos los lados; 2 valores aplica arriba/derecha; 3 valores aplica arriba/derecha/abajo; 4 valores aplica arriba/derecha/abajo/izquierda). 

padding: 5px; padding: 10px 20px; padding: 10px 20px 10px 20px;

 

Similar a margin, se puede especificar para todos los lados o individualmente (padding-left, padding-bottom, etc.). 

• border 

Define el borde de un elemento. 

border: 1px solid black; border: 2px dashed red; border: 5px solid blue; border-radius: 5px;

 

Se puede especificar el grosor, estilo (solid, dashed, dotted, double, etc.) y color del borde. border-radius redondea las esquinas del borde. 

• display 

Define cómo se muestra un elemento. 

display: block; display: inline; display: flex; display: grid; display: none; display: inline-block;

 

Controla el diseño y la disposición de los elementos. flex y grid son para diseños más complejos y flexibles. inline-block permite que un elemento inline tenga un ancho y alto definidos. 

• float 

Posiciona un elemento a la izquierda o a la derecha de su contenedor. 

float: left; float: right; clear: both;

 

Se utiliza para crear diseños de columnas y ajustar el flujo del contenido. Requiere limpiar el flujo con clear después para evitar problemas de diseño. 

• position 

Define el tipo de posicionamiento de un elemento. 

position: static; position: relative; position: absolute; position: fixed; position: sticky;

 

Controla cómo se coloca un elemento en relación con otros elementos y el documento. static es el valor por defecto. relative posiciona el elemento relativo a su posición normal. absolute lo posiciona relativo a su ancestro posicionado más cercano. fixed lo posiciona relativo a la ventana del navegador. sticky lo fija a una posición hasta que se desplaza. 

• z-index 

Define el orden de apilamiento de un elemento.

 

z-index: 1; z-index: 10; z-index: -1;

 

Controla qué elementos se muestran encima de otros cuando se superponen. Solo funciona con position: relative; , position: absolute;  o position: fixed;. Valores más altos se muestran encima de valores más bajos. 

• @media (Media Queries) 

Aplica estilos diferentes según las características del dispositivo. 

@media (max-width: 768px) { ... } @media print { ... } @media (orientation: landscape) { ... }

 

Permite crear diseños responsivos que se adaptan a diferentes tamaños de pantalla, orientaciones o medios de impresión. Esencial para el diseño web moderno. 

• font-family 

Define la fuente del texto. 

font-family: Arial, sans-serif; font-family: 'Times New Roman', serif; font-family: 'Roboto', sans-serif;

 

Se pueden especificar múltiples fuentes para que el navegador elija la primera disponible. También se pueden usar fuentes web (@font-face). 

• font-weight 

Define el peso (grosor) de la fuente. 

font-weight: normal; font-weight: bold; font-weight: 400; font-weight: 700; font-weight: lighter;

 

Diseño Responsive (Responsive Web Design - RWD)

El diseño responsive es una filosofía de diseño web que busca crear experiencias de usuario óptimas en una amplia gama de dispositivos, desde teléfonos móviles hasta ordenadores de escritorio y televisores. En lugar de crear sitios web separados para cada dispositivo, se utiliza un único código HTML y CSS que se ajusta dinámicamente al entorno del usuario.

Técnicas Clave para Diseño Responsive:

Media Queries 

@media: Son la base del diseño responsive. Permiten aplicar diferentes estilos CSS según las características del dispositivo, como el ancho, la altura, la orientación (portrait o landscape) y la resolución.

• /* Estilos para pantallas pequeñas (móviles) */

@media (max-width: 767px) {
body {
font-size: 14px;
}
.container {
width: 100%;
}
}

• /* Estilos para pantallas medianas (tabletas) */

@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 90%;
}
}


/* Estilos para pantallas grandes (escritorios) */

@media (min-width: 992px) {
.container {
width: 80%;
}
}

Diseño Fluido 

Fluid Layout: En lugar de usar anchos fijos en píxeles, se utilizan porcentajes o unidades relativas (como em o rem) para los elementos. Esto permite que los elementos se redimensionen proporcionalmente según el tamaño de la pantalla.


.container {
width: 90%; /* Ancho relativo al contenedor padre */
max-width: 1200px; /* Ancho máximo para evitar que se vea demasiado grande en pantallas grandes */
margin: 0 auto; /* Centrar el contenedor */
}


img {
max-width: 100%; /* Evitar que las imágenes se desborden del contenedor */
height: auto; /* Mantener la proporción de aspecto de la imagen */
}

Imágenes Responsivas

Responsive Images: Se utilizan técnicas para servir diferentes versiones de una imagen según el tamaño de la pantalla o la densidad de píxeles del dispositivo. Esto optimiza el rendimiento y mejora la experiencia del usuario, especialmente en dispositivos móviles con conexiones más lentas. Las dos técnicas principales son:

srcset en la etiqueta <img>: Permite especificar múltiples rutas de imagen con diferentes tamaños. El navegador elige la imagen más adecuada.

html
<img srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 900w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 300px"
src="image-fallback.jpg" alt="Descripción de la imagen">


La etiqueta <picture>: Ofrece más flexibilidad y permite usar diferentes formatos de imagen (como WebP) según el soporte del navegador.

html
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="Descripción de la imagen">
</picture>

Tipografía Fluida 

Fluid Typography: Ajustar el tamaño de la fuente de manera proporcional al tamaño de la pantalla mejora la legibilidad en diferentes dispositivos. Se pueden usar unidades relativas como em o rem para el tamaño de la fuente.


Flexbox y Grid: Estos modelos de diseño ofrecen herramientas poderosas para crear layouts flexibles y adaptables. Facilitan la creación de diseños complejos que se ajustan automáticamente a diferentes tamaños de pantalla.


En resumen: El diseño responsive no es una propiedad CSS, sino una estrategia que combina media queries, diseño fluido, imágenes responsivas, tipografía fluida y, a menudo, Flexbox y Grid para crear sitios web que funcionen y se vean bien en cualquier dispositivo. Es una práctica fundamental en el desarrollo web moderno.

📚 Volver a  CSS3: Diseño y Estilización para una Web Moderna

---

© 2025 Blog de Cursos de Programación, Software y más. Todos los derechos reservados.

JGuiza Soluciones Integrales OKVENDO
Centro de Ayuda

---