Las propiedades de formato de texto CSS se utilizan para dar formato y estilo al texto.
El formato de texto CSS incluye las siguientes propiedades:
1. Color
del texto 2. Alineación del
texto 3. Decoración
del texto 4. Transformación del
texto 5. Sangrado del texto
6. Espaciado entre
letras 7. Altura
de la línea 8. Dirección del
texto 9. Sombra del texto
10.Espaciado entre palabras
1. COLOR DEL
TEXTO La propiedad de color del texto se utiliza para establecer el color del texto.
El color del texto se puede configurar usando el nombre «rojo», valor hexadecimal «#ff0000» o por su valor RGB «rgb (255, 0, 0).
Syntax:
body
{
color:color name;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:red;
}
h2
{
color:green;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>
OUTPUT:
2. ALINEACIÓN DEL
TEXTO La propiedad de alineación del texto se utiliza para establecer la alineación horizontal del texto.
El texto se puede configurar a la izquierda, a la derecha, centrado y alineado.
En la alineación justificada, la línea se estira de manera que los márgenes izquierdo y derecho sean rectos.
Syntax:
body
{
text-align:alignment type;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:red;
text-align:center;
}
h2
{
color:green;
text-align:left;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>
OUTPUT:
3. DECORACIÓN DEL
TEXTO La decoración del texto se utiliza para agregar o eliminar decoraciones del texto.
La decoración del texto puede ser subrayada, superpuesta, superpuesta o ninguna.
Syntax:
body
{
text-decoration:decoration type;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>
OUTPUT:
4. TRANSFORMACIÓN DE
TEXTO La propiedad de transformación de texto se utiliza para cambiar el caso del texto, mayúsculas o minúsculas.
La transformación de texto puede ser en mayúsculas, minúsculas o mayúsculas.
Mayúsculas se utiliza para cambiar la primera letra de cada palabra a mayúsculas.
Syntax:
body
{
text-transform:type;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-transform:lowercase;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>
OUTPUT:
5.SANGRÍA DE
TEXTO La propiedad de sangría de texto se utiliza para sangrar la primera línea del párrafo.
El tamaño puede ser en px, cm, pt.
Syntax:
body
{
text-indent:size;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-indent:80px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.<br>
Text indentation property is used to indent the first line of the paragraph.
</h2>
</body>
</html>
OUTPUT:
6.ESPACIO DE LETRAS
Esta propiedad se utiliza para especificar el espacio entre los caracteres del texto.
El tamaño se puede dar en px.
Syntax:
body
{
letter-spacing:size;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
letter-spacing:4px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>
OUTPUT:
7. ALTURA DE LÍNEA
Esta propiedad se utiliza para establecer el espacio entre las líneas.
Syntax:
body
{
line-height:size;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
line-height:40px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.<br>
This property is used to set the space between the lines.
</h2>
</body>
</html>
OUTPUT:
8.DIRECCIÓN DEL
TEXTO La propiedad de dirección del texto se utiliza para establecer la dirección del texto.
La dirección se puede establecer usando rtl: de derecha a izquierda.
De izquierda a derecha es la dirección predeterminada del texto.
Syntax:
body
{
direction:rtl;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
direction: rtl;
text-align:center;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2><bdo dir="rtl">
This is text formatting properties.
</bdo>
</h2>
</body>
</html>
OUTPUT:
9.SOMBRA DE
TEXTO La propiedad de sombra de texto se utiliza para agregar sombra al texto.
Puede especificar el tamaño horizontal, el tamaño vertical y el color de la sombra del texto.
Syntax:
body
{
text-shadow:horizontal size vertical size color name;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow:3px 1px blue;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>
OUTPUT:
10.ESPACIO DE PALABRAS
El espaciado de palabras se utiliza para especificar el espacio entre las palabras de la línea.
El tamaño se puede dar en px.
Syntax:
body
{
word-spacing:size;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
word-spacing:15px;
}
</style>
</head>
<body>
<h1>
GEEKS FOR GEEKS
</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>
OUTPUT:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA