Apuntes sobre Css

¿Para qué quieres herencias cuando tienes !important?

Propiedades de texto en CSS

En esta lección, vamos a explorar propiedades como text-align, text-decoration o line-height, que controlan desde la alineación hasta el espaciado de letras. También veremos cómo estas propiedades ayudan a crear diseños adaptables que se ven bien en cualquier pantalla.

Propiedad word-spacing

Con word-spacing, ajustas el espacio entre palabras. Puede servir tanto para mejorar la legibilidad como para efectos visuales.

Valores: normal (por defecto) o cualquier unidad CSS (px, em, rem, etc.). Se aceptan valores negativos.

p {
    word-spacing: 5px; /* Más espacio entre palabras */
}
p.tight {
    word-spacing: -2px; /* Menos espacio */
}

Nota: Usa valores negativos con cuidado: pueden hacer que las palabras se solapen.

Propiedad letter-spacing

Controla el espacio entre letras. Es muy usada en titulares o cuando una fuente tiene poco espaciado.

Valores: normal o cualquier unidad válida. Se permiten negativos.

h1 {
    letter-spacing: 2px;
}
span {
    letter-spacing: -1px;
}

Accesibilidad: Evita valores negativos extremos. El espaciado pobre dificulta la lectura, especialmente en usuarios con dislexia.

Propiedad text-decoration

Añade decoraciones al texto como subrayado, tachado o sobrelínea. Muy común en enlaces.

Valores:

  • none: sin decoración
  • underline: subrayado
  • overline: línea sobre el texto
  • line-through: tachado
  • underline overline: ambas simultáneamente
a {
    text-decoration: none; /* Quita el subrayado */
}
del {
    text-decoration: line-through; /* Tachado */
}

CSS3: Permite especificar color, estilo y grosor:

Estilos disponibles para text-decoration-style:

  • solid: línea continua (valor por defecto)
  • dashed: línea de guiones
  • dotted: línea de puntos
  • wavy: línea ondulada
  • double: doble línea

También puedes usar text-decoration-color y text-decoration-thickness para definir el color y el grosor de la línea:

p {
    text-decoration: underline wavy blue 2px;
}

Propiedad vertical-align

Alinea verticalmente elementos en línea (inline, inline-block o celdas de tabla).

Valores comunes: baseline, top, middle, bottom, text-top, text-bottom, sub, super. También acepta unidades (px, %).

<span style="vertical-align: super;">2</span>
<img src="icono.png" style="vertical-align: middle;">

Nota: No funciona en elementos block.

Propiedad text-transform

Transforma mayúsculas o minúsculas visualmente (sin alterar el HTML).

Valores: none, uppercase, lowercase, capitalize.

h1 { text-transform: uppercase; }
p  { text-transform: capitalize; }

Accesibilidad: Evita uppercase en textos largos. capitalize puede fallar en idiomas como el español o el alemán.

Propiedad text-align

Alinea el texto horizontalmente dentro de un elemento en bloque.

Valores: left, right, center, justify, start, end.

p { text-align: justify; }
h1 { text-align: center; }

Nota: justify puede crear espacios irregulares si el texto es corto. start y end mejoran el soporte para lenguas RTL.

Propiedad text-indent

Aplica una sangría en la primera línea de un bloque de texto.

Valores: Cualquier unidad (px, em, %), incluyendo negativos.

p {
    text-indent: 2em;
}

Consejo: Prefiere em o rem para que la sangría escale con el tamaño del texto.

Propiedad line-height

Ajusta la altura de línea. Mejora la legibilidad especialmente en párrafos largos.

Valores: número sin unidad (relativo al font-size), unidades absolutas o porcentaje. El valor normal depende de la fuente.

p {
    font-size: 16px;
    line-height: 1.6; /* 25.6px */
}

Buena práctica: Usa valores entre 1.5 y 1.8 para texto legible. Es mejor evitar unidades fijas.

Propiedad white-space

Controla cómo se procesan los espacios en blanco y los saltos de línea.

Valores: normal, pre, nowrap, pre-wrap, pre-line, break-spaces (CSS3).

p {
    white-space: pre-wrap;
}

Uso recomendado: pre-wrap para mantener saltos de línea pero permitir adaptabilidad en el ancho.

Buenas prácticas

Valores universales: La mayoría de propiedades CSS aceptan también los valores especiales initial, inherit y unset:

  • initial: Restaura el valor por defecto de la propiedad.
  • inherit: Fuerza la herencia desde el elemento padre.
  • unset: Hereda si la propiedad es heredable, o usa el valor inicial si no lo es.

Decoración moderna: Puedes usar text-decoration-skip-ink para evitar que las líneas de subrayado pasen por encima de letras como la "g" o la "y":

a {
    text-decoration: underline;
    text-decoration-skip-ink: auto; /* valor por defecto */
}

Accesibilidad: Usa line-height entre 1.5 y 1.8. Evita uppercase para bloques largos. Asegúrate de que subrayados no afecten al contraste.

Adaptabilidad: Prefiere unidades relativas como em o rem para que el diseño escale con el tamaño del texto.

Enlaces: Si quitas el subrayado, asegúrate de que se distingan por color o efectos al pasar el ratón.

Compatibilidad: Algunas propiedades más modernas como text-decoration-thickness o break-spaces requieren navegadores actualizados.

Pruebas: Revisa la apariencia en distintos navegadores, tamaños de pantalla y configuraciones de accesibilidad.

TOP