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>
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>
blockquote
Primero necesitamos dos imágenes. Con tu editor favorito crea dos archivos de imágenes con los nombres:
: abre-comillas.gif
: 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
Bien dicho Juque, me gusta la parte evangelizadora :D
Leido el evangelio...salgo ahora para evangelizar maestro...
Un saludo.. Buen tip..