Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

2. Texto en CSS (II)

2.2 Propiedades de texto

Se denominan propiedades de texto aquellas que afectan al texto en su conjunto. Estas propiedades permiten controlar la alineación del texto, el interlineado, la separación entre palabras, etc.

En la página anterior vimos las propiedades de tipografía, que afectan al estilo de letra. Las propiedades que veremos a continuación afectan al texto en su conjunto y su distribución en la página

propiedad line-height

La propiedad line-height controla el interlineado del texto, es decir la distancia entre líneas, y su definición es la siguiente:

line-height	interlineado
Valores	normal | <numero> | <medida> | <porcentaje> | inherit
Descripción	Establece la altura de línea de los elementos
Valor inicial	normal
se aplica a	Todos los elementos

Además de las unidades de medida y los porcentajes, la propiedad line-height puede indicarse por un número sin unidades. Éste se interpreta como un múltiplo del tamaño normal de la letra.

Pulsa para ver una página de ejemplo

Propiedad text-align

La propiedad text-align controla la alineación del texto. su definición es la siguiente:

text-align	alineación del texto
Valores	left | right | center | justify | inherit
Descripción	Establece la alineación del contenido del elemento
Valor inicial	left
se aplica a	Elementos de bloque y celdas de tabla

Los valores definidos para alinear el texto son los clásicos: a la izquierda (left), a la derecha (right), centrado (center) y justificado (justify)

Pulsa para ver una página de ejemplo

Propiedad text-decoration

La propiedad text-decoration decora el texto mediante distintos elementos. su definición es la siguiente:

text-decoration	decoración del texto
Valores	none | ( underline || overline || line-through || blink )| inherit
Descripción	Establece la decoración del texto (subrayado, tachado, parpadeante, etc.)
Valor inicial	none
se aplica a	todos los elementos

Veamos el significado de los distintos valores:

• none: Sin decoración. Es el valor por defecto. Se emplea normalmente para quitar el subrayado que los enlaces tienen por defecto.
• underline: Subrayado del texto.
• overline: Añade una línea en la parte superior del texto.
• line-through: Muestra el texto tachado con una línea continua.
• blink: Muestra el texto parpadeante.

Propiedad text-transform

La propiedad text-transform permite distintos cambios entre mayúsculas y minúsculas; su definición es la siguiente:

text-transform	transformación del texto
Valores	capitalize | uppercase | lowercase | none | inherit
Descripción	Transforma el texto original (a mayúsculas, a minúsculas, etc.)
Valor inicial	none
se aplica a	todos los elementos

Esta propiedad permite mostrar el texto original transformado en un texto completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con la primera letra de cada palabra en mayúscula (capitalize).

Pulsa para ver una página de ejemplo

Propiedad text-indent

La propiedad text-indent permite tabular la primera línea de cada párrafo creando una sangría de primera línea; su definición es la siguiente:

text-indent	Tabulación de primera línea
Valores	<medida> | <porcentaje> | inherit
Descripción	Tabula desde la izquierda la primera línea del texto original
Valor inicial	0
se aplica a	todos los elementos

El valor puede expresarse en medidas o en porcentajes; éstos también pueden ser negativos, con lo cual, si aplicamos un margen al texto (más adelante veremos cómo), y mediante un valor negativo, podemos poner la sangría francesa. (primera línea más a la izquierda).

Si te fijas, los párrafos de esta misma página que estás leyendo llevan una sangría hecha mediante la propiedad text-indent.

Propiedad letter-spacing

La propiedad letter-spacingt permite controlar la separación entre las letras que forman las palabras; su definición es la siguiente:

letter-spacing	espaciado entre letras
Valores	normal | <medida> | inherit
Descripción	Permite establecer el espacio entre las letras que forman las palabras del texto
Valor inicial	normal
se aplica a	todos los elementos

El valor por defecto de medida es 0, siendo el 1em un espacio equivalente a una letra completa. Admite también valores negativos, en ese caso, el espacio entre las letras se reduce. Por supuesto podemos utilizar decimales para valores intermedios entre 0 y 1em, lo que suele ser lo más habitual.

Propiedad word-spacing

La propiedad word-spacing permite controlar la separación entre las palabras que forman los textos; su definición es la siguiente:

word-spacing	espaciado entre palabras
Valores	normal | <medida> | inherit
Descripción	Permite establecer el espacio entre las palabras que forman el texto
Valor inicial	normal
se aplica a	todos los elementos

Como en la propiedad anterior, los valores que ésta puede tomar son medidas, siendo el 0 el tamaño de espaciado normal(equivalente a una letra), los números positivos aumentan el tamaño de espaciado, mientras que para reducirlo el espaciado en menos de lo normal emplearemos números negativos. También puede tomar como valor la palabra "normal" (valor por defecto equivalente a 0).

Pulsa para ver una página de ejemplo

Propiedad white-space

La propiedad white-space permite controlar el tratamiento de los espacios en blanco; su definición es la siguiente:

white-space	tratamiento de los espacios en blanco
Valores	normal | pre | nowrap | pre-wrap | pre-line | inherit
Descripción	Permite establecer el espacio entre las palabras que forman el texto
Valor inicial	normal
se aplica a	todos los elementos

Los distintos valores que puede tener esta propiedad tienen el siguiente significado:

• normal: comportamiento por defecto de HTML.
• pre: se respetan los espacios en blanco y las nuevas lineas (exactamente igual que la etiqueta <pre>). Si la linea es muy larga, se sale del espacio asignado para ese contenido.
• nowrap: elimina los espacios en blanco y las nuevas lineas. Si la linea es muy larga, se sale del espacio asignado para ese contenido.
• pre-wrap: se respetan los espacios en blanco y las nuevas lineas, pero ajustando cada linea al espacio asignado para ese contenido.
• pre-line: elimina los espacios en blanco y respeta las nuevas lineas, pero ajustando cada linea al espacio asignado para ese contenido

En la siguiente tabla se resumen las características anteriores para cada valor.

Valor	Respeta espacios en blanco	Respeta saltos de línea	Ajuste espacios en blanco
normal	no	no	si
pre	si	si	no
nowrap	no	no	no
pre-wrap	si	si	si
pre-line	no	si	si

Pulsa para ver una página de ejemplo

Esta propiedad no se ve igual en todos los navegadores, con lo que debemos tener cuidado al aplicarla.

• En Internet explorer para ver esta propiedad debemos añadir la siguiente etiqueta al principio de la página, antes de la etiqueta <html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"/>
  Esta etiqueta obliga a la página a usar el lenguaje XHTML, más estandarizado y que elimina algunas diferencias entre navegadores. Con todo sólo admite los valores normal, pre, nowrap.
• Mozilla Firefox admite todos los valores excepto el valor pre-line,
• El resto de navegadores admiten todos los valores de esta propiedad

---

En las siguientes páginas veremos cómo establecer bordes y márgenes, para ello en CSS se tratan los distintos elementos como si fueran una serie de cajas rectangulares, las cuales las podemos modificar:

Modelo de cajas

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com