CSS3 Styles überschreiben

CSS3 Styles überschreiben - Dummies

Bei geerbten CSS3-Stilen kommt die Möglichkeit hinzu, eine geerbte Stilregel zu überschreiben. Sehen Sie sich zum Beispiel den folgenden Code an, um eine Vorstellung davon zu bekommen, was dies bedeuten könnte:

 overRide. html Körper {Farbe: Rot;} p {Farbe: Grün;}. myClass {color: blue;} #whatColor {color: purple;} Dieses div hat nur den Stil vom Körper. 

Dies ist ein regulärer Absatz mit Absatzstil

Dieser Absatz ist ein Mitglied einer Klasse

Dieser Absatz ist ein Mitglied einer Klasse und hat eine ID, beide mit Stilregeln.

Die Frage ist folgende: Welche Farbe wird das whatColor-Element anzeigen? Es ist ein Mitglied des Körpers, also sollte es rot sein. Es ist auch ein Absatz und Absätze sind grün. Es ist auch ein Mitglied der myClass-Klasse, also sollte es blau sein. Schließlich heißt es whatColor, und Elemente mit dieser ID sollten violett sein.

Vier scheinbar widersprüchliche Farbregeln werden auf dieses schlechte Element übertragen. Welche Farbe wird es sein?

CSS hat ein klares Ranking-System für die Handhabung dieser Art von Situation. Im Allgemeinen treten spezifischere Regeln über allgemeine Regeln hinaus. Hier ist der Vorrang (von der höchsten zur niedrigsten Priorität):

  1. Benutzerpräferenz

    Der Benutzer hat immer die endgültige Wahl, welche Stile verwendet werden. Benutzer müssen keine Stile verwenden und können das Stylesheet immer für ihre eigene lokale Kopie der Seite ändern. Wenn ein Benutzer einen speziellen Stil anwenden muss (zum Beispiel einen hohen Kontrast für Menschen mit Sehbehinderungen), sollte er immer diese Option haben.

  2. Lokaler Stil

    Ein lokaler Stil (definiert mit dem style-Attribut im HTML-Code) hat die höchste Priorität von entwicklerdefinierten Stilen. Es überstimmt alle anderen Stile.

  3. id

    Ein Stil, der an eine Element-ID angehängt ist, hat ein hohes Gewicht, da er alle anderen im Stylesheet definierten Stile überschreibt.

  4. Klasse

    An eine Klasse angefügte Stile überschreiben den Stil des Elements des Objekts. Wenn Sie also einen Absatz mit einem grünen Farbton haben, der zu einer blau eingefärbten Klasse gehört, ist das Element blau, da Klassenstile Elementstile auszeichnen.

  5. Element

    Der Elementstil hat Vorrang vor jedem seiner Container. Wenn sich beispielsweise ein Absatz innerhalb eines div befindet, hat der Absatzstil die Möglichkeit, sowohl den div als auch den body zu überschreiben.

  6. Containerelement

    divs, Tabellen, Listen und andere Elemente, die als Container verwendet werden, übergeben ihre Stile. Wenn sich ein Element in einem oder mehreren dieser Container befindet, kann es Stilattribute von ihnen übernehmen.

  7. Körper

    Alles, was im Körperstil definiert ist, ist eine Standardvorgabe für die gesamte Seite, wird jedoch von allen anderen Stilen überschrieben.

Im OverRide. HTML-Beispiel hat die ID-Regel Vorrang, so dass der Absatz in lila angezeigt wird.