oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 5: Texto
En esta lección aprenderemos a dar estilo a la hora de añadir presentación al texto.
Propiedad " text-ident"
La propiedad text-ident nos permite aplicar sangría a la primera línea de los párrafos, dandole así un toque de elegancia al texto de nuestro sitio web. Usaremos los píxeles para darle valor a esta propiedad.
Veamos un ejemplo de como sería el código a insertar en tu hoja de estilos CSS:
p { text-ident: 25px;}
Propiedad "text-align"
Con esta nueva propiedad eligiremos como queremos que se alinie el texto mediante tres valores:
- left alineará el texto a la izquierda.
- right alineará el texto a la derecha.
- center dejará el texto con una alineación centrada.
El código podría quedar así en tu hoja de estilos:
h1 {text-align: center;}
p {text-align: left;}
De tal forma que todos los encabezados h1 se mostrarían centrados y todos los párrafos de tu página se visualizarían alineados a la izquierda.
Propiedad "text-decoration"
Esta propiedad nos permite añadir al texto algunos efectos como por ejemplo: subrayado inferior o superior, o que aparezca tachado.
En el siguiente ejemplo veremos como quedaría el código para que los encabezados h1 aparezcan subrayados, los encabezados h2 aparezcan con un subrayado superior y los párrafos aparezcan tachados:
h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
p {text-decoration: line-through;}
Propiedad "letter-spacing"
Usando la propiedad letter-spacing podremos aumentar la distancia entre los caracteres del texto. Nuevamente usaremos los píxeles para definir el valor:
h1 {letter-spacing: 8px;}
h2 {letter-spacing: 6px;}
p {letter-spacing: 4px;}
En el ejemplo anterior el encabezado h1 tendrá una separación entre caracteres de 8px, el encabezado h2 tendrá una separación entre caracteres de 6px y por último el texto de los párrafos tendrán una separación de 4px entre caracteres.
Cuéntame que te pasa por la cabeza o tus dudas en el Foro OTW.
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®