Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 1

Visitas el mes pasado:

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




2. Texto en CSS (II)

2.2 Propiedades de texto

html

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 )| none
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:

Excepto el valor none podemos poner varios valores en una misma propiedad. veamos algunos ejemplos:

<p style="text-decoration : underline">Propiedad text-decoration underline</p>

Propiedad text-decoration underline

Vemos el código en la línea superior, y el resultado del código en la inferior. El texto queda subrayado.

<p style="text-decoration : overline">Propiedad text-decoration overline</p>

Propiedad text-decoration overline

Vemos el código en la línea superior, y el resultado del código en la inferior. El texto queda con una línea por encima.

<p style="text-decoration : underline overline">Propiedad text-decoration underline overline</p>

Propiedad text-decoration underline overline

Vemos el código en la línea superior, y el resultado del código en la inferior. El texto queda con una línea por encima y otra por debajo, al haber usado los dos valores.


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. También puede tomar como valor la palabra "normal" (valor por defecto equivalente a 0).


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:

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 aunque funciona en todos los navegadores, en algunas versiones antiguas de algunos navegadores no se obtienen los mismos resultados, por lo que hay que tener cuidado al aplicarla.




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



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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