Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS Optimieren: Zusammenfassen, Kombinieren und Verschachteln

CSS Optimieren: Zusammenfassen, Kombinieren und Verschachteln

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Dr. Web Redaktion
  • 17. März 2014

Inhaltsverzeichnis

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; }

Zahlreiche Anweisungen können Platz sparend zu einer einzigen zusammengefasst werden. Der Effekt bleibt derselbe, die Übersichtlichkeit jedoch wird mächtig erhöht.
Das wohl bekannteste Beispiel ist der Rahmen. Rahmenbreite, Rahmenfarbe, Rahmenart. Einzeln definiert, erhalten wir zum Beispiel dies:

border-width:
1px;
border-color: red;
border-style: dotted;

Zusammengefasst sieht es dann so aus:

border: 1px red dotted;

Aber das klappt auch mit Schriften. So kennt man es:

font-size: 12px;
line-height:
120%;
font-family: Verdana,Arial,Helvetica

Und so geht es auch:

font
: 12px/120% Verdana,Arial,Helvetica

Kommata und Schrägstrich sorgen dafür, dass der Browser nichts missversteht.
Ein weiteres Anwendungsgebiet ist das Hintergrundbild. So wird eine Grafik rechts unten platziert:

background-color:
yellow;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position:
bottom right;

Zusammengefasst erhalten wir dies:
background: yellow url(image.jpg) no-repeat bottom right;
Oder Abstände:

margin-top
: 9px;
margin-right : 8px;
margin-bottom : 7px;
margin-left : 6px;

Raffinierter geht es auf diese Weise

margin : 9px 8px 7px 6px;

Mit Padding ist das ebenso möglich.

Kunstvoll geht es nun zu. Angenommen man möchte innerhalb einer Menüleiste andere Formatierungen benutzen, als es auf der übrigen Seite der Fall ist. Andere Schriften, Textauszeichnungen, Farben, was auch immer. In der Folge müssen neue Klassen definiert werden.
Ein Beispiel für eine solche CSS Datei:

 P {
 font-family : Verdana, Arial; color : blue}
H3
{
 font-weight: normal; text-decoration: none;}
.menue {
border: 1px solid black;}
.menueschrift {
 font-family :
Arial; color : red;}
.menueueberschrift {
 font-weight:
bold; text-decoration: underline;}

Stattdessen verschachteln wir:

P
{
 font-family : Verdana, Arial; color : blue}
H3 {
font-weight: normal; text-decoration: none;}
.menue {
 border:
1px solid black;}
.menue P {
 font-family : Arial; color
: red;}
.menue H3
 {font-weight: bold; text-decoration:
underline;}

Wir definieren P und H3, sofern Sie innerhalb des Menüs vorkommen, kurzerhand um. Der Vorteil liegt hier nicht unbedingt innerhalb der CSS- sondern in der HTML-Datei. Man spart sich nämlich die Definition diverser Klassen.
Dies lässt sich weiter auf die Spitze treiben. So werden alle Fettschriften innerhalb eines Absatzes innerhalb des Menüs rot:

.menue P STRONG {color : red;}

Alle übrigen P- oder STRONG-Tags werden nicht beeinflusst. All das kann weit komplexer gedacht werden und bietet eine Menge Raum für zusätzliche Optimierung.

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

SEO7 Logo der Seo-Agentur in Esslingen und Stuttgart.

SEOSEVEN SEO & Webagentur

Esslingen

3m5 webengineers agentur-logo.

TYPO3 & Shopware Agentur – 3m5.

Dresden

Michael Freitag Immobilien-Marketing München logo

Critch GmbH – Immobilienkanzlei FREITAG®

München

Profilbild Dominik Kienzle.

Dominik Kienzle

München

Marco Wydmuch von Glamourpixel fotografiert sich selbst mit einer Canon-Kamera in der Hand.

Glamourpixel Fotodesign

Gelsenkirchen

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑