#CSS: Texto subrayado — Highlighted text
Este es un efecto que ya me he cruzado en varios blogs. Me parece añade un toque distinto y facilita la lectura de posts con mucho contenido, tal y como hacíamos en nuestros apuntes con los subrayadores de colores.
I have seen this CSS effect in several blogs and I really think it makes easier to read long posts. In this post I explain you how to highlight a text using CSS.
En este post os explico brevemente cómo pasar de un texto así:
Un texto cualquiera escrito en cursiva
a uno así:
Un texto subrayado que llama la atención de los lectores
Simplemente tendremos que editar el estilo de la etiqueta HTML <em> modificando los siguientes atributos:
To use this «highlight» style we only have to edit in our CSS file some attributes from the <em> HTML-Tag.
em {
background: none repeat scroll 0 0 #FDED7E;
font-style: normal;
font-weight: normal;
}
Incluyendo este trocito de código en vuestro archivo CSS los textos en cursiva pasarán a ser texto subrayado. En caso de que queráis utilizar este estilo sobre otras etiquetas HTML y no dejar de disponer de un estilo de texto en cursiva, podéis darle un nombre de vuestra elección y referenciarlo con el atributo class. Por ejemplo:
Including the previous CSS code in the CSS file used by your blog theme, all your text in italics became automatically highlighted. If you don’t want this effect, and you only need to highlight some of your text, you can define a css class and use it in a class attribute.
.highlighted {
background: none repeat scroll 0 0 #FDED7E;
font-style: normal;
font-weight: normal;
}
Y en el texto que queremos resaltar utilizaremos la clase ya definida:
Más consejos y recursos para bloggers en {All my Blogging}
More tips and resources for blogger in {All my Blogging}