Effizientes CSS
Nach obenHintergrund
Durch CSS ist es möglich Inhalt und Gestaltung von HTML-Dokumenten zu trennen. Da in der CSS-Datei alle Angaben zum Aussehen der Webseite festgehalten werden, bedeutet eine Verkleinerung der HTML Datei. Damit aber die CSS-Datei nicht zu groß wird, sollte man Kurzformen für Eigenschaften verwenden. Viele kennen sie, wissen aber nicht genau wie sie notiert werden.
Mit Kurzschreibweise kann man mehrere Eigenschaften auf einmal setzten, d.h. anstatt vier oder fünf Deklarationen nur eine. Somit erspart man sich Zeit und die Dateigröße wird um einiges verringert.
Nach obenFarben
Die gebräuchlichste Art eine Farbe in CSS anzugeben, ist der Gebrauch von Hexadezimal Werten: #336699.
Man kann auch RGB Werte angeben: rgb (51, 102, 153). Der Nachteil der RGB Angabe ist die Grösse im Vergleich zum Hexadezimalen Wert.
Ebenfalls möglich ist das Kürzen von Hexadezimalen Werten, vorausgesetzt der Wert besteht aus jewils 3 Paaren, also #336699 und nicht #345678. Man lässt von jedem Paar eine Zahl bzw. einen Buchstabe weg: #336699 wird zu #369.
Margin und Padding
Die Syntax für margin und padding ist die gleiche. Man kann einen bis vier Werte angeben, die jeweils mit einem Leerschlag getrennt sind:
- Eigenschaft: Angabe1;
- Eigenschaft: Angabe1 Angabe2;
- Eigenschaft: Angabe1 Angabe2 Angabe3;
- Eigenschaft: Angabe1 Angabe2 Angabe3 Angabe4;
Welche Angabe für was steht, ist abhängig von der Anzahl der Angaben:
- eine Angabe: alle Seiten;
- zwei Angaben: oben und unten, links und rechts;
- drei Angaben: oben, links und rechts, unten;
- vier Angaben: oben, rechts, unten, links;
Folglich kann man vier Angaben in einer zusammenfassen:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 1em;
wird zu einer Angabe:
margin: 10px 20px 0 1em;
Diese Syntax wird auch bei border-width, border-style und border-color verwendet, jedoch werden diese Angaben selten zum Einsatz kommen:
border-style: solid dotted dashed double;
Oft braucht man margin und padding in einem Element um es auf 0 zu setzen. Man diese folgendes CSS verwenden:
margin: 0;
padding: 0;
Auf diese Weise muss man das bei duzenden Elementen machen. Es gibt die Möglichkeit es nur einmal zu schreiben:
* {
margin: 0;
padding: 0;
}
Das *-Zeichen nennt man Universal-Selektor und ist stellvertretend für jedes Element. Damit diese Notation wirksam sein kann, müssen die Angaben an erster Stelle in der CSS-Datei geschrieben werden. Man erspart sich damit immer wieder diese Angaben bei jedem Element zu machen.
Border
Um einem Element einen schwarzen gepunkteten Rahmen zu geben, der 1px breit ist, könnte man folgende Angaben machen:
border-width: 1px;
border-style: dotted;
border-color: #000;
Eine kürzere Variante wäre jedoch:
border: 1px dotted #000;
Die Syntax von border ist:
border: width style color;
Man kann für jede Seite einer Box verschiedene Angaben für die Rahmen machen, indem man border-top, border-right, border-bottom und border-left benutzt.
Wenn man einen Rahmen der auf allen Seiten den gleichen Stil, jedoch auf allen Seiten eine andere Breite haben soll, könnte man es folgender Weise lösen:
border-top: 1px solid #000;
border-right: 2px solid #000;
border-bottom: 3px solid #000;
border-left: 4px solid #000;
Eine bessere Variante wäre, für alle Seiten die gleiche Angabe zu machen und dann mit border-width für jede Seite ihre eigene Breite festlegen:
border: 1px solid #000;
border-width: 1px 2px 3px 4px;
Auf diese Weise kann man auch auf allen Seiten eine andere Farbe angeben:
border: 1px solid #000;
border-color: #000 #369 #333 #666;
outline verhält sich ähnlich, aber auf allen Seiten sind die Angaben gleich, d.h. es gibt nur outline, outline-width, outline-style und outline-color. Sie werden von den heutigen Browsern schlecht oder gar nicht unterstüzt.
Nach obenBackground
Die Eigenschaft background ist die Kurzform für fünf Eigenschaften. Anstatt background-color, background-image, background-repeat, background-attachment und background-position kann man einfach background verwenden.
background-color: #f00;
background-image: url(bild.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Wird gekürzt zu:
background: #f00 url(bild.gif) no-repeat fixed right bottom;
Die Syntax:
background: color image repeat attachment position;
Man kann die Angabe oben noch weiter kürzen, indem man für die position anstatt Schlüsselwörter Prozentangaben macht:
background: #f00 url(bild.gif) no-repeat fixed 100% 100%;
Dabei sollte wie gewohnt zuerst die x- (horizontal) und danach die y-Angabe (vertikal) gemacht werden. Für top und left kann man 0 verwenden (ohne %), für bottom und right 100%, und für center 50%. Wenn nur eine Angabe gemacht wird, wird sie für die Horizontale verwendet und die Vertikale hat den automatischen Wert von 50%.
Die Standardangaben, die die Elemente auch ohne Definition haben, sind:
- color: transparent
- image: none
- repeat: repeat
- attachment: scroll
- position: 0 0
Man kann also auf all diese Angaben verzichten, wenn sie solche Werte bekommen sollen. Wenn man nur eine Hintergrundfarbe will, kann man folgende Kurzschreibweise verwenden:
background: #369;
Anstatt:
background-color: #369;
Oder nur ein Bild:
background: url(bild.gif);
Anstatt:
background-image: url(bild.gif);
Dieses Bild wird oben links angezeigt und wiederholt, da keine andere Angaben dazu gemacht wurden und somit die Standardangaben übernommen werden.
Nach obenFont
Die Kurzschreibweise, die wohl am wenigsten verwendet wird, ist font. Mit ihr kann man bis zu sechs Angaben zusammenfassen: font-style, font-variant, font-weight, font-size, line-height und font-family.
font-style: italic;
font-variant: lowercase;
font-weight: bold;
font-size: 12pt;
line-height: 1.5em;
font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif;
Wird gekürzt zu:
font: italic lowercase bold 12pt/1.5em "Lucida Sans Unicode", Verdana, Arial, sans-serif;
Die Syntax lautet:
font: style variant weight size/line-height family;
Zu beachten ist der Slash (/) zwischen font-size und line-height, dabei darf kein Leerzeichen vor und nach dem Slash stehen. Schriftarten die Leerzeichen enthalten, sollten in Anführungszeichen stehen, z.B. "Lucida Sans Unicode".
Die Standardangaben, die die Elemente auch ohne Definition haben, sind:
- style: normal
- variant: normal
- weight: normal
- size: medium
- line-height: normal
- font-family: Je nach Browser und OS unterschiedlich
Listen
Die meisten verwenden um die Bullets auszuschalten folgendes:
list-style-type: none;
Es geht auch mit der Kurzform:
list-style: none;
Man kann die Kurzform auch für alle Angabe für Listen verwenden.
list-style: square inside url(bild.gif);
ist die Kurzform für:
list-style-type: square;
list-style-position: inside;
list-style-image: url(bild.gif);
Nach obenSelektoren
class und id Selektoren werden oft mit dem Element kombiniert:
div#id { }
div.class { }
Oft ist es nicht nötig das Element anzugeben, vorallem nicht bei IDs, da eine ID nur einmal im HTML Dokument vorkommen darf. Bei einer class ist es nur sinnvoll, wenn die Klasse auf verschiedene Elemente angewendet wird und diese verschiedene Aussehen haben sollen:
div.class {
color: #369;
}
p.class {
color: #000;
}
Nach obenFazit
Mit Kurzformen kann man sich ziemlich viel Schreibarbeit ersparen. Die CSS Datei wird um einiges kleiner und somit auch die Ladezeit der Seite und der Traffic.
Pberndt
Hey, das mit "font" ist ja klasse :D Gleich mal merken ;)
Danke für diesen wirklich langen Artikel :)
Twisting
Ich finde den Artikel auch sehr lesenwert. Danke für deine Mühe. TM.
PS: Kommentieren geht doch ;)
punix
Jo nettes Tutorial, cool ist oben wenn man über die Hexdezimalzahlen fährt, dass die Farbe angezeigt wird :)
OverfloOD
Klasse Artikel! Echt lesenswert. Mich würde mehr über die RGB-Schreibweise bei Farben interessieren, seh ich ja immer öfter ;) Besoners bei dem "font" musste ich staunen, was da doch alles reingeht statt nur style, size und family..
Pberndt
@Punix: Das liegt am Highlighting :) Geht auf WMP im Forum auch ;)
fphilipe
@Pberndt: Ich glaube OverfloOD meint die CSS Schreibweise für farben.
@OverfloOD: Ist ja ganz simpel: rgb(roter Wert, grüner Wert, blauer Wert). Dabei kannst du für die Werte Zahlen von 0 bis 255 einsetzen, halt RGB ;) .
miro
also das mit font wusste ich auch nicht. hab zwar nie was anderes als font-size gebraucht, liegt aber eher daran, dass ich für die farbe der schriften bisher immer color verwendet habe zB
font-size: 10px;
color: purple;
...ciao
Twisting
@miro: da steh nirgendwo, dass man mit 'font' die textfarbe formatieren kann. ;)
miro
dann bilde ichs mir halt ein ;)
dido
Kurze Anmerkung zu den Rahmen:
An der Stelle
"Auf diese Weise kann man auch auf allen Seiten eine andere Farbe angeben"
steht die border-color bereits im zusammengefassten Teil drin. In der Zeile darunter werden aber noch mal vier verschiedene Farben definiert. Das könnte den Leser verwirren.
Ähnliches gilt für den Abschnitt darüber ("border-width")
fphilipe
@dido:
es steht ja darüber eine Erklärung
"…für alle Seiten die gleiche Angabe zu machen und dann mit border-width für jede Seite ihre eigene Breite festlegen"
dido
Das ist schon klar. Wollte es ja fast selbst als Artikel verfassen. ;-)
Nur bei diesem zusammengefassten Beispiel:
----------------------------------------
border: 1px solid #000;
border-width: 1px 2px 3px 4px;
----------------------------------------
steht z.B. einmal oben bei border das 1px und dann noch mal bei border-width.
moede
Wobei bei der Positionierung des Hintergrundes noch anzumerken ist, dass Opera es gar nicht mag, wenn zB. background-position: center 5px; steht. Besser background-position: 50% 5px; verwenden.