Bronnen voor Styling blockquotes

05 augustus 2008 door chriscoyier · 2 Commentaren

De meeste websites, vooral als ze zijn blogs, zal komen over de noodzaak van een blok citaat op een of ander moment. Dat is gewoon de onderlinge koppeling goede geest van het web! Blok citaten zijn een manier om tekst op te nemen op een pagina die rechtstreeks is overgenomen uit een andere website (of andere bron). HTML biedt ons de perfecte element voor een dergelijke missie, de <blockquote>

Zonder CSS toegepast op een pagina helemaal niet, de meeste browsers hebben standaard styling toegepast om dit element, om te helpen het te onderscheiden van andere blokken tekst. Firefox maakt gebruik van de volgende styling standaard:

blockquote { display: block; margin: 1em 40px; }

Dit is echter niet consistent tussen browsers, dus de meeste "CSS Resets" omvatten reset styling om dit alles te verwijderen. Je moet zeker overwegen om een aantal styling terug in maar, voor uw blockquotes. Ik hou van eenvoudige ontwerp, dus laat me met u delen een van mijn favoriete stylings voor blockquotes:

 blockquote { border-left: 30px solid #d9d9d9; padding-left: 10px; font-family: georgia, serif; font-style: italic; }

Deze stijl is gewoon een gezonde streepje met een lichte grijze blok aan de linkerkant. Eenvoudig en elegant:

Er zijn natuurlijk vele vele manieren om stijl blockquotes. Van eenvoudig tot, uit te werken van groot naar klein, van intens naar ingetogen. Veel dingen om te overwegen. "Pull quotes" zijn blockquotes broeders. Er is geen speciale HTML-element voor de pull quotes, maar ze worden gebruikt op vrijwel dezelfde manier, in te stellen elkaar een blok tekst. Het verschil is dat de pull citaat tekst wordt genomen uit de zeer artikel wordt gepresenteerd. Dit brengt verschillende uitdagingen.

Hier is een lijst van middelen die er zijn voor de styling, behandeling, en anders omgaan met blockquotes en trek quotes.

DE BASIS & SPECIFICATIES

HTML Hond: Blockquote
W3C: Blockquote specs (samen met de "q" element, blockquotes inline broertje)
Wikipedia: Blockquote
W3 Schools: Blockquote

Niet veel te weten over het blockquote element, andere dan de optionele attribuut "citeren", dat is de URI dat het citaat vandaan komt. De cite attribuut heeft geen invloed op de stijl of functionaliteit van de blockquote.

Razzia's

Blok Citaten en Pull Quotes: voorbeelden en goede praktijken

Trek Quotes (23 voorbeelden)

Pattern Tap: blikvangercitaten (Er is niet nauwelijks iets hier nog niet, maar Pattern Tap is de perfecte plaats om een verzameling te starten voor dit soort dingen.)

Reacties

2 Reacties op "Resources for Styling blockquotes"

Rob - http://www.cssnewbie.com/ zegt:
15 augustus 2008 om 02:55 am
Grote roundup! Een andere CSS-gebaseerde optie zou zijn CSSnewbie's Zes manieren om Style blockquotes [http://www.cssnewbie.com/six-ways-style-blockquotes/].
Msn AvatarlarÄ ± - http://www.msnpaketi.com zegt:
16 augustus 2008 om 20:36
geweldig, bedankt