css-Lehrgang zweiter Tag

Was euch bevorsteht:

  • Teil 1:
    • Das Universalattribut *
    • Selektoren
    • Verschachtelte Selektoren
  • Teil2:

    Das Universalattribut "*"

    Vielleicht ist euch schon aufgefallen, dass die Box, obwohl wir für padding-left:0px angegeben haben, nicht ganz in der linken Ecke ist. Das liegt daran, dass die Browser für margin und padding eine Voreinstellung haben. Diese Voreinstellung kann u.U. sehr lästig sein. Daher wäre es gut, wenn wir diese abschalten können. Dies ist tatsächlich möglich, und zwar mit dem Universalattribut "*". Geben wir folgendes ein:

    css-lehrgang universalattribut

    Das Ergebnis:

    css-lehrgang universalattribut

    Wir sehen, dass nun nicht nur die Box genau am linken Rand ist, sondern auch die Texte. Auch die anderen Ausrichtungen haben sich, wenn sie zwischenzeitlich nicht schon überschrieben wurden, geändert.

    Die css-Eigenschaften "border" haben wir ja schon ausführlich behandelt.

    Selektoren

    Die Selektoren sind in css ein so zentrales Thema, dass wir es jetzt ausführlich behandeln sollten. Sie sind die Verbindung zwischen den Formaten im Head der html-Datei bzw. in der externen Datei, in der die css-Eigenschaften ausgelagert sind und den html-Elementen im body der html-Datei.

    Der Grundaufbau ist immer gleich:

    Selektor{css-Eigenschaft bzw. Stylesheet-Angabe;}

    Den Universalselektor habe ich bereits erwähnt.

    *{
    font-size:14px;
    }

    Als Typselektor bezeichnet man ein html-Element wie "<p>" oder "<h1>"

    h1{
    font-family:arial, verdand, sans-serif;
    }

    class-Selektoren sind Selektoren mit einem beliebigen Namen. Ich kann praktisch jedem Element eine Klasse zuweisen. Das schauen wir uns einmal etwas genauer an.

    css-lehrgang Selektoren

    Wir erhalten folgendes Ergebnis:

    css-lehrgang Selektoren

    In diesem Beispiel habe ich unterschiedlichen Selektoren die gleiche Klasse zugewiesen. Dadurch erhalten diese die gleiche Eigenschaft, in diesem Fall die Farbe grün.

    Es ist auch möglich, einem Element mehrere Klassen zuzuweisen.

    css-lehrgang Selektoren

    Dies ist das Ergebnis:

    css-lehrgang Selektoren

    Dem zweiten p-Tag habe ich die Klassen "gruen" und "unterstrich" zugewiesen, so dass zur Farbe grün nun auch noch die Eigenschaft "unterstrichen" hinzukommt.

    h2 hat sogar drei Klassen zugewiesen bekommen:

    • gruen
    • unterstrich
    • rahmen

    Eine interessante Möglichkeit, um durch Klassen-Optimierung den Selektoren die Eigenschaften zuzuweisen.

    ID-Selektoren sollen pro html-Seite nur einmal vorkommen. Zwar nimmt es, soviel ich weiß, kein Browser übel, wenn man eine ID mehrmals verwendet. Trotzdem sollte man sich von Anfang an angewöhnen, eine ID nur einmal zu vergeben, da man später, wenn man mit JavaScript arbeitet, Probleme bekommen könnte. Testen wir einmal ein bisschen:

    css-lehrgang Selektoren

    Unser Test bringt folgendes Ergebnis:

    css-lehrgang Selektoren
    • Getrennt durch Komma kann ich einer Klasse und einer ID die gleichen Eigenschaften zuweisen.
    • Wie wir an der ersten h2-Überschrift sehen, können wir einem Selektor nicht mehrere IDs zuweisen.
    • Wir können eine ID mehrmals verwenden, sollten dies aber nicht tun.

    Wie schon erwähnt können wir einem Selektor nur eine ID zuweisen. Aber folgendes können wir tun:

    css-lehrgang Selektoren

    In diesem Beispiel haben wir einem Selektor eine id und zwei Klassen zugewiesen. Wir wir sehen, funktioniert dies:

    css-lehrgang Selektoren

    Attributabhängigge Selektoren sind Selektoren, die ein bestimmtes Attribut mit oder ohne einem bestimmten Wert enthalten. Klingt komplizierter als es ist. Schauen wir uns dies an einem Beispiel an.

    css-lehrgang Selektoren

    Wir haben zwei h1-Elementen über das Attribut "wert" je einen Wert zugewiesen.

    css-lehrgang Selektoren

    Wir sehen, dass beide Überschriften nun blau sind, da beide das Attribut "wert" enthalten. Die zweite Überschrift hat zusätzlich einen Rahmen, da der Wert "5" mit dem des einen Selektors übereinstimmt.

    Mit diesen Attributen kann man aber noch mehr anstellen:

    css-lehrgang Selektoren

    Das Ergebnis:

    css-lehrgang Selektoren

    Das h1-Tag enthält ein Attribut mit mehreren Werten, getrennt durch ein Leerzeichen. Das Zeichen "~" ([Alt Gr] - [+]) besagt nun, dass die Eigenschaft dann zugewiesen wird, wenn ein Attribut den entsprechenden Wert enthält.

    Es gibt noch eine Möglichkeit:

    css-lehrgang Selektoren

    Wir sehen:

    css-lehrgang Selektoren

    Das Zeichen "|" ([Alt Gr] - [<]) bedeutet, dass zur Zuordnung dieser Eigenschaft das Attribut genau den Wert oder den Wert gefolgt von einem Bindestrich enthalten muss.

    Anhand des ersten h1-Tags sehen wir, dass sich dies nicht in einer Aufzählung von Attributwerten anwenden lässt.

    Verschachtelte Selektoren

    Nun wollen wir die Verwirrung komplett machen. Keine Angst, gemeinsam werden wir es schon schaffen.

    Fangen wir mir der einfachsten Variante an: Selektor Selektor.

    Dazu ein Beispiel:

    css-lehrgang verschachtelte Selektoren

    Der Quellcode liefert uns:

    css-lehrgang verschachtelte Selektoren

    In diesem Fall wird dem em-Tag die Farbe rot dann zugewiesen, wenn er sich innerhalb eines h1-Tags befindet. Der em-Tag innerhalb des h2-Tags bleibt schwarz.

    Nächste Variante: Selektor > Selektor:

    css-lehrgang verschachtelte Selektoren

    Die Anzeige im Browser:

    css-lehrgang verschachtelte Selektoren

    Das ">" weist dem Selektor nur dann die Eigenschaft zu, wenn er genau auf den übergerodneten Selektor folgt. Da in der zweiten h1-Überschrift zwischen dieser und dem em-Tag ein span-Tag ist, wird diese Eigenschaft diesmal nicht zugewiesen.

    Weiter geht es mit Selektor * Selektor:

    css-lehrgang verschachtelte Selektoren

    Das Ergebnis:

    css-lehrgang verschachtelte Selektoren

    Jetzt wird die Eigenschaft nur dann zugewiesen, wenn sich das Tag mindestenz zwei Ebenen unter dem übergeordneten Tag befindet.

    Die Kombination Selektor + Selektor:

    css-lehrgang verschachtelte Selektoren

    Zur Ausgabe kommt:

    css-lehrgang verschachtelte Selektoren

    Die Eigenschaft wird nur dann zugewiesen, wenn das html-Tag direkt auf das nach dem vorhergehenden Tag folgt, aber nur dann, wenn das vorhergehende Tag bereits geschlossen wurde.

    Dies war der erste Teil des zweiten Tages. Weiter geht hier zum css-Lehrgang zweiter Tag zweiter Teil.



« zurück