espaciado de palabras (word-spacing) y espaciado de letras (letter-spacing)
Las propiedades word-spacing y letter-spacing pueden ser usadas para añadir espacio extra entre palabras o letras.
este es un ejemplo de letter spacing
este es un ejemplo de word spacing
Los valores que admite la propiedad word-spacing son "normal" o unidades de longitud. Los valores pueden ser negativos.
Igualmente, la propiedad letter-spacing admite valor "normal" y expresado en unidades. Tambien pueden ser valores negativos.
Igualmente, la propiedad letter-spacing admite valor "normal" y expresado en unidades. Tambien pueden ser valores negativos.
'text-decoration'
La propiedad text-decoration se refiere a la decoración de un elemento (aunque si el elemento carece de texto, la propiedad no surte efecto alguno), proporcionando un subrayado ( underline ), sobrerrayado (nos entendemos, overline ), tachado ( line through ), parpadeo ( blink ) o ninguno (none). Este ultimo es el que se usa para quitar el subrayado a los links.
El color requerido para el elemento "decorativo", es decir, el subrayado, es tomado del color del texto. Esta propiedad no es hereditaria, pero los elementos suelen igualar a aquellos de los que dependen (parents), y en este caso la linea permanecerá del mismo color aunque los elementos herederos (child) tengan diferentes valores de color. El ejemplo a continuación muestra como eliminar el subrayado característico de los links:
A:link { text-decoration: none; }
'vertical-align'
Esta propiedad permite controlar la posición vertical de texto o imágenes en relación a su elemento parent. Los posibles valores son:
- top , alinea la parte superior del elemento con el elemento parent mas alto en la línea.
- bottom alinea la parte inferior del elemento con el elemento parent inferior en la línea.
- text-top alinea la parte superior del elemento con la parte superior de las fuentes (letras) del elemento parent.
- text-bottom alinea la parte inferior del elemento con la parte inferior de la letra o fuente del elemento parent.
- baseline coloca en línea el elemento con el elemento parent.
- middle alinea el punto medio del elemento con el punto medio del elemento parent.
- sub coloca al elemento en subscript, y super en superscript.
este texto es normal; esto es sub y esto super . ¿gran cosa, no?
'text-transform'
La propiedad text-transform convierte texto a mayúsculas (valor uppercase), minúsculas (valor lowercase), o solo convierte a mayúscula la primera letra de cada palabra (capitalize). El valor text-transform : none visualiza el texto normalmente, ignorando cualquier otro valor text-transform heredado.
Los valores admitidos son, entonces, "capitalize", "uppercase", "lowercase" y "none"
Los valores admitidos son, entonces, "capitalize", "uppercase", "lowercase" y "none"
Capitalize Mirum Est Notare Quam Littera Gothica, Quam Nunc Putamus Parum Claram, Anteposuerit.
UPPERCASE: EODEM MODO TYPI, QUI NUNC NOBIS VIDENTUR PARUM CLARI, FIANT SOLLEMNES IN FUTURUM.
lowercase: ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
'text-align'
La propiedad text-align se aplica a texto dentro de un bloque (por ejemplo, texto dentro de las etiquetas P o DIV, que forman un bloque) y determina la alineación del bloque. Los valores son alinear con margen izquierdo, derecho, justificado o centrado (left, right, justify, center). Se recuerda que la alineación es con el margen, no con el borde de la página
'text-indent'
La propiedad text-indent se usa para tabular (indent, sangria de texto) la primera línea dentro de un bloque. Los valores admitidos son unidades de longitud, o porcentaje. Admite valores negativos. Este párrafo tiene este estilo.
'line-height'
La propiedad line-height (que se podía especificar dentro de la propiedad font) señala la distancia vertical entre líneas, medida entre las bases de cada linea. La base de una linea es la señalada por la parte inferior de un tipo de letra "no descendente"; por ejemplo, una "a", y no una "j". Los valores se asignan mediante un número (si indicamos line-height: 2 decimos al navegador que la distancia entre lineas ha de ser el valor font-size multiplicado por 2). Puede tambien señalarse con unidades de longitud; o por porcentaje (referido tambien al valor font-size).
Este es un ejemplo de párrafo con la propiedad line height, que hemos dejado fijada en el valor font-size multiplicado por dos.
No se permite valor line-height negativo.
Espacios
La propiedad white-space permite el control de los espacios dentro del elemento. Esta propiedad toma uno de tres valores:
- normal (contrae múltiples espacios en uno)
- pre (no contrae múltiples espacios)
- nowrap (no permite el ajuste de línea sin una etiqueta
)
display
La propiedad display se usa para definir un elemento con uno de cuatro valores:
- block (muestra un salto de línea antes y después del elemento)
- inline (ningún salto de línea antes o después del elemento)
- list-item (igual que block, salvo que se agrega un marcador de ítems de lista)
- none (sin visualización)
A diferencia de la propiedad visibility que veremos al tratar del posicionamiento, y que también permite ocultar elementos html, cuando un elemento tiene la propiedad display con valor none, es como no existiera, no se reseva el espacio que ocupaba.
Normalmente las propiedades display, white-space y list se suelen estudiar bajo el apartado de 'clasificación', aunque para mayor claridad nosotros mostramos las dos primeras dentro de las propiedades de texto, dejando una página aparte para las listas.

No hay comentarios:
Publicar un comentario