Kategorien
Design HTML/CSS

CSS Optimieren: Zusammenfassen

Zusammenfassen ist immer dann eine gute Idee, wenn gleiche Anweisungen auf verschiedene Elemente, Klassen oder IDs angewendet werden müssen. Angenommen, Sie möchten Ihre Überschriften in Blau und in der Schriftart Verdana darstellen. Das liest sich dann so:…

Zusammenfassen ist immer dann eine gute Idee, wenn gleiche Anweisungen auf verschiedene Elemente, Klassen oder IDs angewendet werden müssen.

Angenommen, Sie möchten Ihre Überschriften in Blau und in der Schriftart Verdana darstellen. Das liest sich dann so:

 H1 {color : blue; font-family : verdana,arial,helevetica;}
H2 {color : blue; font-family : verdana,arial,helevetica;}
H3 {color : blue; font-family : verdana,arial,helevetica;}

Es geht eleganter. Ein Komma hilft uns dabei:

      H1,H2,H3 {color : blue; font-family : verdana,arial,helevetica;}
    

Was aber, wenn die Styledefinitionen zwar ähnlich, aber nicht identisch sind? Kein Problem, wir arbeiten mit Wiederholungen. Ausgangspunkt sind diesmal unterschiedliche Schriftgrößen, jedoch dieselbe Farbe und Schriftart:

      H1 
{font-size : 1.2.em; color : blue; font-family : verdana,arial,helevetica;}
H2 {font-size : 1.1.em; color : blue; font-family : verdana,arial,helevetica;}
H3 {font-size : 1.0.em; color : blue; font-family : verdana,arial,helevetica;}

Dies ließe sich dann wie folgt abkürzen:

      H1 {font-size : 1.2.em;}
H2 {font-size : 1.1.em;}
H3 {font-size : 1.0.em;}
H1,H2,H3 {color : blue; font-family : verdana,arial, helevetica;}

Das klappt auch prima, wenn es um die Formatierung von Hyperlinks geht. Alles ohne Unterstreichung zeigen? Bitte schön:

      A:link,
A:visited,
A:hover,
A:active { text-decoration: none; }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.