CSS abkürzen (Effizientes CSS)[IE|M|O|S|G]

von: Werner Zenk

CSS bietet uns die Möglichkeit, bestimmte Anweisungen zusammenzufassen und sie auch verkürzt nieder zuschreiben. Das macht die Datei um einiges kleiner und übersichtlicher.

Angenommen Sie haben eine Rahmenformatierung die folgenderweise definiert ist:

border-width:1px; border-style:solid; border-color:#000000;

das Ganze können Sie abkürzen und erreichen genau den gleichen Effekt:

border:1px solid #000000;

• Das gleiche gilt zum Beispiel auch für die Schrift:

font-family:Arial, Helvetica, sans-serif; font-size:12px;
 font-weight:bold; color:#000000;

Die selbe Formatierung erreichen Sie mit wesentlich weniger CSS Angaben:

font: Arial, Helvetica, sans-serif 12px bold #000000;

• Padding Attribut und Margin Attribut kürzen:

padding-top:10px; padding-right:0; padding-bottom:10px; padding-left:0px;

Die selbe Formatierung erreichen Sie auch mit folgenden Angaben:

padding: 10px 0 10px 0;

Die Anweisungen erfolgen immer im Uhrzeigersinn (top, right, bottom, left)
Dieses CSS Statement können Sie noch weiter abkürzen:

padding: 10px 0;

• Die Formatierungen von Hintergründen kann man auch als eine Abkürzung schreiben:

background-color: #00FFFF; background-image: url(bildname.jpg); 
background-position: left top; 
background-repeat: no-repeat; background-attachment: fixed;

Setzen Sie die kurze Form ein:

background: #00FFFF url(bildname.jpg) left top no-repeat fixed;

• CSS Abkürzung für Farbangabe:

color: #FFCC88;

wird zu

color: #FC8;

• CSS Abkürzungen für Rahmen (border):

border-radius: 20px 20px 10px 10px

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!