#CSS: Texto subrayado — Highlighted text

all my blogging css subrayadoEste 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:

<em class=”highlighted”> Highlighted text <em>

 

Más consejos y recursos para bloggers en {All my Blogging}

More tips and resources for blogger in {All my Blogging}

HAPPY BLOGGING!!

Encantada de leer tus comentarios. Déjalos aquí..

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close