Kurzschrift-Eigenschaften
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen die Anweisungen für einzelne Eigenschaften mit Hilfe von Kurzschrift-Eigenschaften zusammenfassen.
Lösung
Beginnen Sie mit einem korrekt markierten HTML-Abschnitt:
<h3>Kurzschrift-Eigenschaften</h3>
<p>Mit Hilfe von Kurzschrift-Eigenschaften können Sie sich einiges an Tipparbeit sparen und gleichzeitig die Dateigröße klein halten. Außerdem können Sie auf diese Weise die Leserlichkeit Ihrer Stylesheets erhöhen.</p>Anstatt einzelne Regeln für die Eigenschaften font-style, font-size und font-family zu verwenden, können Sie diese auch in der Kurzschrift-Eigenschaft font zusammenfassen:
h3 {
font: italic 18pt verdana, arial, sans-serif;
}
p {
border: 2pt solid black;
}Diskussion
Viele einzelne CSS-Eigenschaften lassen sich mit Hilfe der sogenannten Kurzschrift-Eigenschaften zusammenfassen.
So ist border beispielsweise eine Kurzschrift-Eigenschaft, die die Regeln für die folgenden drei verschiedenen Eigenschaften in sich vereinigt:
Die Kurzschrift-Eigenschaft font kombiniert ebenfalls mehrere Eigenschaften miteinander. Es können Werte für die folgenden einzelnen Eigenschaften angegeben werden:
- font-style
- font-size/line-height
- font-family
- font-weight
- font-variant
Abgesehen von font-family und font-size/line-height können Sie die Werte angeben wie bei den einzelnen Eigenschaften auch. Die Werte für font-family müssen bei der Verwendung von font in der Reihenfolge ihrer Priorität angegeben und durch Kommata voneinander getrennt werden.
Wenn Sie sowohl für font-size als auch für line-height Werte angeben wollen, müssen Sie die Werte mit einem Schrägstrich voneinander trennen:
h3 {
font: italic 18pt/20pt verdana, arial, sans-serif
}Eine Aufstellung der möglichen Kurzschrift-Eigenschaften sehen Sie in der folgenden Tabelle.
Tabelle: Kurzschrift-Eigenschaften.
| Eigenschaft | Wert | Beispiel |
|---|---|---|
| background | background-color background-image background-repeat background-attachment background-position | background: url(book.gif) #999 no-repeat top; |
| border | border-width | border: thin solid #000; |
| border-left | border-style | |
| border-right | border-color | |
| border-top | ||
| border-bottom | ||
| font | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar | font: 14px italic Verdana, Arial, sans-serif; |
| list-style | list-style-type list-style-position list-style-image | list-style: circle inside; |
| margin | margin-top margin-right margin-bottom margin-left | margin: 5px 0px 5px 10px; margin: 5px; |
| padding | padding-top padding-right padding-bottom padding-left | padding: 5px 10%; |
Siehe auch
- Die CSS 2.1-Spezifikation zum Thema Kurzschrift-Eigenschaften für Rahmen bzw.
- Kurzschrift-Eigenschaften für Schriften
- und unter CSS 2.1: Eigenschaften und proprietäre Erweiterungen finden Sie außerdem eine komplette Liste der CSS-Eigenschaften.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln