Aplicar formato a un texto.
Resumen.
En este artículo veremos como aplicar formato a un texto dándole un aspecto tan elegante como nuestra imaginación permita. Con CSS esto es muy fácil, tenemos muchas propiedades que combinándolas adecuadamente, le darán a nuestros textos un aspecto muy distinguido.Artículo.
Para darle formato a un texto en HTML no había muchas opciones, pero CSS nos brinda unas opciones que nos permiten configurar cualquier aspecto de nuestros textos. Las propiedades que vamos a presentar de manera destacada son las siguientes:
También presentamos una nueva etiqueta, <span>palabra</span> que nos permite aplicar un formato concreto a una parte del texto, como por ejemplo, ponerlo en negrita. Para definir las propiedades de esta etiqueta la hacemos mediante el atributo class. La propiedad font-weight con valores comprendidos entre 100 y 900 nos permite graduar la intensidad de la negrita.
Así nuestro código quedaría de la siguiente manera:
- letter-spacing.- Nos permite determinar la separación entre cada una de las letras de nuestro texto.
- word-spacing.- Si bien la propiedad anterior condiciona la separación entre palabras ya que los espacios en blanco los hace proporcionales a la separación de las letras, también podemos determinar el tamaño de los espacios en blanco, es decir, la separación entre las palabras.
- line-height.- Dado que podemos separar las letras y las palabras, la separación entre las líneas de nuestro texto deben ir en consonancia con las anteriores, esto nos lo permite esta propiedad.
- text-indent.- La sangría, o comienzo desplazado hacia la derecha de cada párrafo esto otro aspecto que nos permite configurar CSS para dar un formato elegante a nuestros textos.
También presentamos una nueva etiqueta, <span>palabra</span> que nos permite aplicar un formato concreto a una parte del texto, como por ejemplo, ponerlo en negrita. Para definir las propiedades de esta etiqueta la hacemos mediante el atributo class. La propiedad font-weight con valores comprendidos entre 100 y 900 nos permite graduar la intensidad de la negrita.
Así nuestro código quedaría de la siguiente manera:
Y esto es todo amigos, por supuesto que hay muchas más opciones para aplicar formato a un texto, pero aquí nos hemos limitado a las más elementales y así vamos mostrando las potencialidades de CSS.<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Formato para un texto. ArtesaniaWeb.ES</title> <script> <!-- --> </script> <style> <!-- .texto{ font-family: Tahoma; /* para el tipo de letra */ font-size: 1.5rem; /* para el tamano de las letras */ color: #312E2F; /* para el color de las letras */ letter-spacing: 0.4rem; /* para separacion entre letras */ word-spacing: 0.8rem; /* para separacion entre palabras */ line-height: 3rem; /* para la separacion entre lineas */ text-indent: 3rem; /* para sangrias */ } .negrita{ font-weight: 900; } --> </style> </head> <body> <div class="texto">Para darle <span class="negrita">formato a un texto en HTML</span> no habia muchas opciones, pero CSS nos brinda unas opciones que nos permiten configurar cualquier aspecto de nuestros textos. Las propiedades que vamos a presentar son las siguientes:</div> </body> </html>
Tags: Formato || sangrías || líneas || negrita