Inicio Libros Tutoriales Eventos Foro Buscar

Cmo utilizar entidades HTML

en el contenido generado por
CSS
La propiedad content de CSS permite aadir dinmicamente contenidos en las pginas
HTML. Aunque siempre debe utilizarse con moderacin, es una solucin muy til para
aadir pequeos contenidos sin tener que modificar la pgina HTML y sin tener que
utilizar JavaScript para manipular la pgina.

El siguiente ejemplo aade la palabra Captulo delante de cada ttulo de seccin de

tipo <h1> :

h1:before {
content: "Captulo ";
}

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 El problema puede surgir al utilizar dentro de la propiedad content caracteres
especiales como smbolos de puntuacin y otros elementos grficos. Imagina que
quieres encerrar los elementos <blockquote> con las comillas tipogrficas y :

blockquote:before {
content: "";
}
blockquote:after {
content: "";
}

Este ejemplo funciona correctamente, pero es posible que deje de funcionar en el

futuro. El motivo es que los caracteres especiales se han escrito directamente en el
archivo CSS. As que si en el futuro alguien abre este archivo CSS con un editor que no
soporta bien la codificacin UTF-8 o si la persona que edita este archivo no tiene
cuidado, esos caracteres se perdern y la pgina ya no se ver bien.

La solucin obviamente consiste en utilizar las entidades HTML, que slo estn
formadas por caracteres seguros y que nunca se perdern ni causarn problemas.
Como la entidad HTML de es &laquo; y la de es &raquo; , la solucin parece tan
sencilla como utilizar el siguiente cdigo:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 blockquote:before {
content: "&laquo;";
}
blockquote:after {
content: "&raquo;";
}

Si pruebas ahora la pgina, vers que las entidades HTML se muestran tal y como estn
escritas, por lo que en vez de , en la pgina se ve &laquo; . Para incluir una entidad
HTML en la propiedad content , no utilices el nombre de la entidad, sino su cdigo
numrico precedido por el carcter \ .

Sabiendo que la entidad &laquo; corresponde al cdigo 00AB y la entidad &raquo; al

cdigo 00BB , el anterior ejemplo CSS se puede rehacer de la siguiente manera:

blockquote:before {
content: "\00AB";
}
blockquote:after {
content: "\00BB";
}

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 El cdigo numrico de las entidades corresponde al cdigo Unicode definido en el
estndar ISO 10646. Puedes consultar una lista de la mayora de cdigos en esta pgina
de la Wikipedia. La siguiente tabla muestra algunos de los caracteres ms utilizados:

Carcter Entidad HTML Cdigo entidad

(espacio) &nbsp; \00A0

" &quot; \0022

& &amp; \0026

&sect; \00A7

&laquo; \00AB

&raquo; \00BB

&middot; \00B7

&bull; \2022

&mdash; \2014

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 &larr; \2190

&rarr; \2192

Dentro de una misma propiedad content puedes aadir tantas entidades como quieras,
tal y como muestra el siguiente ejemplo, que aade dos espacios en blanco y una flecha
hacia la derecha a cada elemento de las listas:

ul li:before {
content: "\00A0 \2192 \00A0";
}

Comentarios
0 Comentarios LibrosWeb
1 Acceder

Ordenar por los mejores

Recomendar Compartir

S el primero en comentar...

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 S el primero en comentar.

TAMBIN EN LIBROSWEB

Cmo crear tooltips modernos solamente con CSS Los cdigos de estado de HTTP
3 comentarios hace un ao 1 comentario hace un ao
Cristyan Valera Muy buena la herramienta! Martha Villacis Excelente post. Felicitaciones muy
bueno.

La nueva extensin OPcache de PHP 5.5 Cmo hacer copias de seguridad de una base de
5 comentarios hace un ao datos MySQL
Javier Eguiluz Ral, quizs la explicacin de la 6 comentarios hace un ao
Wikipedia es ms completa al respecto:Los intrpretes Ramon Saki Yo mis copias de seguridad las
se diferencian de los compiladores temporalmente en el root y luego las subo en
automtico a S3. Luego la borro. Creo que

Suscrbete d Aade Disqus a tu sitio web Privacidad

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Fecha de publicacin
28 de agosto de 2013

ETIQUETAS POPULARES

composer css diseo html javascript php programacin sistemas symfony

SUSCRBETE GRATIS

RSS Todos los tutoriales

RSS Tutoriales de diseo

RSS Tutoriales de programacin

3.756
2006-2017 LibrosWeb.es Contacto Novedades Condiciones Privacidad

das online

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com