CSS Deklarationen: Kurzformen
Kurzformen der Deklaration von Rahmeneigenschaft, Innenabstand und Außenabstand
Kurzformen machen CSS-Regeln kürzer und damit übersichtlicher; falls man genug Erfahrung und Übung hat, dass man die Kurzform auf einen Blick "lesen" kann. Aber sie verringern auch den Arbeitsaufwand die Fehleranfälligkeit bei Änderungen: Man muss nur einen Wert verändern, dies bedeutet weniger Arbeit und man kann sich nicht bei den weiteren Wert vertippen oder ihn vergessen zu ändern.
Die Kurzform für die vier Seiten kann man bei Rahmen als auch bei den Innenabständen und Außenabständen verwenden. Die Kurzform für die Rahmenformatierungen style, width und color kann man nur bei Rahmen verwenden.
ungekürzte Formen (Rahmen, Innenabstand und Außenabstand)
Rahmen
Wenn wir in CSS4You die Referenz für Rahmen anschauen, sieht das Ganze ziemlich unübersichtlich und kompliziert aus, ist es aber nicht. Die ausführliche Schreibweise für eine Rahmeneigenschaft ist z.B. border-left-color für die Farbe des linken Rahmens oder border-top-width für die Breite des oberen Rahmens.
Der Aufbau der Bezeichnung einer dieser Eigenschaften ist border, dann Bindestrich, dann welche Seite (top, right, bottom, left), dann Bindestrich, dann welche Formatierung (width, style, color).
Daraus ergeben sich zwölf Varianten:
| style | width | color | |
| top | border-top-style | border-top-width | border-top-color |
| right | border-right-style | border-right-width | border-right-color |
| bottom | border-bottom-style | border-bottom-width | border-bottom-color |
| left | border-left-style | border-left-width | border-left-color |
Innenabstände und Außenabstände
Der Aufbau der Bezeichnung einer dieser Eigenschaften ist padding bzw. margin, dann Bindestrich, dann welche Seite (top, right, bottom, left).
| Daraus ergeben sich vier Varianten für Innenabstände: | Daraus ergeben sich vier Varianten für Außenabstände: | ||||||||||||||||||||
|
|
Kurzform für die vier Seiten (Rahmen, Innenabstand und Außenabstand)
Beispiel
Möchte man z.B. bei der Rahmenbreite alle vier Seiten gleich aussehend haben, kann man den Teil der Bezeichnung der Seite weglassen und hat dann als Eigenschaft border-width.
Sollen z.B. alle vier Rahmenseiten einer Überschrift h1 drei Pixel breit sein, so schreibt man: h1 {border-width: 3px; }.
Man kann in der Kurzform aber auch für jede einzelne Seite verschiedene Werte angeben, ohne dafür vier Deklarationen (border-top-width, border-right-width, ... ) schreiben zu müssen. Dazu wird die Eigenschaft ohne Seitenangabe verwendet (border-width) und als Wert werden dann mehrere Werte hintereinander geschrieben, aber ohne Trennzeichen (also kein Strichpunkt, Beistrich oder ähnliches).
An statt von:
h1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
}
schreibt man:
h1 {
border-width: 1px 1px 3px 1px;
}
Dort, wo sich in einer normalen CSS-Regel zwischen Doppelpunkt und Strichpunkt ein Wert befindet, sind jetzt eben mehrere: z.B. h1 {border-width: 1px 1px 3px 1px;}. Diese Regel bedeutet, dass oben, rechts und links die Rahmenstärke ein Pixel beträgt, unten aber drei Pixel. Die vier Werte werden den vier Seiten von oben beginnend im Uhrzeigersinn zugeordnet (top, right, bottom, left), also der erste Wert wird top zugeordnet, der zweite Wert right, der dritte Wert bottom und der vierte Wert left.
h1 { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 3px; border-left-width: 1px; }
h1 { border-width: 1px 1px 3px 1px; }
Dazu gibt es weiter unten Merksätze.
Rahmen
Durch das Weglassen der Seitenbezeichnungen ergeben sich drei Varianten:
| style | width | color | |
| top | border-top-style | border-top-width | border-top-color |
| right | border-right-style | border-right-width | border-right-color |
| bottom | border-bottom-style | border-bottom-width | border-bottom-color |
| left | border-left-style | border-left-width | border-left-color |
| Kurz | border-style | border-width | border-color |
Innenabstände und Außenabstände
Durch das Weglassen der Seitenbezeichnungen ergibt sich jeweils eineVariante:
| Innenabstände: | Außenabstände: | ||||||||||||||||||||||||
|
|
Kurzform für die drei Formatierungen von Rahmen
Bei Rahmen git es auch eine Kurzform für die Angabe der Formatierungen width, style und color. Da es bei Innen- und Außenabständen keine solche Formatierungen gibt, ist diese Kurzform nur bei Rahmen möglich.
Rahmen
Man kann die Formatierung (width, style, color) weglassen und eine weitere Kurzform der Schreibweise anwenden. Dazu werden die drei Werte hintereinander geschrieben, aber ohne Trennzeichen (also kein Strichpunkt, Beistrich oder ähnliches).
An statt von:
h1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FF0033;
}
schreibt man:
h1 {
border-bottom: 1px solid #FF0033;
}
Dort, wo sich in einer normalen CSS-Regel zwischen Doppelpunkt und Strichpunkt ein Wert befindet, sind jetzt eben mehrere: z.B. h1 {border-bottom: 1px solid #FF0033;}. Diese Kurzform ist gleichbedeutend wie die Langform: h1 {border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF0033;}.
Die Zuordnung der einzelnen Werte zu den Formatierungen erfolgt hier nicht über die Position, sondern über den "Inhalt".
Werte mit Längenangaben wie px oder em sind width.
Werte mit den Schlüsselwörter solid, dotted u.s.w. sind style.
Werte mit Farbangaben wie #FF0033 oder den Schlüsselwörter für Farben wie red, blue
u.s.w. sind color.
Durch das Weglassen der Formatierungsbezeichnungen ergeben sich vier Varianten:
| style | width | color | Kurz | |
| top | border-top-style | border-top-width | border-top-color | border-top |
| right | border-right-style | border-right-width | border-right-color | border-right |
| bottom | border-bottom-style | border-bottom-width | border-bottom-color | border-bottom |
| left | border-left-style | border-left-width | border-left-color | border-left |
Kurzform für die vier Seiten und die drei Formatierungen von Rahmen
Möchte man bei Rahmen alle vier Seiten gleich aussehend haben, kann man die Kurzform für die Seiten mit nur einem Wert verwenden; und möchte man zusätzlich die Kurzform für die Formatierungen verwenden, bleibt nur mehr der Name der Eigenschaft selbst über: border. Soll z.B. ein Absatz einen "Kasten" bekommen, das heißt, einen einheitlichen Rahmen auf allen vier Seiten gleich, so kann die CSS-Regel wie folgt aussehen:
p {
border: 1px solid black;
}
Durch das Weglassen der Seitenbezeichnungen und der Formatierungsbezeichnungen ergibt sich die eine Variante:
| style | width | color | Kurz | |
| top | border-top-style | border-top-width | border-top-color | |
| right | border-right-style | border-right-width | border-right-color | |
| bottom | border-bottom-style | border-bottom-width | border-bottom-color | |
| left | border-left-style | border-left-width | border-left-color | |
| Kurz | border |
Zusammenfassung der Kurzformen bei Rahmen
In CSS4You sind bei den Eigenschaften der Rahmen 20 einzelne Eigenschaften angegeben. Diese sind alphabetisch angegeben und wirken daher sehr unübersichtlich. Sie sind es aber nicht, wenn man sie übersichtlich anordnet:
| style | width | color | Kurzform | |
| top | border-top-style | border-top-width | border-top-color | border-top |
| right | border-right-style | border-right-width | border-right-color | border-right |
| bottom | border-bottom-style | border-bottom-width | border-bottom-color | border-bottom |
| left | border-left-style | border-left-width | border-left-color | border-left |
| Kurzform | border-style | border-width | border-color | border |
Aus den vier Seiten und drei Formatierungen ergeben sich 12 Eigenschaften, plus die 3 Kurzformen für die Formatierungen, plus die 4 Kurzformen für die Seiten und zuletzt noch die1 Kurzform für beide gleichzeitig ergibt in Summe die in CSS4You aufgelisteten 20 möglichen Eigenschaften.
nicht deklarieren von Werten
Wenn kann Kurzformen verwendet, ist es typisch, dass andere Eigenschaften nicht angegeben werden - sonst würde es ja nicht kürzer werden. Aber was passiert mit diesen Eigenschaften, wenn keine Werte angegeben sind?
Gibt es keine entsprechende Deklaration, dann gibt es auch keinen zugewiesenen Wert für diese Eigenschaft. In diesem Fall greift der Browser auf die Standardwerte der Eigenschaft zurück. Diesen Wert findet man in CSS4You bei den einzelnen Eigenschaften unter dem Begriff "Initialwert". So ist der Defaultwert/Initialwert für border-style: none (wird kein border-style angegeben, werden keine Rahmen gezeichnet), für border-width: medium (es werden also Rahmen von mittlerer Stärke - meist zwischen 2 und 4 Pixel - gezeichnet) und für border-color ist er browserabhängig, entspricht aber meistens der Farbe des Textes.
Reihenfolge der Seiten
Wie merkt man sich bei der Kurzform die Reihenfolge der vier Seiten am besten?
Die vorgegebene Reihenfolge ist im Uhrzeigersinn und beginnt oben:
| oben | rechts | unten | links |
| top | right | bottom | left |
Merksätze:
a) Wenn man die Reihenfolge nicht einhält, bekommt man Probleme, auf englisch: trouble - top, right, bottom, left.
b) Die Reihenfolge ist die selbe wie bei den Himmelsrichtungen auf einer Landkarte: Norden (top), Osten (right), Süden (bottom) und Westen (left). Merksatz für die Reihenfolge der Himmelsrichtungen (haben die meisten schon in der Volksschule gehört): Nie Ohne Seife Waschen.
Man kann aber auch weniger als vier Werte angeben. Was passiert dann?
Border-style is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.
| ein Wert angegeben |
zwei Werte angegeben |
drei Werte angegeben |
vier Werte angegeben |
|
| top | oben | oben | oben | oben |
| right | wie erster (oben) | rechts | rechts | rechts |
| bottom | wie erster (oben) | wie erster (oben) | unten | unten |
| left | wie erster (oben) | wie zweiter (rechts) | wie zweiter (rechts) | links |
- ein Wert angegeben: Dieser Wert gilt für alle vier Seiten (top, right, bottom und left).
Dies verwendet man, wenn man alle vier Seiten gleich haben will.
Anmerkung: Geht in Expression Web im Dialogfeld "Neue Formatvorlage" indem man das Auswahlkästchen "Für alle identisch" aktiviert. - zwei Werte angegeben: Beide Werte werden wiederholt, also der erste Wert gilt für die erste und dritte Seite (top und bottom), der zweite Wert gilt für die zweite und vierte Seite (right und left).
Dies verwendet man, wenn die gegenüberliegenden Seiten gleich sein sollen, also oben und unten bzw. links und rechts. Das kann auch bedeuten, das auf zwei gegenüberliegenden Seiten keine Rahmen angezeigt werden, z.B. nur links und rechts ein Rahmen. Dies erreicht man mit:border-style: none solid;oder auchborder-width: 0px 3px;
Anmerkung: Die anderen Eigenschaften kann man in anderen Deklarationen angeben, die durchaus für alle vier Seiten gelten können, sie sind eh nicht sichtbar, also:
border-style: none solid; border-width: 3px; border-color: #3333FF;
oder auch
border-width: 0px 3px ;border-style: solid; border-color: #3333FF;
Anmerkung: Geht in Expression Web nicht in Dialogfeld "Neue Formatvorlage" sondern nur bei Eingabe im Code. - drei Werte angegeben: Ähnlich wie bei zwei Werten angegeben, es wird aber nur der zweite Wert wiederholt, da ja an der dritten Stelle schon ein Wert steht. Also der erste Wert gilt nur für die erste Seite (top), der zweite Wert wird wiederholt und daher gilt für die zweite und vierte Seite (right und left) und der dritte Wert gilt nur für die dritte Seite (bottom).
Diese Variante wird eher selten verwendet, da sie etwas unübersichtlich ist und in der Realität eine solche Situation kaum vorkommt.
Anmerkung: Geht in Expression Web nicht in Dialogfeld "Neue Formatvorlage" sondern nur bei Eingabe im Code. - vier Werte angegeben: Jeder Wert gilt (genau nur) für die entsprechende Seite in der vorgegebenen Reihenfolge (also top, right, bottom und left).
Dies verwendet man, wenn alle vier Seiten unterschiedlich sein sollen.
Anmerkung: Geht in Expression Web im Dialogfeld "Neue Formatvorlage" indem man in alle Felder Werte eingibt.
Beispiele
Doppelter Rahmen oben und unten
Vorschau, wie dieses Beispiel aussieht.
p {
border-style: double none;
}
Die Absätze haben (nur) oben und unten einen doppelten Rahmen mittlerer Stärke in der selben Farbe wie der Text des Absatzes.
Rahmen, mit einem Block an der linken Seite
Vorschau, wie dieses Beispiel aussieht.
p {
border: solid 1px #0000FF;
border-left-width: 10px;
}
Es wird zuerst allgemein für alle Seite gleiche Werte zugewiesen. Danach wird speziell für die eine Seite ein spezieller Wert als Ausnahme zugewiesen. Wichtig ist, dass diese Deklaration unterhalb, sprich danach, steht und so den allgemeinen Wert "überschreibt".
Rahmen, mit einem Block an der linken und rechten Seite
Vorschau, wie dieses Beispiel aussieht.
p {
border: solid #0000FF;
border-width: 1px 10px;
}
Es wird zuerst allgemein für alle Seite gleiche Werte zugewiesen, außer für die Rahmenstärke. Danach werden für die Rahmenstärke die Werte zugewiesen; da es nur zwei Werte sind, wird der erste für oben und unten angewendet und der zweite für links und rechts.
http://www.w3.org/TR/css-backgrounds-3/#the-border-shorthand -> EXAMPLE 21