4 Wege um CSS-Anweisungen einzubinden

Datum 7. April 2009 - 21:03 | Autor verfasst von: Blog-Experiment | Kommentare Kommentare: 6 Kommentare

css_codeIch hatte mich im gestrigen Artikel schon ein wenig mit CSS beschäftigt und möchte dieses direkt etwas weiterführen, indem ich euch hier einmal ein paar verschiedene Möglichkeiten und Techniken vorstellen möchte, wie man mit CSS zu Werke gehen kann.

Der größte Vorteil von CSS-Stylesheets ist sicherlich die mögliche Trennung von Design und Struktur. Ich kann also bequem alles, was mit Farben, Ausrichtungen, Stilen zu tun hat von meinem Code trennen. Je nach Art, wie man die CSS-Anweisungen einbindet, kann man dies unterschiedlich stark ausnutzen.

Vielen werde ich damit sicherlich nichts grundlegend Neues erzählen, aber so eine kleine Übersicht mit Beispielcode kann immer mal ganz praktisch sein.

  • Einbindung direkt im Tag:
    Beispiel:

    <b style="font-size:10pt; color:#ffffff;">

    Vorteil: Hohes Maß an Individualität
    Nachteil: Viel Arbeit, Redundanz, wenig Übersicht, von daher nur in Einzelfällen zu empfehlen.

  • Einbindung im HTML-Header:
    Beispiel:

    <head>
<style type="text/css"> b { font-size:10pt; color:#ffffff; } </style>
</head>

    Vorteil: Man kann global Elemente innerhalb der Datei ansprechen.
    Nachteil: gilt nur für eine einzelne Datei. Bei größeren Projekten mit einheitlichem Stil nicht zu empfehlen

  • Formatierung in einer externen CSS-Datei:
    Beispiel: Dabei wird zunächst im  HTML-Header folgende Code-Zeile eingebunden.

    <link href="style.css" type="text/css" rel="stylesheet" />

    Die entsprechend angesprochene Datei muss natürlich vorhanden sein. Dort nimmt man dann alle weiteren Formatierungen vor, wie man es auch oben zwischen den “style”-Tags machen würde.
    Vorteil: Muss nur einmal global gemacht werden und kann dann bequem in alle Dateien eingebunden werden. Spätere Endungen wirken sich auch global aus.
    Der HTML-Code bleibt schlank und leichter überschau- und editierbar.
    Nachteil: Die globale Auswirkung kann evtl aber auch Probleme bringen, wenn man beispielsweise auf eine Mischform setzt und nicht nur Anweisungen in eine externe Datei lagert. Dazu weiter unten noch ein wenig mehr.

  • Strukturierung mit @import:
    Beispiel:

    /* Header-Elemente */
@import url(header.css);

    Vorteil: Man kann in einer Datei weitere Stylesheet-Dateien einbinden und dort dann beispielsweise Spezialformatierungen vornehmen, die sich auf einen bestimmten Bereich beziehen. So bleibt das Projekt bei vielen Stylesheet-Angaben übersichtlicher.
    Nachteil: einige ältere Browser haben mit dieser Angabe Probleme. In allen neuen Browsern sollte dies aber funktionieren.

Es gibt innerhalb von CSS verschiedene Wege, um einzelne Elemente gezielt anzusprechen. Diese möchte ich hier ebenfalls nochmals kurz auflisten:

  • Tag ansprechen:
    Beispiel:

    * { Style-Angaben; } // bezieht sich auf alle Tag-Elemente
body { Style-Angaben; }
b { Style-Angaben; }
div { Style-Angaben; }
pre { Style-Angaben; }

    Bezieht sich auf ALLE Tag-Elemente des definierten Typs.

  • Tag verschachteln
    Man kann auch verschachtelte Tags ansprechen. Will man also z.B. genau den Tag “<b>” innerhalb eines Absatzes ansprechen, nicht aber abseits davor vorkommende “<b>”-Tags, dann klappt das wie folgt:

    p b { Style-Angaben; }

    Man schreibt einfach genau die Kette an Tag-Elementen hintereinander, die auf den speziellen Fall zutrifft. Großer Vorteil des ganzen ist, dass man sich bei geschicktem Einsatz dieser Methode viel Arbeit sparen kann, da nicht jedes Mal class- oder id-Attribute gesetzt werden müssen.

  • ID
    Jedem Tag-Element kann eine ID zugeordnet werden, über welches man es später auch via CSS ansprechen kann. Wie der Name ID aber schon deutlich macht, darf ein ID-Name innerhalb eines Dokuments nur ein einziges Mal vorkommen. Man kann später also auch immer nur ein einziges Element ansprechen, dieses dafür aber ganz gezielt.
    Beispiel:

    <div id="wrap"></div>

    Dieses Element spricht man innerhalb des CSS-Codes später so an:

    #wrap { Style-Angaben; }
  • Class
    Etwas ähnliches ist das “Class”-Attribut. Im Gegensatz zur ID dürfen Klassen-Namen beliebig oft identisch sein. Es eignet sich also sehr gut, um unterschiedliche HTML-Tags mit denselben Eigenschaften auszustatten.
    Beispiel: Wir möchten, dass sowohl fette als auch kursive Texte die gleiche Farbe haben.

    <i class="red">kursiver Text</i> <b class="red"></b>

    Dieses Element spricht man innerhalb des CSS-Codes später so an:

    .red { color:red; }

    Man kann allerdings auch Tag und Class miteinander kombinieren, um eine eindeutigere Zuweisung zu erreichen:

    b.red { color:red; }

    bezieht sich also nur auf den durch die <b>-Tags fett hervorgehobenen Text von der Klasse “red”. Auf alle <b>-Tags, die nicht von der Klasse “red” sind, hat diese Definition keinerlei Einfluss.

  • Class / ID verschachteln:
    Man kann ganz analog zur Verschachtelung der Tag-Ausdrücke auch alle drei Dinge miteinander verschachteln.
    Um das ganze Mal etwas anschaulicher zu machen:
    Wir definieren eine Hülle um eine Gruppe von Elementen mittels eines Div-Containers. Diesen Container machen wir mit einer ID eindeutig. Innerhalb dieses Containers befinden sich nun zum einen normale Tag-Elemente als auch solche, die mit der class-Angabe versehen sind.Hier der HTML-Code:

    <div id="content">
<b class="red"><i>Text 1</i> Text 2</b>
<b>Text 3 <a name="url">Text 4</a> <i>Text 5</i></b>
</div>

    Und die dazugehörenden CSS-Formatanweisungen:

    #content { width:500px; margin:auto; } /* Content-Bereich von der Breite 500px, mittig platziert */
#content b { font-weight:bold; } /* bezieht sich sowohl auf <b> als auch auf <b class="red"> - spricht Text 1 bis Text 5 an */
#content b.red { color:red; } /* Alternativ #content .red { color:red; } - spricht Text 1 und Text 2 an */
#content .red i { padding:7px; } /* spricht nur Text 1 an */
a {} /* spricht Text 4 an */
b a {} /* spricht ebenfalls Text 4 an. Würde aber im Gegensatz zur vorherigen Zeile einen außerhalb von <b></b> stehenden Link nicht ansprechen */

    Bei dieser Mischform gibt es aber eine ganze Menge zu beachten. Vor allem beim gewünschten Überschreiben von definierten Formaten für ein ID-Element durch ein Class-Element wird CSS nicht so reagieren, wie sich das vielleicht mancher zunächst denken mag. Grund dafür ist das Stichwort Gewichtung. Wer etwas tiefer in diese Materie einsteigen möchte, dem kann ich das Tutorial von Peter Kropff ans Herz legen.



Hat dir dieser Artikel gefallen? Abonniere doch unseren RSS-Feed und bleibe über alle weiteren Updates auf dem Laufenden!


Schlagwörter: , ,

Zuletzt aktualisiert am 7. April 2009

Trackback-URI: | Gepostet in CSS-Wissen



6 Kommentare zu “4 Wege um CSS-Anweisungen einzubinden”

  1. Antu sagt:
    7. April 2009 um 21:30

    Beim zweiten Beispiel hast du das type=”text/css” vergessen. ;-) Ansonsten aber eine sehr schöne Übersicht, grade für CSS-Anfänger sicher sehr nützlich.

  2. Blog-Experiment sagt:
    7. April 2009 um 21:42

    Hallo Antu,

    danke dir für den Hinweis. Ist verbessert. :)

  3. Sergej Müller sagt:
    10. April 2009 um 07:58

    Wobei von der Methode mit @import extrem abgeraten wird: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

  4. Blog-Experiment sagt:
    10. April 2009 um 09:22

    @Sergej: vielen Dank für die interessante Ergänzung.

  5. Amélie sagt:
    17. Oktober 2010 um 22:20

    Hi, finde es voll toll, dass ich diesen Blog hier erspaeht habe.Ich bin wirklich hingerissen, dass ich diesen Beitrag hier entdeckt habe. Moechte im Vorraus schon jetzt fuer diesen klasse Eintrag bedanken. Ich meine, die Art und Weise, wie er präsentiert wurde, ist sehr ansprechend. Eventuell ein wenig mehr Bilder. ;) Dessen ungeachtet habe ich diesen Blog unter meinen Favoriten gespeichert, um zu sehen, falls was Neues kommt. Vielen vielen Dank Eure Amélie

  6. Blog-Experiment sagt:
    18. Oktober 2010 um 15:05

    Danke dir für das Lob.

Hinterlasse eine Antwort