CSS Abkürzungen - CSS abkürzen

In CSS ist es möglich umfangreiche Definitionen, die das gleiche Element beschreiben, zusammenzufassen (abzukürzen).

Angenommen wir haben eine Rahmenformatierung, die folgenderweise definiert ist:

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

Das Ganze können wir abkürzen und erreichen genau den gleichen Effekt:

border:1px solid #000000;

Das gleiche gilt z.B. auch für die Schrift. Angenommen, wir haben eine Schrift so formatiert:

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

Dieselbe Formatierung erreichen wir auch mit wesentlich weniger CSS Angaben:

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

Für das padding, margin, border Attribut gilt natürlich das Gleiche:

padding-top:10px; 
    padding-right:0; 
    padding-bottom:10px; 
    padding-left:0;
    
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom:30px;
    margin-left: 5px;
    
    border-top:1px;
    border-right:2px;
    border-bottom:1px;
    border-left:2px;
    

Dieselbe Formatierung erreichen wir auch mit folgenden Angaben:

padding: 10px 0;
    margin:10px 20px 30px 0;
    border:1px 2px;
    

Die body, table, div und weitere Formatierungen von Hintergründen kann man auch als eine Abkürzung schreiben. Statt:

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

Setzen wir die kurze Form ein:

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

CSS Abkürzungen für die Farbangaben:

color: #FFCC99;
    background-color:#ffffff;

wird zu

color: #FC9;

Das dürfte so einige CSS-Files um einige KB kleiner machen.
Viel Erfolg beim Einsetzen!

Überzeugt?

Ich erstelle Ihnen gerne ein individuelles, unverbindliches Angebot nach Ihren Wünschen.

Rufen Sie mich an oder schicken Sie mir eine Anfrage!

Loading