El texto es importante, incluso para los diseños web más sofisticados y visualmente exigentes. Dale a tu texto la atención que se merece con estas propiedades CSS.

Las hojas de estilo en cascada (CSS) describen cómo HTML muestra los elementos en la pantalla. CSS puede controlar el diseño de varias páginas web con unas pocas líneas de código.

CSS tiene propiedades de formato que afectan el espaciado, la apariencia y la alineación del texto. Aquí hay algunas propiedades que puede usar para aplicar estilo al texto en las páginas de su aplicación.

1. Color de texto

El color La propiedad especifica el color de primer plano principal de su texto. Puede usar un nombre de color predefinido como rojo, blanco, o verde. También puede usar un valor hexadecimal u otras unidades como RGB, HSL y RGBA.

Marcos CSS como CSS viento de cola tienen una función de color incorporada que muestra una variedad de tonos. Esto hace que sea más fácil para usted seleccionar el tono que prefiera. Cambiemos el color de los siguientes encabezados usando algunas de estas propiedades:

instagram viewer 
<cuerpo>
<h1>cambiar mi colorh1>
<h2>cambiar mi colorh2>


<h3>cambiar mi colorh3>
<h4>cambiar mi colorh4>
cuerpo>

El CSS se verá así:

h1 {
color: naranja;
}
h2 {
color: #ff6600;
}


h3 {
color: RGB(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}

Y el texto con estilo aparecerá así:

2. Color de fondo

Puedes usar el color de fondo propiedad para crear fondos atractivos. Úselo para establecer diferentes fondos para los siguientes encabezados:

<cuerpo>
<h1>Cambiar mi color de fondoh1>
<h2>Cambiar mi color de fondoh2>


<h3>Cambiar mi color de fondoh3>
<h4>Cambiar mi color de fondoh4>
cuerpo>

Con el siguiente CSS:

h1 {
color de fondo: naranja;
}
h2 {
color de fondo: #009900;
}


h3 {
color de fondo: RGB(204, 0, 0);
}
h4 {
color de fondo: hsl(60, 100%, 50%);
}

Cuando su navegador muestre esta página, se verá así:

3. Alineación del texto

El texto alineado La propiedad establece la alineación horizontal del texto. Este valor puede ser izquierda, bien, centro, o justificar.

El valor de justificación estira cada línea de texto, por lo que todas ocupan el mismo ancho en los márgenes derecho e izquierdo. Utilice el siguiente código de muestra para explorar estos cuatro valores:

<cuerpo>
<h1>Alinearme a la izquierdah1>
<h2> Alinéame a la derechah2>


<h3>Alinearme al centroh3>


<pagclase="ex4"><fuerte>Alinearme justificadofuerte>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.pag>


<pag><fuerte>Sin alineación fuerte>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.pag>
cuerpo>

Use el siguiente CSS para aplicar diferentes alineaciones:

h1 {
texto alineado: izquierda;
}
h2 {
texto alineado: bien;
}


h3 {
texto alineado: centro;
}
.ex4{
texto alineado: justificar;
}

En el navegador, esto aparecerá así:

4. Dirección del texto

El dirección del texto La propiedad define la dirección del texto. Definir la dirección usando propiedades rtl (de derecha a izquierda) o litros (de izquierda a derecha). Estos dos especifican en qué dirección desea que fluya el texto.

Por ejemplo, use rtl cuando se trabaja con idiomas escritos de derecha a izquierda como el hebreo o el árabe. Tu usas litros para idiomas escritos de izquierda a derecha como el inglés.

Ilustremos esto con el siguiente código:

<cuerpo>
<división>
<pagclase='ex1'>Este párrafo va de derecha a izquierda. el cursor
 se mueve de derecha a izquierda cuando escribe más información en el
 página.pag>
<pagidentificación="ex2">Este párrafo va de izquierda a derecha. el cursor se mueve
 desde la izquierda para escribir cuando escriba más información en la página!pag>
división>
cuerpo>

Con este CSS adjunto:

.ex1 {
dirección: rtl;
}
#ex2 {
dirección: litros;
}

El resultado final será algo como esto:

5. Decoración de texto

El decoración de texto La propiedad establece la apariencia de las líneas decorativas en el texto. es una abreviatura de línea de decoración de texto,texto-decoración-color,estilo de decoración de texto, y texto-decoración-grosor propiedad. Si no desea tener la propiedad sobre elementos que tienen enlaces, use texto-decoración: ninguno;

Debe evitar subrayar el texto normal ya que ese estilo generalmente indica un enlace. La siguiente ilustración muestra algunos ejemplos en código:

<cuerpo>
<h1>Decoración de texto superpuestoh1>
<h2>Decoración de texto de línea directah2>


<h3>Decoración de texto subrayadoh3>


<pagclase="ex">Decoración de texto subrayado y subrayado.pag>
<pag><ahref="predeterminado.asp">este es un enlacea>pag>
cuerpo>

Puedes aplicar varios efectos de decoración con este CSS:

h1 {
decoración de texto: superposición;
}
h2 {
decoración de texto: línea directa;
}


h3 {
decoración de texto: subrayar;
}


pag.ex {
decoración de texto: superposiciónsubrayar;
}
a {
decoración de texto: ninguno;
}

Y mostrarán algo como esto:

6. Transformación de texto

El transformación de texto La propiedad especifica el tipo de mayúsculas y minúsculas en las que aparecen las letras. Esto puede ser en letras mayúsculas o minúsculas. También puede usarlo para poner en mayúscula la primera letra de cada palabra:

El siguiente ejemplo muestra cómo hacerlo en código:

<cuerpo>
<h1>Ejemplos de propiedad de transformación de textoh1>
<pagclase="mayúsculas">Esta oración está en mayúsculas.pag>


<pagclase="minúsculas">Esta oración está en minúsculas.pag>
<pagclase="capitalizar">Escriba en mayúscula este texto.pag>
cuerpo>

El archivo CSS:

pag.mayúsculas {
transformación de texto: mayúscula;
}
pag.minúsculas {
transformación de texto: minúsculas;
}
pag.capitalizar {
transformación de texto: capitalizar;
}

Con el siguiente resultado:

7. Espaciado de letras

El espaciado de letras La propiedad especifica el espacio entre las letras en el texto. El siguiente ejemplo ilustra cómo especificar diferentes estilos de espaciado.

<cuerpo>
<h1>Ejemplos de espaciado entre letrash1>
<h2>Este es el encabezado 1h2>
<h3>Este es el encabezado 2h3>
cuerpo>

Use píxeles u otras unidades de medida en su archivo CSS:

h2 {
espaciado de letras: 7píxeles;
}
h3 {
espaciado de letras: -2px;
}

Y el texto resultante se estirará o apretará:

8. Espaciado entre palabras

El espacio entre palabras propiedad especifica el espacio entre las palabras en un texto. Los navegadores tienen una longitud estándar para el espacio entre las palabras, pero puede establecer la suya propia. El siguiente ejemplo ilustra cómo aumentar o disminuir el espacio entre palabras:

<cuerpo>
<h1>Ejemplos de la propiedad de espaciado entre palabrash1>
<pag>Espaciado normal entre palabras.pag>


<pagclase="ex1">Espaciado entre palabras grande.pag>
<pagclase="ex2">Espaciado entre palabras pequeño.pag>
cuerpo>

Usando este CSS:

pag.ex1 {
espacio entre palabras: 1movimiento rápido del ojo;
}
pag.ex2 {
espacio entre palabras: -0.3rem;
}

Puede ver claramente el efecto del espacio entre palabras:

efecto de espacio entre palabras en el texto9. Altura de la línea

El altura de la línea La propiedad especifica el espacio entre líneas en un párrafo. La altura de línea estándar y predeterminada en la mayoría de los navegadores es de aproximadamente 110% a 120%. El siguiente código ilustra cómo cambiarlo:

<cuerpo>
<h1>Usando altura de líneah1>
<pag>
 Altura de línea estándar.


 Altura de línea estándar.


pag>


<pagclase="pequeño">
 Pequeña altura de línea pequeña.


 Altura de línea pequeña


pag>


<pagclase="grande">
 Mayor altura de línea.


 Mayor altura de línea.
pag>
cuerpo>

Usando el siguiente CSS:

pag.pequeño {
altura de la línea: 0.7;
}
pag.grande {
altura de la línea: 1.8;
}

Puedes ver los resultados entre cada línea en cada párrafo:

efecto de la propiedad lineheight en el texto10. Sombra de texto

El sombra de texto La propiedad aplica sombras al texto. Tienes que especificar la sombra horizontal y la sombra vertical. Sombra de texto puede incluir color y radio de desenfoque. Ilustremos eso con el siguiente código:

<cuerpo>
 <h1>EjemplosdeSombra de textoefecto.h1>
 <h1clase="ex1">Sombra de textoconcolorh1>
 <h1clase="ex2">Sombra de textocondifuminarefecto.h1>
cuerpo>

Con este CSS:

h1 {
 sombra de texto: 2px 2px;
}
.ex1 {
 sombra de texto: 2px 2px naranja;
}
.ex2 {
 sombra de texto: 2px 2px 10px rojo;
}

Producirá algunos efectos inusuales e interesantes:

¿Por qué aprender las propiedades de estilo de texto CSS?

CSS es la columna vertebral del diseño web moderno. Ya sea en su forma estándar o en marcos, la función básica de las propiedades CSS es la misma. El dominio de las propiedades de formato de texto le permite crear interfaces de usuario atractivas y legibles.

La última versión de CSS, CSS3, introduce nuevos conceptos, desde animaciones hasta diseños de varias columnas. Estos conceptos facilitan la creación de aplicaciones y documentos profesionales.