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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
Ültima modificación: 22-08-2017.
Visitas este mes: 1
Visitas el mes pasado:
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.
Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.
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 )| 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:
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. Este valor está en desuso, de manera que la mayoría de los navegadores ya no lo aceptan.
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:
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 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:
imprimir esta página
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