Algunos de nosotros creemos que el formato de texto es básico, pero es fundamental para darle un toque distinto a nuestro texto, ya sea resaltando palabras con color, subrayado, tamaño, tipo de letra etc., para lo cual en esta entrada, vamos a ver diferentes ejemplos de formato de texto.
Texto teletipo
<tt>Texto teletipo</tt>
Texto especial
<var>Texto especial</var>
Si vemos el texto con fondo azul, es porque lo estoy utilizando para los codigos fuera del recuadro.
Texto normalTexto Superíndice
Texto normal<b>Texto Superíndice</b>
Texto normalTexto Subíndice
Texto normal<b>Texto Subíndice</b>
Texto en negrita
<b>Texto en negrita</b>
Texto en cursiva
<i>Texto en cursiva</i>
Texto subrayado
<u>Texto subrayado</u>
Texto con línea arriba
Este resultado generado, es por medio de la etiqueta <span>:
<span style="text-decoration: overline;">
Texto con línea arriba
</span>
Texto con línea arriba y abajo
Si checas, están fusionados los dos códigos anteriores, la etiqueta <u> con <span>:
<span style="text-decoration: overline;"><u>
Texto con línea arriba y abajo
</u></span>
<s>Texto tachado</s>
El siguiente formato de texto se lleva a cabo con la etiqueta <h1,2,3,4,5,6>:
Texto
<h6>Texto</h6>
Texto
<h5>Texto</h5>
Texto
<h4>Texto</h4>
Este texto se mira asi por que es el que estoy utilizando en la sidebar el blog:
Texto
<h3>Texto</h3>
Texto
<h2>Texto</h2>
Texto
<h1>Texto</h1>
Ahora estos son con las etiquetas: <small>, <strong> y <big>:
Pequeñita
<small>Pequeñita</small>
Grande
<strong>Grande</strong>
Mas grande
<big>Mas grande</big>
Mas grande aun
Aquí se duplica el código anterior:
<big><big>Mas grande aun</big></big>Pero no conformes necesitamos otro tipo de letra, con color y más grande, para ello a continuación te muestro los siguientes ejemplos hechos con la etiqueta <span>:
Texto mas grande.
En este ejemplo, solo modifica el
tamaño de la letra:
<span style=' font-size:30pt;'>Texto mas grande.</span>Texto mas grande, con color.
Ahora el mismo ejemplo anterior pero con color:
<span style='font-size:30pt; color:#FFCC00;'>
Texto mas grande, con color.
</span>
Texto mas grande, con color y tipo de letra.
A este le sumamos el tipo de letra:
<span style=' font-family:Forte; font-size:30pt; color:#FFCC00;'>
Texto mas grande, con color y tipo de letra.
</span>
Texto mas grande, con color, tipo de letra y bordes.
y a este le sumamos un borde y colocamos la propiedad line-height para el segundo renglon:
<span style='font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra y bordes.
</span>
Texto mas grande, con color, tipo de letra, bordes y color de fondo:
Como ves en este ejemplo, le agregamos un color de fondo.
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra, bordes y color de fondo.
</span>
Texto mas grande, con color, tipo de letra, bordes e imagen de fondo.
Para ponerle una imagen, solo cambia:
<span style=' background-image: url(Url-de-tu-imagen); font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra, bordes e imagen de fondo.
</span>
Te dejo un último ejemplo pero ahora con palabras, bordes, tipos de letra y fondos coloridos o con imágenes diferentes:
Textoconpalabras,bordes,tiposdeletrayfondoscoloridosoconimagenesdiferentes.
Este seria el código del ejemplo:
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>Texto</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>con</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt;color:#CCCCCC;border: 2px solid #660000; line-height: 1.3em;'>palabras,</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00;border: 2px solid #006699; line-height: 1.3em;'>bordes,</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>tipos</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>de</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>letra</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>y</span>
<span style='background-color:#5a3100; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>fondos</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>coloridos</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>o</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>con</span>
<span style='background-image:url(Url-de-tu-imagen); font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>imagenes</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>diferentes.</span>
Lo único que queda, es personalizarlos a nuestro gusto.
Ojala y te sean de gran utilidad.
