Estilos>>Estilos para el texto
Vamos a hacer un recorrido por las propiedades que afectan al texto y su forma de modificarlas mediante estilos.
El atributo de color puede aplicarse al texto, pero también a otros elementos de la página. Se puede acceder a esta propiedad desde la pestaña del editor de CSS. Cuando se aplique al color de fondo se encontrará en la pestaña del mismo nombre.
Propiedad: color
Valores y ejemplos: Para nombrar un color pueden utilizarse varios métodos:
DesktopActiveCaptionCaptionTextInActiveCaptionInActiveCaptionTextInfoBackgroundInfoTextMenuMenuTextWindowWindowTextPodemos especificar una cantidad para aumentar o disminuir el espaciado entre las letras de un texto. Esta propiedad no está disponible en el editor de CSS de N|VU por lo que habrá que introducirla manualmente
Propiedad: letter-spacing
Valores: Se pueden expresar introduciendo un valor entero que indique la medida en pixels (px), puntos (pt), pulgadas (in), centímetros (cm), anchura de la letra eme (em) o altura de la letra equis mayúscula(ex). Se utiliza el punto como separador decimal en lugar de la coma. Para disminuir el espaciado se utilizan valores negativos
Ejemplos:
Aumentado en 15 píxelesPodemos especificar una cantidad para aumentar o disminuir el espaciado entre las letras de un texto. Tampoco está implementada en el editor de CSS lo cual nos obliga a introducirla manualmente si la necesitamos.
Propiedad: word-spacing
Valores: Se pueden expresar introduciendo un valor entero que indique la medida en pixels (px), puntos (pt), pulgadas (in), centímetros (cm), anchura de la letra eme (em) o altura de la letra equis (ex). Se utiliza el punto como separador decimal en lugar de la coma. Para disminuir el espaciado se utilizan valores negativos
Ejemplos:
Aumentado en 15 píxelesPodemos encontrar esta propiedad en la pestaña del editor de CSS.
Propiedad: text-align
Valores: Nos permite introducir todos los valores de alineación soportados por el estándar HTML 4.01 mediante left, center right y justify.
Ejemplos: Todos los textos de este curso están diseñados con el atributo justify para evitar el efecto denominado de "banderas" o "gallardetes" provocado por la falta de ajuste del final o principio de renglón respecto al margen.
Podemos encontrar esta propiedad en la pestaña del editor de CSS.
Propiedad:text-decoration
Valores y ejemplos: Se
especifican mediante las palabras reservadas none (ninguno), underline
(subrayado), overline
(superrayado), line-through
(tachado).
Aunque parezca un contrasentido uno de los más
útiles puede ser
el valor none al eliminar, por ejemplo, la decoración
subrayada de los vínculos. También se puede
utilizar el valor blink
(parpadeante),
pero prácticamente sólo es soportado por Netscape
y Mozilla mientras que Internet
Explorer 6, Konkeror 3.1.3 o incluso Galeón 1.3.9 que
está basado en el mismo
motor que Mozilla no lo soportan.
También tendremos que teclearla si la necesitamos porque por el momento no está implementada en el editor de CSS.
Propiedad: text-indent
Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px) o porcentaje(%)
Ejemplos:
Este párrafo tiene aplicado un sangrado de 45 puntos y por eso su primera línea se inicia tras dejar un espacio en blanco al principio del renglón.
Nos permite indicar si un elemento o fragmento se mostrará tal como se escribe o con alguna variación en las letras. Es otra de las propiedades no incluida en el editor de CSS.
Propiedad: text-transform
Valores: Aparte de none que es el valor por defecto, podemos usar capitalize que escribe todas las primeras letras en mayúsculas, uppercase que muestra todo el texto en mayúsculas y lowercase que lo presenta en minúsculas independientemente de cómo lo hayamos escrito
Ejemplos:
| Este texto... | ...se ve así | |
|---|---|---|
| Aquí aplicamos capitalize |  |
Aquí aplicamos capitalize |
|
En este caso es uppercase |
|
En este caso es uppercase |
| Y éste es Lowercase | |
Y éste es Lowercase |
En el editor de CSS la encontrarás como en la pestaña .
Propiedad: line-height
Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%).
Ejemplos:
En esta línea se ha empleado un interlineado del 200%, de forma que presente una distancia doble a la habitual, respecto a la anterior y la posterior .
En esta línea se ha empleado un interlineado de 10 puntos. Como el tamaño de la letra es también de 10 puntos se puede comprobar que la parte superior de las letras llega hasta la base del renglón anterior.
Como ya habíamos mencionado existen un par de pseudoelementos que tienen que ver con el texto porque permiten modificar la primera letra o el primer renglón de un texto.
Su utilización sigue la sintaxis selector:pseudolemento {propiedad:valor} o bien selector.clase:pseudoelemento{propiedad:valor} o selector#id:pseudoelemento{propiedad:valor} si pretendemos aplicarlo a un selector con una clase o un identificador específico.