El blockquoteelemento representa una sección que se cita de otra fuente.
El contenido dentro de a blockquotedebe citarse de otra fuente, cuya dirección, si la tiene, puede citarse en el citeatributo.
Si el citeatributo está presente, debe ser una URL válida potencialmente rodeada de espacios . Para obtener el enlace de cita correspondiente, el valor del atributo debe analizarse en relación con el documento de nodo del elemento . Los agentes de usuario pueden permitir a los usuarios seguir dichos enlaces de citas, pero están destinados principalmente para uso privado (por ejemplo, mediante secuencias de comandos del lado del servidor que recopilan estadísticas sobre el uso de citas de un sitio), no para lectores.
El contenido de a blockquotepuede abreviarse o agregarse un contexto de la manera convencional para el idioma del texto.
Por ejemplo, en inglés esto se hace tradicionalmente usando corchetes. Considere una página con la oración "Jane comió la galleta. Luego dijo que le gustaban las manzanas y el pescado"; podría citarse de la siguiente manera:
[Jane] then said she liked [...] fish.
La atribución de la cita, si la hay, debe colocarse fuera del blockquote elemento.
Ejemplo. Por ejemplo, aquí la atribución se da en un párrafo después de la cita:
I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.
— Stephen Roberts
Vamos a descartar las imágenes de símbolos tipográficos, añadiendo una con estilo CSS, veamos un ejemplo a continuación:
Empecemos
Para comenzar lo primero que vamos a hacer será crear nuestra blockquote con algo de HTML sencillo antes de añadir estilo, con un código como el siguiente:<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! <cite>Somebody famous</cite> </blockquote>Ahora algo de CSS para proporcionar un estilo básico para la cita en bloque. Dejar el estilo de navegador por defecto no se verá lo mejor posible, por lo que usaremos unos arreglos básicos de la fuente y aplicación de colores ligeros: una fuente serif más grande con un poco de espacio entre líneas adicional. Y un color un poco más claro. El gris extra oscuro agrega una variación sutil del texto del cuerpo principal.
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
Ahora viene la parte divertida: las comillas gigantes. El :beforepseudoelemento se puede usar para insertar dinámicamente contenido antes del texto del elemento y diseñar el contenido que inserta. Esto es genial para texto decorativo, como comillas estilísticas. El truco es usar una representación hexadecimal escapada del carácter deseado, y un poco de cosas de posicionamiento complicadas para que se asiente en la posición correcta.
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
Esa es la parte más difícil. Sin embargo, es posible que deba experimentar con el tamaño y la posición hasta que se vea bien. Una vez que todo se vea bien, puede aplicar la misma técnica para diseñar la cita. Con el :beforepseudoelemento, puede insertar un guión largo y un espacio antes del texto.
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
Pueden adaptar los estilos a su gusto, es cuestión de solo editar el código CSS y adaptarlo a estilo de su web o blog.Y hablando de blog, también podemos incorporar este estilo para Blockquote en Blogger solo bastaría con añadir el siguiente código antes de la etiqueta
</b:skin> de nuestro blog:
.post blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
.post blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
.post blockquote cite:before {
content: "\2014 \2009";
}
La siguiente hoja de estilo coloca comillas de apertura en cada párrafo de un BLOCKQUOTE e inserta una sola comilla de cierre al final:
blockquote p:antes {contenido: comilla abierta}
blockquote p:después {contenido: no-close-quote}
blockquote p.last:después de { contenido: close-quote }
Esto se basa en que el último párrafo esté marcado con una clase "último".
Fácil, ¿no? El efecto debería funcionar en todos los navegadores modernos e IE8. (IE8 solo procesará el pseudoelemento si su documento tiene un tipo de documento declarado, pero ya debería tener uno de esos...) En los navegadores que no lo admitan, el contenido agregado simplemente no aparecerá, dejando el texto principal de la cita en bloque (y la cita) intacta. El otro estilo permanecerá, por supuesto, por lo que aún debería verse lo suficientemente bien.
Fuentes:: Pure CSS Blockquote Styling
https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element
http://html5doctor.com
Complementario::
Cómo citar en HTML: <blockquote>, <q> y <cite>
COMO Y CUANDO USAR LAS ETIQUETAS BLOCKQUOTE, Q Y CITE
ELEMENTO BLOCKQUOTE
Videos::
