- El siguiente grupo son las propiedades de texto, y son las siguientes:
word-spacing: espacio entre palabrasletter-spacing: espacio entre letrastext-decoration: decoración del textovertical-align: alineación verticaltext-transform: transformación del textotext-align: alineación del textotext-indent: sangría o indentación de la primera línealine-height: altura de línea- Vaya, son unas cuantas...
- word-spacing puede tomar el valor normal, o una longitud que se añade al valor normal. Puede ser un valor negativo:
p { word-spacing : 1em }
- Muy bien.
- letter-spacing es lo mismo, puede tomar el valor normal, o una longitud que se añade al valor normal, y puede tomar un valor negativo:
h1 { letter-spacing : 1cm }
- Entiendo, muy fácil.
- text-decoration puede tomar el valor none (ninguna decoración), o una combinación de los siguientes, underline (subrayado), overline (una raya por encima), line-through (tachado) y blink (intermitente). Por ejemplo:
.antiguo { text-decoration : line-through }
- Vale, sigue.
- vertical-align dice cómo será la alineación vertical de un elemento en línea, y puede tomar cualquiera de estos valores (pero sólo uno): baseline, sub, super, top, text-top, middle, bottom, text-bottom, o un porcentaje.
- ¡Hala, casi nada!
- Las descripciones las tienes en la especificación, y lo mejor es que lo leas allí.
- Muy bien.
- text-transform puede tomar uno de estos cuatro valores:
capitalize: convierte en mayúscula el primer carácter de cada palabrauppercase: convierte en mayúsculas todas las letras del elementolowercase: convierte en minúsculas todas las letras del elementonone: neutraliza el valor heredado- Mmm, ok.
- text-align dice cómo alinear horizontalmente el texto contenido en un elemento en bloque, y puede vale left (justificar a la izquierda), right (justificar a la derecha), center (centrar) y justify (justificar a ambos márgenes). Por ejemplo:
blockquote.introduccion { text-align : center }
Eso haría que los contenidos de los elementos BLOCKQUOTE de clase introduccion aparecieran centrados en su cuadro.
- Ya entiendo.
- text-indent especifica el margen de la primera línea. Puede ser una longitud (por ejemplo, text-indent : 2em) o un porcentaje de la anchura del elemento padre.
- Mmm, creo que eso podría ser útil.
- Posiblemente. Y por último line-height establece la altura de línea, o sea, la distancia entre las líneas de base de dos líneas sucesivas. Puede tomar uno de estos cuatro valores: normal, un número, una longitud o un porcentaje del tamaño de la fuente del elemento.
- ¿Un número, sin unidad? ¿Qué indicaría un número?
- Es un multiplicador del tamaño de la fuente del elemento. Por ejemplo, las tres declaraciones siguientes son equivalentes:
div { line-height: 1.2; font-size: 1em }
div { line-height: 1.2em; font-size: 1em }
div { line-height: 120%; font-size: 1em }
- Sí, creo que lo entiendo.
- ¿Pasamos al siguiente grupo?
- Pasamos