You are on page 1of 5

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Texto en CSS

FORMATO DE TEXTO
El estilo de este texto tiene algunas de las propiedades de formato de texto. El
título utiliza el text-align, text-transform y propiedades de color. El párrafo tiene sangría,
alineación y se especifica el espacio entre caracteres. El subrayado de este enlace
“Intentelo Ud Mismo”

Ver: Código 64.html

Color de texto
La propiedad color se utiliza para establecer el color del texto. El color se especifica por:

 un nombre de color - como "rojo"


 un valor HEX - como "# FF0000"
 un valor RGB - como "rgb (255,0,0)"

El color de texto predeterminado para una página se define en el selector <body>.


body {
color: blue;
}
h1 {
color: green;
}

Ver: Código 65.html

Alineación del texto


La propiedad text-align se utiliza para establecer la alineación horizontal de un texto. Un texto
puede ser alineado a la izquierda o la derecha, centrado o justificado.
El siguiente ejemplo muestra texto alineado al centro, texto alineado la izquierda y texto alineado
a la derecha (alineación izquierda es por defecto si la dirección del texto es de izquierda a derecha,
y la alineación derecha es por defecto si la dirección del texto es de derecha a izquierda):
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

Ver: Código 66.html

Cuando la propiedad text-align se establece en "justificar", cada línea se estira de manera que
cada línea tiene la misma anchura y los márgenes izquierdo y derecho son rectos (como en
revistas y periódicos):

div {
text-align: justify;
}

Ver: Código 67.html

Decoración del texto


La propiedad text-decoration se utiliza para establecer o eliminar decoraciones de texto. El
valor text-decoration: none; se utiliza a menudo para eliminar los subrayados de enlaces:

a {
text-decoration: none;
}

Ver: Código 68.html


GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Otros valores text-decoration que se utilizan para decorar el texto:

h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}

Ver: Código 69.html

No recomendamos subrayar texto que no tenga un enlace, esto tiende a confundir.

Transformación del texto


La propiedad text-transform se utiliza para especificar letras mayúsculas y minúsculas en un texto.
Se puede utilizar para convertir todo en letras mayúsculas o minúsculas o en mayúsculas la
primera letra de cada palabra:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}

Ver: Código 70.html

Sangría en texto
La propiedad text-indent se utiliza para especificar la sangría de la primera línea de un texto:

p {
text-indent: 50px;
}

Ver: Código 71.html


GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Espaciado de letras
La propiedad letter-spacing se utiliza para especificar el espacio entre los caracteres de un texto.
El siguiente ejemplo muestra cómo aumentar o disminuir el espacio entre caracteres:

h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}

Ver: Código 72.html

Altura de la línea
La propiedad line-height se utiliza para especificar el espacio entre líneas:

p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}

Ver: Código 73.html

Dirección del texto


La propiedad direction se utiliza para cambiar la dirección del texto de un elemento:

p {
direction: rtl;
}

Ver: Código 74.html


GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Espacio entre palabras


La propiedad word-spacing se utiliza para especificar el espacio entre las palabras de un texto.
El siguiente ejemplo muestra cómo aumentar o disminuir el espacio entre las palabras:

h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}

Ver: Código 75.html

Sombra de texto
La propiedad text-shadow establece una sombra al texto. El ejemplo siguiente especifica la
posición de la sombra horizontal (3px), la posición de la sombra vertical (2px) y el color de la
sombra (rojo):

h1 {
text-shadow: 3px 2px red;
}

Ver: Código 76.html

You might also like