Ressourcen für Styling Blockquotes

5. August 2008 durch chriscoyier · 2 Kommentare

Die meisten Websites, besonders wenn sie Blogs sind, wird über die Notwendigkeit für einen Block quote auf einen Zeitpunkt oder ein anderes zu kommen. Das ist nur der inter-linking gute Geist des Web! Block Zitate sind eine Möglichkeit, Text auf einer Seite, die direkt von einer anderen Website (oder einer anderen Quelle) entnommen sind. HTML bietet uns die perfekte Element für eine solche Aufgabe, die <blockquote>

Ohne CSS angewendet, um eine Seite überhaupt, haben die meisten Browser standardmäßig Styling, die für dieses Element, um die es von anderen Textblöcke. Firefox verwendet die folgenden Styling standardmäßig:

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

Dies ist nicht konsistent zwischen den Browsern jedoch, so die meisten "CSS Resets" include Reset-Styling, um all dies zu entfernen. Sie sollten auf jeden Fall sollten Sie erwägen, einige Styling zurück in allerdings für Ihre blockquotes. Ich mag einfache Konstruktion, so lassen Sie mich mit Ihnen zu teilen eine meiner Lieblings-Stylings für blockquotes:

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

Dieser Stil macht einfach eine gesunde Gedankenstrich mit einer leichten grauen Block nach links. Schlicht und elegant:

Es gibt natürlich viele, viele Möglichkeiten, Stil blockquotes. Von einfach bis aufwendig, von groß bis klein, von intensiv zu verhalten. Viele Dinge zu beachten. "Pull Quotes" sind blockquotes Brüder. Es gibt keine speziellen HTML-Element für Textzitate, aber sie sind in fast der gleichen Weise benutzt, um abzuheben einem Textblock. Der Unterschied ist, dass die Pull-Quote Text ist aus dem sehr Artikels vorgestellt genommen. Dies bewirkt unterschiedliche Herausforderungen.

Hier ist eine Liste von Ressourcen heraus dort für Styling, Handling und ansonsten den Umgang mit blockquotes und ziehen Sie Anführungszeichen.

DIE GRUNDLAGEN UND TECHNISCHE DATEN

HTML Dog: Blockquote
W3C: Blockquote specs (zusammen mit dem "q"-Element, Inline blockquotes kleiner Bruder)
Wikipedia: Blockquote
W3 Schools: Blockquote

Nicht viel über die blockquote-Element kennen, andere als die optionale Attribut "zitieren", das die URI, dass das Zitat stammte wird. Das cite-Attribut hat keinen Einfluss auf den Stil oder die Funktionalität des blockquote beeinflussen.

Razzien

Block Zitate und Pull Quotes: Beispiele und Good Practices

Pull Quotes (23 Beispiele)

Pattern Tap: Pull Quotes (Es ist nicht kaum etwas hier noch nicht, aber Pattern Tap ist der perfekte Ort, um eine Sammlung für diese Art der Sache zu beginnen.)

Kommentare

2 Responses to "Resources for Styling Blockquotes"

Rob - http://www.cssnewbie.com/ sagt:
15. August 2008 um 02.55 Uhr
Große Razzia! Ein weiterer CSS-basierte Option wäre CSSnewbie Six Ways to Style Blockquotes [http://www.cssnewbie.com/six-ways-style-blockquotes/] werden.
Msn AvatarlarÄ ± - http://www.msnpaketi.com sagt:
16. August 2008 um 20.36 Uhr
toll, danke