|
Los siguientes estilos se aplican a los párrafos. Podemos cambiar el alto de la línea, darle una decoración al párrafo, alinearlo, etc. Vamos a verlos más detalladamente a continuación.
Estilo text-decoration
Este estilo lo utilizaremos para darle un aspecto diferente al párrafo. Así podremos subrayarlo (underline), sobrerayarlo (overline) o tacharlo (line-through). A continuación podremos ver un ejemplo de cada uno de estos estilos. El código sería el siguiente:
| Este es el ejemplo que utilizaremos para explicar el estilo text-decoration: <span style="text-decoration:underline;">Este es el resultado de utilizar "underline</span>", <span style="text-decoration:overline;">así que da el texto utilizando "overline"</span> y <span style="text-decoration:line-through;">así quedaría el texto utilizando "line-through"</span>. |
Y el resultado que veremos a continuación salta a la vista:
| Este es el ejemplo que utilizaremos para explicar el estilo text-decoration: Este es el resultado de utilizar "underline", así que da el texto utilizando "overline" y así quedaría el texto utilizando "line-through". |
Estilo text-align
Gracias al siguiente estilo podemos alinear el texto a la izquierda (left), a la derecha (right), al centro (center) o justificarlo (justify). Vamos a ver el código de tres párrafos: uno alineado al centro, otro a la izquierda y otra a la derecha.
<div style="text-align:center;">Este texto estará alineado al centro. </div>
<div style="text-align:right;">Este texto estará alineado a la derecha. </div>
<div style="text-align:left;">Este texto estará alineado a la izquierda. </div> |
Y el resultado es evidente:
Este texto estará alineado al centro.
Este texto estará alineado a la derecha.
Este texto estará alineado a la izquierda. |
Estilo text-indent
Este estilo es muy práctico. Gracias a él podemos hacer sangrados o márgenes en los párrafos. Para ello debemos indicarle un valor numérico que será el tamaño del sangrado.
Vamos a ver el código de un ejemplo para que lo veamos más claro:
<div style="text-indent:15px;">Este texto tiene un sangrado de 15 pixeles.</div>
<div style="text-indent:60px;">Este texto tiene un sangrado de 60 pixeles.</div> |
A continuación podemos apreciar el resultado:
Este texto tiene un sangrado de 15 pixeles.
Este texto tiene un sangrado de 60 pixeles. |
Estilo text-transform
Este estilo nos permite cambiar la apariencia del párrafo. Gracias a él podemos cambiar todo el texto a mayúsculas (uppercase), todo el texto a minúsculas (lowercase) o hacer que todas las primeras letras del párrafo se conviertan en mayúsculas (capitalize).
Vamos a ver el código del ejemplo que hemos puesto para apreciar el resultado de las diferentes opciones del estilo text-transform.
| El siguiente texto va a explicarnos los diferentes resultados que podemos conseguir mediante el estilo text-transform: <span style="text-transform:uppercase;">como vemos aqui podemos hacer que todo un parrafo este en mayusculas</span> y <span style="text-transform:lowercase;">QUE TODO UN PARRAFO ESTE EN MINUSCULAS.</span> <span style="text-transform:capitalize;">Y también que las primeras letras se conviertan automáticamente a mayúsculas.</span> |
Observa el resultado a continuación:
| El siguiente texto va a explicarnos los diferentes resultados que podemos conseguir mediante el estilo text-transform: como vemos aqui podemos hacer que todo un parrafo este en mayusculas y QUE TODO UN PARRAFO ESTE EN MINUSCULAS. Y también que las primeras letras se conviertan automáticamente a mayúsculas. |
Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.
| 