lunes, 2 de mayo de 2016

Destacar texto en una entrada usando colores

Si lo que pretendemos es destacar un trozo de texto que nos interese poniendole color de fondo, es bastante sencillo.
Hemos de añadir <span style="background-color:orange"> delante de la palabra o frase que deseamos resaltar. En el ejemplo yo he puesto el color naranja (orange) pero podemos poner el que necesitemos en ese momento o nos guste más. Para cerrar la frase a resaltar la terminamos con </span>. Podemos hacerlo incluso en el título de la entrada.

La frase, frases o palabras a resaltar han de ir entre <span style="background-color=orange"> y </span>

Si preferimos resaltar un trozo de texto para que nos quede con efecto de "cajita" usaremos este otro código, ponéis el texto a resaltar entre <div style="margin:0px auto;width:250px;text-align:left;padding:10px;background-color:orange;border:1px solid black;"> y </div>, se vería así:

ANTES DE HACER NINGUNA PRUEBA CON LOS CÓDIGOS, RECUERDA GUARDAR SIEMPRE TU PLANTILLA, NUNCA SE SABE SI ALGO SALDRÁ MAL.

En el código cambiamos el grosor del borde, color del borde, distancia, color de fondo, del texto...a nuestro gusto.

Fácil ¿no os parece?
Otra ópcion sería emplear siempre el mismo color, para conseguirlo empleamos CSS:
Añadimos estas líneas de código en el CSS de nuestra plantilla:
span.highlight
{
background-color:#CC0000
}
Y cada vez que queramos resaltar un texto con un fondo de color, lo ponemos entre <span class="highlight">Texto a resaltar</span>
Si no queremos el fondo, sino solo cambiar el color del texto, en el añadido del CSS, eliminamos background-.
Por supuesto, en #CC0000, sustituimos por el código de color que nos guste más.
Para tenerlo a mano a la hora de editar nuestra entrada, podemos pegarlo en plantilla-opciones-formato-caja de plantilla de entrada.

No hay comentarios:

Publicar un comentario