En "Swooshy Curly Quotes Without Images" de "24 Ways", se explica como utilizar CSS únicamente (sin necesidad de imágenes) para poner las comillas a las citas. El problema es que tienes que, cada vez que haces una cita y por tanto haces uso de la etiqueta
<blockquote><span class="bqstart">"</span>Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.<span class="bqend">"</span>
Esto resulta muy molesto de hacer cada vez que tengamos que citar, si en nuestra web o blog lo vamos a hacer con cierta frecuencia. Para evitar esta molestia, podemos incluir una pequeña función javascript que nos incluya tanto las comillas como su clase correspondiente.
CSS
blockquote {
font: 12px "Lucida Sans Unicode", Verdana, Arial, Georgia;
color: #555;
margin-left:40px;
margin-right:40px;
padding-left:20px;
padding-right:20px;
}
.ComillasInicio {
float: left;
font-size: 500%;
font-family:Georgia, "Times New Roman", Times, serif;
color: #FF0000;
margin-left:-30px;
}
.ComillasFinal {
float: right;
font-size: 500%;
font-family:Georgia, "Times New Roman", Times, serif;
color: #FF0000;
margin-top: -75px;
margin-right: -30px;
}
javascript:
function EstiloComillas(id) {
//Recibo todas las citas que haya en la web
var Citas = document.getElementsByTagName("Blockquote");
//Por cada una de ellas
for (k = 0; k< Citas.length; k++) {
//Defino una función que contiene la cita
var TextoEntreComillas = Citas[k].innerHTML
//Le sumo las comillas, cada una con su clase
Citas[k].innerHTML = '<span class="ComillasInicio">“</span>' + TextoEntreComillas + '<span class="ComillasFinal">„</span>';
}
}
Con este método únicamente deberemos englobar nuestra cita entre dos etiquetas blockquote y la función en javascript se encarga de las comillas y asignar el CSS correspondientemente. Evidentemente la llamada de la función debería hacerse a la carga de la página.




