 14) Kurzschreibweisen von Anweisungen
Hier einige Beispiele die aufzeigen, wie man bei der Deklaration CSS-Anweisungen zusammenfassen kann. Für solche Kurzschreibweisen gelten manchmal eigene Regeln.
|
|
Kurzschreibweisen für CSS-Notierungen
Kurzschreibweisen werden häufig für CSS-Notierungen der Schrift, der Innen- und Außenabstände und für Hintergrundgrafiken verwendet. Dabei kann man z.B. bei Angaben zur Randformatierung die Eigenschaften für "oben, rechts, unten, links" einzeln oder zusammen gefasst definieren und dabei unterschiedliche gültige Schreibweisen verwenden.
 siehe auch Abstände bestimmen mit margin und padding (09)
1 gleiche Werte padding, margin, border
td.abstand {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
/* Kurzschreibweise */
td.abstand {
padding: 20px;
}
/* Kurzschreibweise, oben beginnend im Uhrzeigersinn */
td.abstand {
padding: 20px 20px 20px 20px;
}
2 unterschiedliche Werte padding, margin, border -
p.block {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 5px;
}
/* Kurzschreibweise, oben beginnend im Uhrzeigersinn */
p.block {
padding: 20px 10px 20px 5px;
}
3 2 unterschiedliche Werte padding, margin, border
p.kasten {
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
/* Kurzschreibweise */
p.kasten {
padding: 15px 10px;
}
Erste Angabe gilt für oben und unten, zweite Angabe für rechts und links
4 mit Nullwerten padding, margin, border
p.kasten {
padding-top: 15px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
/* Kurzschreibweise oben beginnend im Uhrzeigersinn */
p.kasten {
padding: 15px 0 10px 0;
}
Hier ist bei Null (0) eine Maßeinheit nicht erforderlich!
5 speziell Ränder / Rahmen
table.rahmen {
border-style: solid;
border-width: 1px;
border-color: #5F5F5F;
}
/* Kurzschreibweise Rahmendicke Typ Farbe */
table.rahmen {
border: 1px solid #5F5F5F;
}
/* Auch das ist möglich! */
table.rahmen02 {
border-style: solid dotted dotted solid;
border-width: 2px 4px 4px 2px;
border-color: #5F5F5F #2F2F2F #2F2F2F #5F5F5F;
}
6 Text - Schriftformatierung
Bei der Kurzschreibweise für die Textformatierung ist seit CSS1 eine bestimmte Reihenfolge festgelegt! Die richtige Reihenfolge ist:
font-style, font-variant, font-weight, font-size/line-height, font-family
Die Eigenschaften sind nicht durch Kommas getrennt und werden mit einem Semikolon abgeschlossen. Beispiel:
| font: |
font-style |
font-variant |
font-weight |
font-size/line-height |
font-family |
; |
| font: |
italic |
small-caps |
normal |
12px/130% |
Verdana, sans-serif |
; |
| font: |
normal |
normal |
bold |
0.8em/1em |
monospace |
; |
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* Kurzschreibweise Texthöhe Schrift / Schriftfamilie */
p {font: italic small-caps bold 12px/130% Arial, sans-serif;}
Reihenfolge: font-style, font-variant, font-weight, font-size/line-height, font-family
Mehr Info zu Textgestaltung - Einheiten + Werte für Textgrößen, ...
7 Hintergrundgrafik
body {
background-color: #EFEFEF;
background-image: url(grafik.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top right;
}
/* Kurzschreibweise */
body {
background: url(grafik.gif) #EFEFEF fixed no-repeat top right;
}
Der Wert '#EFEFEF' steht für die alternative Hintergrundfarbe (wichtig bei transparenten Grafiken)
Mehr Info zu Hintergrundgrafiken
Das war alles (vorläufig) ...
|
Home • CSS • Kurzschreibweise