Estás mirando la versión 3 de mi sitio web, para ver la última versión por favor anda a juque.cl

juque

Juan Pablo Aqueveque: Ingeniero de Sistemas, Diseñador y Desarrollador Web que reside en Temuco, Chile.

CSS: Estilizando el BLOCKQUOTE

Publicado por Juan Pablo el 29.Jun.2005 | Comentarios (5)

Antes que atacar el título de esta entrada me aprovecharé del pánico para hacer algo de evangelización sobre el estándar XHTML.

Es muy común ver el mal uso del elemento de bloque blockquote, por ejemplo es incorrecto hacer esto:

<p>ameba:</p>
<blockquote>
<p>Protozoo rizópodo, sin cutícula y con seudópodos incapaces de unirse entre sí</p>
</blockquote> <p>gagá:</p>
<blockquote>
<p>Dícese de la persona de edad que ya ha perdido parte de sus facultades mentales, lelo</p>
</blockquote>

blockquote, block + quote, bloque de cita o cita larga y no de definiciones, lo semánticamente correcto para lo enterior es:

<dl>
<dt>ameba:</dt>
  <dd>Protozoo rizópodo, sin cutícula y con seudópodos
  incapaces de unirse
  entre sí</dd>
<dt>gagá:</dt>
  <dd>Dícese de la persona de edad que ya ha perdido 
  parte de sus facultades 
  mentales, lelo<dd>
</dl>

Pastelero a tus pasteles

Por si no lo sabías el XHTML dispone de listas de definiciones: dl, dt y dd, para más información dele una mirada a las especificaciones HTML 4.01. Por otro lado la etiqueta blockquote se utiliza para citas de texto extensas, para pequeñas citas puedes usar el elemento de línea <q>. Ejemplo:

...de pronto Tamburrino dijo yo pinto.

...de pronto Tamburrino dijo <q>yo pinto</q>

Dándole estilo al blockquote

Primero necesitamos dos imágenes. Con tu editor favorito crea dos archivos de imágenes con los nombres:

abre comillas: abre-comillas.gif

cierre comillas: cierre-comillas.gif

Para citar un texto utilizamos el siguiente XHTML:

<blockquote>
Una regla CSS consta de dos partes principales: un selector 
('H1') y una declaración ('color: blue'). La declaración tiene 
dos partes: una propiedad ('color') y un valor ('blue').
</blockquote>

Para dar el efecto de abertura y cierre de comillas debemos agregar una etiqueta div al interior del blockquote para disponer de una combinación blockquote div y otra div blockquote.

<blockquote>
<div>
Una regla CSS consta de dos partes principales: un selector 
('H1') y una declaración ('color: blue'). La declaración tiene 
dos partes: una propiedad ('color') y un valor ('blue').
</div>
</blockquote>

Ahora bien, la correspondiente regla de estilo que terminará de hacer el trabajo es:

blockquote div	{
  background: url('abre-comillas.gif') no-repeat 0 2%;
}
div blockquote	{
  background: url('cierra-comillas.gif') no-repeat 98% 98%
}

Resultado final:

Una regla CSS consta de dos partes principales: un selector ('H1') y una declaración ('color: blue'). La declaración tiene dos partes: una propiedad ('color') y un valor ('blue').

Como colofón debo decir que ésta es una alternativa entre muchas otras que pueden encontrarse por ahí. Hasta la próxima entrega CSS.

Enlace Permanente, Comentarios (5), Publicada en: CSS

Comentarios

1. newdisco
29.Jun.2005

como siempre muy buen dato ;)

2. Nelson Rodríguez-Peña
29.Jun.2005

Bien dicho Juque, me gusta la parte evangelizadora :D

3. Camuss
29.Jun.2005

Leido el evangelio...salgo ahora para evangelizar maestro...

Un saludo.. Buen tip..

4. Gonzalo
30.Jun.2005

Muy buen articulo ;) tomaré en cuenta el tip a la próxima que rediseñe. Saludos ñ_ñ

5. Funk
30.Jun.2005

Ya está aplicado a mi blog. Muchas Gracias :)