Introducción al formato de texto CSS
En días anteriores, estaba obligado a representar el texto utilizando la versión anterior de CSS. Tenía una etiqueta para cambiar el sombreado y la tipografía del contenido, sin embargo, la medición se obstruyó al utilizar las dimensiones de texto pre-caracterizadas. Los diversos impactos como la intensidad y el tachado fueron concebibles en estructuras fundamentales con la ayuda de etiquetas HTML. En la actualidad, el usuario puede usar una variedad de propiedades de formato de texto CSS para organizar el texto en las páginas web a su manera.
En este capítulo, verá numerosas propiedades de formato de texto CSS. Las propiedades de formato de texto CSS se utilizan para diseñar el texto, darle estilo, describir un par de estilos de formato, etc. Las propiedades le proporcionan la representación visual de los caracteres, espacios, palabras, párrafos y muchos más.
Lista de propiedades de formato de texto CSS:
Detalles de las formas de formato de texto en CSS: -
1) Color del texto
Esta propiedad se puede usar para cambiar el color del texto. Se puede definir utilizando la propiedad de color.
Ejemplo : ilustración del color del texto
CSS Text Color Property
Hola Mundo….
Bienvenido a EDUCBA …
Mostrará la siguiente salida:
2) Alineación de texto
Esta propiedad se puede usar para cambiar la horizontal del texto. Se puede definir utilizando las propiedades izquierda, derecha, centro, justificar.
Ejemplo : ilustración de alineación de texto
Text Alignment Property
Hola Mundo…
Bienvenido a EDUCBA …
Consultor educativo…
Mostrará la siguiente salida:
3) Decoración de texto
Esta propiedad se puede usar para decorar el texto. Se puede definir mediante el uso de propiedades de subrayado, overline y line-through.
Ejemplo : ilustración de decoración de texto
Text DecorationProperty
Hola Mundo…
Bienvenido a EDUCBA …
Consultor educativo…
Mostrará la siguiente salida:
4) Transformación de texto
Esta propiedad se puede usar para cambiar los casos del texto. Se puede definir mediante el uso de mayúsculas, mayúsculas y minúsculas.
Ejemplo : ilustración de transformación de texto
Text Transformation Property
Hola Mundo…
Bienvenido a educba …
Consultor educativo…
Mostrará la siguiente salida:
5) sangría de texto
Esta propiedad se puede usar para sangrar la primera línea del texto. Se puede definir usando px, cm, pt propiedades.
Ejemplo : ilustración de sangría de texto
Text Indentation Property
Hola Mundo…
Bienvenido a Educba …
Consultor educativo…
Mostrará la siguiente salida:
6) Espaciado de palabras
Esta propiedad se puede usar para dar espacio entre palabras. Se puede definir utilizando la propiedad de espaciado de palabras.
Ejemplo : ilustración del espaciado de palabras
Word Spacing Property
Hola Mundo…
Bienvenido a Educba …
Consultor educativo…
Mostrará la siguiente salida:
7) Espaciado de letras
Esta propiedad se puede usar para dar espacio entre caracteres. Se puede definir utilizando la propiedad de espacio entre letras.
Ejemplo : ilustración del espacio entre letras
Letter Spacing Property
Hola Mundo…
Bienvenido a Educba …
Consultor educativo…
Mostrará la siguiente salida:
8) Altura de línea
Esta propiedad se puede usar para dar espacio entre las líneas. Se puede definir utilizando la propiedad de altura de línea.
Ejemplo : ilustración de altura de línea
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) es un
proveedor global líder de educación basada en habilidades
En eduCBA, es un orgullo para nosotros orientarnos al trabajo
cursos prácticos disponibles para cualquier persona, en cualquier momento y en cualquier lugar.
Mostrará la siguiente salida:
9) Dirección de texto
Esta propiedad se puede usar para cambiar la dirección del texto. Se puede definir utilizando la propiedad rtl. Establece la dirección de derecha a izquierda.
Ejemplo : ilustración de la dirección del texto
Text Direction Property
Hola Mundo … Bienvenido a Educba …
Mostrará la siguiente salida:
10) sombra de texto
Esta propiedad se puede usar para dar sombra al texto. Se puede definir utilizando la propiedad text-shadow. Utiliza componentes como la posición izquierda, la posición superior, el tamaño del desenfoque, el nombre del color.
Ejemplo : ilustración de sombra de texto
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Hola Mundo … Bienvenido a EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) es una educación basada en habilidades
Mostrará la siguiente salida:
11) Ems
Esta es una unidad escalable para dimensionamiento. Esta propiedad em se puede usar para definir el tamaño del texto de acuerdo con el texto circundante. El tamaño predeterminado del texto es 1em, que es igual a 12pt. 2em es igual a 24pt y así sucesivamente.
Ejemplo : ilustración de la propiedad ems
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Hola Mundo … Bienvenido a EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) es una educación basada en habilidades
Mostrará la siguiente salida:
12) Familia de fuentes
Esta propiedad se usa para proporcionar varios tipos de nombres de familias de fuentes para el texto seleccionado. Por ejemplo, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, etc.
Ejemplo : ilustración de la propiedad font-family
Font Family Property
Hola Mundo…
Bienvenido a Educba …
Consultor educativo…
Mostrará la siguiente salida:
Conclusión
Hasta ahora, hemos estudiado formas de formato de texto en CSS. Podría ver que el texto se presenta con diferentes tipos de propiedades de formato de texto. Estas propiedades son aspectos muy importantes de CSS para mostrar el texto en la página web de modo que los usuarios o lectores puedan atraerlo al ver su texto en el sitio web. Utilice estas propiedades de texto de manera muy fácil y efectiva en las páginas web.
Artículos recomendados
Esta ha sido una guía para el formato de texto CSS. Aquí hemos discutido una introducción y una lista de propiedades de formato de texto CSS en detalle con los ejemplos de código de muestra y la salida adecuada. También puede consultar nuestros otros artículos sugeridos para obtener más información:
- ¿Qué es el CSS?
- SASS vs CSS
- Comandos CSS
- Preguntas de la entrevista CSS3