Effizientes CSS

Exzellenter Artikel
von Philipe Fatio | 4 | 8231 Aufrufe

Anzeige Hier werben

Einleitung

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 Kurzschreibweisen 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.

Farben

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:

 
css
1
2
3
4
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 1em;

wird zu einer Angabe:

 
css
1
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:

 
css
1
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:

 
css
1
2
margin: 0;
padding: 0;

Auf diese Weise muss man das bei duzenden Elementen machen. Es gibt die Möglichkeit es nur einmal zu schreiben:

 
css
1
2
3
4
* {
    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:

 
css
1
2
3
border-width: 1px;
border-style: dotted;
border-color: #000;

Eine kürzere Variante wäre jedoch:

 
css
1
border: 1px dotted #000;

Die Syntax von border ist:

 
css
1
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:

 
css
1
2
3
4
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:

 
css
1
2
border: 1px solid #000;
border-width: 1px 2px 3px 4px;

Auf diese Weise kann man auch auf allen Seiten eine andere Farbe angeben:

 
css
1
2
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.

Background

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.

 
css
1
2
3
4
5
background-color: #f00;
background-image: url(bild.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Wird gekürzt zu:

 
css
1
background: #f00 url(bild.gif) no-repeat fixed right bottom;

Die Syntax:

 
css
1
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:

 
css
1
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:

 
css
1
background: #369;

Anstatt:

 
css
1
background-color: #369;

Oder nur ein Bild:

 
css
1
background: url(bild.gif);

Anstatt:

 
css
1
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.

Font

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.

 
css
1
2
3
4
5
6
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:

 
css
1
font: italic lowercase bold 12pt/1.5em "Lucida Sans Unicode", Verdana, Arial, sans-serif;

Die Syntax lautet:

 
css
1
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:

 
css
1
list-style-type: none;

Es geht auch mit der Kurzform:

 
css
1
list-style: none;

Man kann die Kurzform auch für alle Angabe für Listen verwenden.

 
css
1
list-style: square inside url(bild.gif);

ist die Kurzform für:

 
css
1
2
3
list-style-type: square;
list-style-position: inside;
list-style-image: url(bild.gif);

Selektoren

class und id Selektoren werden oft mit dem Element kombiniert:

 
css
1
2
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:

 
css
1
2
3
4
5
6
div.class {
    color: #369;
}
p.class {
    color: #000;
}

Fazit

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.

Über den Autor: Philipe Fatio
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten