Decoración y transformación

Estas tres propiedades modifican la apariencia visual del texto. text-transform cambia mayúsculas/minúsculas sin tocar el DOM; text-decoration agrega líneas decorativas; color (ya visto en CAT-18) se formaliza acá como propiedad de texto heredable.

text-transform — transformación visual

text-transform convierte el texto visualmente sin modificar el contenido real del DOM.

.etiqueta { text-transform: uppercase;  }   /* MAYÚSCULAS */
.nombre   { text-transform: capitalize; }   /* Primera Letra De Cada Palabra */
.bajada   { text-transform: lowercase;  }   /* todo minúsculas */
.normal   { text-transform: none;       }   /* sin transformación */

Trampa de capitalize: no es un title-case semántico. Capitaliza la primera letra de cada token separado por espacio, sin respetar reglas tipográficas (preposiciones, artículos, etc.). Para eso necesitás JavaScript.

El DOM no cambia: text-transform: uppercase no modifica el texto real del HTML. Los lectores de pantalla leen el texto original, no las mayúsculas CSS.

text-decoration — líneas decorativas

text-decoration controla las líneas decorativas del texto.

a    { text-decoration: none;         }   /* quitar subrayado */
s    { text-decoration: line-through; }   /* texto tachado */
abbr { text-decoration: underline dotted; }

text-decoration es un shorthand de cuatro longhands:

text-decoration-line — underline, overline, line-through, none
text-decoration-style — solid, dashed, dotted, wavy
text-decoration-color — color de la línea
text-decoration-thickness — grosor

Caveat del <a>: los links tienen text-decoration: underline por defecto del navegador. Para quitarlo hay que apuntar al <a> directamente — no alcanza con declararlo en un ancestro, porque text-decoration no se hereda de la misma manera.

Nota sobre el motor: getPropertyValue("text-decoration") devuelve el shorthand expandido ("underline solid rgb(0, 0, 0)") que es difícil de validar. El validador usa la longhand text-decoration-line que devuelve solo el tipo de línea ("none", "underline", "line-through"). Por eso los checks usan prop: "text-decoration-line", no prop: "text-decoration".

color — propiedad de texto heredable

color establece el color del contenido de texto. Es una de las propiedades más heredables de CSS.

body { color: #333; }   /* hereda a todos los hijos */
h1   { color: navy; }   /* sobreescrito para h1 */
a    { color: teal; }   /* links en color específico */

Si el body tiene color: #333, todos los elementos dentro heredan ese gris oscuro excepto los que tengan su propio color declarado.

Conexión con CAT-18: color acepta todas las sintaxis de CAT-18 (keywords, hex, rgb, hsl). El computed value siempre es rgb(): color: teal → rgb(0, 128, 128). Para los checks, podés usar el keyword o el hex — el motor los canoniza al mismo rgb() en ambos lados.

Tu turno: en el sandbox, aplicá los tres grupos de estilos. Para el .enlace, apuntá directamente con .enlace { text-decoration: none; }.