Formato de texto en CSS explicado
El formato de texto comprende propiedades como color, alineación, decoración, sangría, espaciado y muchos más. El propósito de esta guía es iluminar la importancia del formato de texto en CSS y explorar las propiedades que se pueden usar para el formato de texto.
Se admite qué tipo de formato de texto en CSS?
El formato de texto está asistido por varias propiedades que se describen aquí y la sintaxis de estas propiedades también está definida.
Alineación: Alinea el texto usando la sintaxis escrita a continuación.
selector text-align: value;El valor del alineado de texto puede ser:
- Derecha: el texto estaría en el lado derecho del elemento
- Izquierda: el margen izquierdo de las líneas es recto
- Centro: el texto estaría en el centro y los márgenes izquierdo/derecho serán iguales
- Justificar: el texto se organiza de manera que los márgenes izquierdo y derecho se mantengan rectos e iguales
Ejemplo:
El texto está alineado con la izquierda
El texto está centrado alineado
El texto está alineado correctamente
El texto está justificado
Se crean cuatro clases de CSS, la clase "izquierda" representa la alineación de texto a la izquierda. Del mismo modo, los "derecho", "centavo" y "justo" se utilizan para alinear el texto con la derecha, centrada y justificada.
Producción
Espaciado de letras: Se usa para definir el espacio entre las letras de una palabra en PX, EM, MM o CM.
Selector espacio-espacio: valor;Ejemplo: Para verificar la funcionalidad de la propiedad de espacios de letras, hemos utilizado el siguiente código.
El espaciado de letras es 5px
El espaciado de las letras es 0.5em
El espaciado de letras es de 1 mm
En el código anterior, las clases CSS se crean para establecer el espacio entre letras en PX, EM y MM.
Producción
Espaciado de palabras: Esta propiedad se usa para agregar espacio entre las palabras de una línea.
Selector Espacio de palabras: valor;Ejemplo: La propiedad de espaciado de la palabra se proporciona utilizando las siguientes líneas de código.
Cada palabra estará separada por 10px
Se crea una clase CSS para crear un espacio de 10 px entre palabras.
Producción
Color: Esto define el color del texto que se usa con la ayuda de seguir la sintaxis.
Selector color: valor;El valor de la propiedad de color puede ser,
- nombre del color i.mi., naranja roja
- Valor hexadecimal del color (#00000)
Ejemplo: El que se proporciona a continuación se ejerce para establecer el color del
texto a rojo.
Bienvenido a Linuxhint
Producción
Decoración: La decoración se lleva a cabo para realizar acciones en texto como subrayar, línea a través, sobreline y ninguno.
Selector Decoración de texto: valor;El valor puede ser uno de los siguientes
- Línea: se coloca una línea horizontal en el texto
- Overline: una línea se dibuja sobre el texto
- subrayar: la línea horizontal se coloca debajo de la línea
- Ninguno: no se colocaría ninguna línea
Ejemplo:
texto subrayado
línea a través del texto
texto superpuesto
El código anterior se compone de tres clases CSS y tres párrafos. Las clases CSS "Un", "LT" y "OV" representan el estilo de decoración y se usan en tres párrafos diferentes.
Producción
Sangría: La sangría de CSS se realiza en sangría (manteniendo el texto en un espacio específico desde el margen) la primera línea de párrafo.
selector text-indent: value;El valor puede estar en MM, CM, EM, PX.
Ejemplo: Aquí, hemos aplicado la propiedad de sangría (en PX, EM y CM) en varios párrafos del código.
La sangría se establece en 25px
La sangría se establece en 1EM
La sangría se establece en 1 cm
El código anterior contiene tres clases de CSS, y cada clase anima el texto en una unidad de medición diferente.
Producción
Transformación: El caso del texto se gestiona utilizando la propiedad de transformación seguida de la sintaxis dada aquí.
selector text-transform: value;El valor puede ser uno de los siguientes
- mayúscula: cambiar las letras a mayúsculas
- minúsculas: cambia las letras a minúsculas
- capitalizar: se utiliza para capitalizar la primera letra de cada palabra
Ejemplo: Puede verificar la funcionalidad de la transformación de texto del código declarado a continuación.
Convertir en caso inferior
Convertir en el caso superior
La primera palabra será cautiva
El código indicado anteriormente contiene tres clases de CSS que se supone que transforman el texto del párrafo en la forma más baja, superior, y capitaliza la forma de capitalizar.
Producción
Altura de la línea: La altura de las líneas de texto se puede definir utilizando la propiedad de altura de línea en PX, CM, EM y MM.
Selector Line-Height: Value;Ejemplo: Las siguientes líneas de código muestran el uso de la propiedad de altura de línea para ajustar la altura de las líneas de texto.
La altura de la línea es 25px
La altura de la línea es 2em
La altura de la línea es de 1 cm
El código anterior usa la altura de línea en PX, EM y CM. Además, el estilo fronterizo de los párrafos se establece en sólido (para comprender mejor el concepto de altura de la línea).
Producción
Dirección del texto: La dirección de escritura del texto en CSS se puede administrar utilizando la propiedad de dirección.
Selector Direction: Value;El valor puede ser RTL (de derecha a izquierda), LTR (de izquierda a derecha), inicial () y heredar (obtenida del elemento principal).
Ejemplo:
La dirección del texto es de derecha a izquierda
Se crea una clase CSS que le permite establecer la dirección de derecha a izquierda.
Producción
Sombra de texto: La sombra del texto se practica agregando sombra con varias propiedades.
Selector Shadow de texto: value1 value2 value3;Los valores se describen de la siguiente manera
- el valor1 representa el tamaño horizontal de la sombra
- Value2 define el tamaño vertical de la sombra
- Value3 se usa para colores de la sombra y puede ser el nombre exacto del color, la combinación RGB/RGBA de un color, el valor hexadecimal de un color.
Ejemplo: El siguiente código establece una sombra vertical y horizontal de color.
Se da una sombra roja de 1px
Se crea una clase CSS llamada "SH" que crea una sombra roja de 1 ppx de grosor en el texto proporcionado.
Producción
Después de pasar por esta sección, habría obtenido la comprensión de varias propiedades de formatamiento del texto proporcionadas por CSS.
Conclusión
El formato de texto en CSS le permite embellecer el texto utilizando las propiedades. Este artículo proporciona el trabajo y el uso de todas las propiedades de formato de texto admitidas por CSS. Cada propiedad se guía por la sintaxis que sigue y también se proporciona un ejemplo para comprender su uso. Esta guía completa le permitiría aplicar todo tipo de posibles formatear en el texto en CSS.
Manténgase conectado con Linuxhint para obtener guías más informativas en CSS y HTML.