Guía para dar formato al texto en CSS

Al diseñar un sitio web, el formato del texto es un aspecto importante para crear una interfaz atractiva y legible.

CSS proporciona varias propiedades que le permiten personalizar varios elementos de texto, incluido el color de fuente, el tamaño, la familia, la alineación, el espaciado y más.

A continuación se muestra una guía detallada sobre cada propiedad de formato de texto, junto con ejemplos de cada propiedad.

 

Color de fuente

Parámetro: un valor de color, que puede ser un nombre de color(p. ej., red), código hexadecimal(p. ej., "#FF0000"), valor RGB(p. ej., "rgb(255, 0, 0)") o valor RGBA(p. ej.,, "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Tamaño de fuente

Parámetro: un valor de tamaño, que puede estar en píxeles(p. ej., "16px"), unidades em(p. ej., "1em"), unidades rem(p. ej., "1.2rem"), unidades de ancho de ventana gráfica(p. ej., "10vw"), unidades de altura de ventana gráfica(p. ej., "5vh") u otras unidades.

h1 {  
  font-size: 24px;  
}  

 

Familia tipográfica

Parámetro: una lista de familias de fuentes, especificada en el orden preferido. Puede especificar el nombre de la fuente(p. ej., Arial) o encerrar nombres de fuentes que contengan caracteres especiales entre comillas dobles(p. ej., " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Peso y estilo de fuente

Parámetro font-weight: normal(default), bold, , o valores numéricos de 100 a 900 bolder. lighter

parámetro font-style: normal(default), italic _

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Decoración de texto

Parámetro: "none"(default), "underline", "overline", "line-through"  o una combinación de valores separados por espacios.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Alineación del texto

Parámetro: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Altura de línea y márgenes

Parámetro line-height: un valor numérico o un porcentaje del tamaño de fuente actual.

Margen de parámetro: un valor de medición, como píxeles(px), unidades em(em), unidades rem(rem), etc.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Diseño de texto de varias columnas

Parámetro: Un entero positivo o "auto"(default).

.container {  
  column-count: 2;  
}  

 

Cambio de color de texto al pasar el mouse

Sin parámetro específico, solo use la pseudo-clase :hover.

a:hover {  
  color: red;  
}  

 

Cambio de color de texto en estado(activo, visitado)

Sin parámetro específico, solo use las pseudoclases :active  y :visited.

a:visited {  
  color: purple;  
}  

 

Esperamos que las explicaciones y los ejemplos anteriores le hayan ayudado a comprender cómo usar y personalizar las propiedades de formato de texto en CSS para crear una interfaz de texto visualmente atractiva y atractiva en su sitio web.