CSS - Zitate: Persönlichkeit in Ihren Texten hinzufügen

Hallo da draußen, angehende Webdesigner! Heute tauchen wir in eine unterhaltsame und oft übersehene CSS-Eigenschaft ein: Zitate. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich, dir diesen kleinen Schatz zu präsentieren. Vertraue mir, am Ende dieses Tutorials wirst du wie ein Profi zitieren!

Was sind CSS-Zitate?

Bevor wir loslegen, lassen Sie uns verstehen, was Zitate in CSS sind. Sie dienen nicht nur zur Betonung von Rede oder zur Zitierung von Quellen; in CSS sind Zitate ein leistungsstarkes Werkzeug, um automatisch Anführungszeichen in deinen Inhalt hinzuzufügen. Es ist, als hättest du einen winzigen Roboter, der deinem Text folgt und diese kleinen kurvigen Zeichen überall hinzufügt, wo du es ihm sagst!

Mögliche Werte

Lassen Sie uns mit den verschiedenen Werten beginnen, die wir mit der Eigenschaft quotes verwenden können. Hier ist eine praktische Tabelle zur Zusammenfassung:

Wert	Beschreibung
none	Keine Zitate werden verwendet
<string>	Gibt die zu verwendenden Zitate an
initial	Setzt auf Standardwert
inherit	Erbt vom übergeordneten Element
auto	Browser entscheidet basierend auf der Sprache

Jetzt lassen wir uns diese einzeln anschauen.

Gültig für

Bevor wir tiefer einsteigen, ist es wichtig zu beachten, dass die Eigenschaft quotes für alle Elemente gültig ist. Allerdings wird sie am häufigsten mit den Elementen <q> und <blockquote> verwendet. Denk daran wie eine universelle Würze - du kannst sie zu jedem Element hinzufügen, aber sie schmeckt am besten mit bestimmten Gerichten!

Syntax

Die grundlegende Syntax für die Verwendung von Zitaten ist einfach:

auswahl {
quotes: wert;
}

Einfach, oder? Nun, sehen wir uns jeden Wert im Detail an.

CSS-Zitate - none Wert

Wenn du quotes: none setzt, sagst du im Grunde CSS, "Bitte keine Zitate!" Dies ist nützlich, wenn du Standardanführungszeichen überschreiben möchtest. Sehen wir uns ein Beispiel an:

q {
quotes: none;
}

<p> Sie sagte <q>Hello, world!</q></p>

In diesem Fall werden die Zeichen im <q>-Tag keine Anführungszeichen haben. Es ist, als würdest du flüstern, ohne wirklich leiser zu sprechen!

CSS-Zitate - <string> Wert

Hier beginnt der Spaß! Du kannst genau angeben, welche Zeichen du für deine Zitate verwenden möchtest. Die Syntax sieht so aus:

auswahl {
quotes: "open-quote1" "close-quote1" "open-quote2" "close-quote2";
}

Lassen wir uns ein Beispiel versuchen:

q {
quotes: "<<" ">>" "(" ")";
}

<p> Sie rief <q>Was für ein <q>schöner</q> Tag!</q></p>

Dies wird dargestellt als: Sie rief <<Was für ein (schöner) Tag!>>

Ist das nicht toll? Es ist, als würde dein Text ein Make-over bekommen!

CSS-Zitate - initial Wert

Der initial Wert setzt die Eigenschaft auf ihren Standardwert. Es ist, als würdest du die Reset-Taste für deine Zitate drücken. Für die meisten Browser entspricht dies:

q {
quotes: '"' '"' "'" "'";
}

Dies gibt dir die Standard-Englische Anführungszeichen: doppelte Anführungszeichen für die äußere Ebene, einfache Anführungszeichen für die innere Ebene.

CSS-Zitate - auto Wert

Der auto Wert ist wie ein intelligenter Assistent für deine Zitate. Er wählt geeignete Anführungszeichen basierend auf der Sprache deiner Datei. Zum Beispiel:

:root {
quotes: auto;
}

Wenn deine HTML lang="fr" hat, könnte es für französischen Text «guillemets» verwenden. Es ist, als hättest du einen mehrsprachigen Zitatspezialisten in deinem Team!

CSS-Zitate - Verwendung der :lang Pseudo-Klasse

Hier können wir wirklich stilvoll werden. Die :lang Pseudo-Klasse ermöglicht es uns, unterschiedliche Zitate für verschiedene Sprachen anzugeben. Schau dir das an:

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

Dieses Beispiel definiert unterschiedliche Zitatsstile für Englisch, Französisch und Deutsch. Es ist, als würde deine Website mehrere Sprachen sprechen lernen!

Alles zusammenbringen

Lassen wir uns ein komplexeres Beispiel erstellen, um zu sehen, wie all das zusammenarbeitet:

<p lang="en">Sie sagte, <q>I love <q>CSS</q>!</q></p>
<p lang="fr">Elle a dit, <q>J'adore <q>CSS</q> !</q></p>
<p lang="de">Sie sagte, <q>Ich liebe <q>CSS</q>!</q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

Dies wird jeden Satz mit sprachgerechten Anführungszeichen darstellen. Es ist, als hättest du einen polyglotten Setzer, der an deiner Website arbeitet!

Schlussfolgerung

Und da hast du es, Leute! Wir haben die Welt der CSS-Zitate durchquert, von einfach bis komplex. Denke daran, Zitate sind nicht nur über interpunktion; sie verleihen deinem Text Persönlichkeit und kulturellen Kontext. Sie sind das Gewürz in deiner textuellen Küche!

Während du deine Reise im Webdesign fortsetzt, vergiss nicht, mit Zitaten zu experimentieren. Probiere verschiedene Stile aus, mische Sprachen und sieh, was am besten für deine Website funktioniert. Wer weiß? Vielleicht zitierst du deinen Weg zum Stern des Webdesigns!

Frohes Coden und möge deine Zitate immer auf dem Punkt sein!

Credits: Image by storyset