CSS Kurzschreibweise

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!