- 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