Frage von Tichuspieler, 22

Fragen zum Thema CSS (indirekt Spezifität)?

Hallo an alle Profis!

Ich lerne gerade CSS und bin da beim Punkt Spezifität. Das Punktesystem habe ich verstanden, es gibt aber für mich dennoch Unklarheiten, von denen ich hoffe, dass man mir diese so erklären kann, dass ich sie verstehe.

Zum einem wird erklärt, dass eine Inline-Stildefinition den höchsten Wert bei der Spezifität hat. Nur: wann ist es sinnvoll, eine CSS-Anweisung direkt ins HTML-Dokument zu schreiben?

Zum anderen wird erwähnt, dass man zum Überschreiben einer Spezifität auch die !important-Regel anwenden kann. Diese wird zwar mit einem Beispiel näher erklärt, gleichzeitig wird aber auch darauf hingewiesen, dass man die !important-Regel nur in Notfällen anwenden sollte. Was ist ein solcher Notfall?

Der dritte (und letzte Punkt) jedoch bringt mich nun total ins Schleudern. In dem Buch, das ich zum Lernen nutze (CSS - Missing Manual von David Sawyer McFarland) steht einerseits geschrieben, dass eine direkte Zuweisung immer gewinnt (also würde ich in einem externen CSS-Style zum Beispiel schreiben p {color:red}; strong {color: blue}; Dann würde das Dokument im Browser so ausschauen, dass der Text in

in Rot, der Text dazwischen, der in eingebettet ist, in blau dargestellt wird. Inzwischen bin ich aber an einen Abschnitt bekommen, der mir erklärt, dass auch da die Spezifität zwischenfunkt. Habe ich also ein .rot {color:rot}; und ein strong {color:blue}: Und im HTML-Dokument

<p ="rot> Text Text Text strong Text Text Text Text

steht der Text im Strong ebenfalls in rot. Mit der Begründung, dass die Klasse ja aufgrund des Wertes 10 im Gegensatz zum Tag, der den Wert 1 trägt, eine höhere Spezifität hat. Jetzt bin ich irritiert: Gilt nun tatsächlich die Spezifität oder gilt, dass die direkte Zuweisung gewinnt?

Für die Antworten bedanke ich mich im Voraus Ganz liebe Grüße Tichuspieler

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von abbrechen, 10

Man sollte css absolut niemals direkt ins html Dokument schreiben.
Es gibt Fälle, in denen du das jedoch sehen wirst. Skripte schreiben Eigenschaften z.B. direkt ins html. Aber momentan wohl eher uninteressant für dich.

Nun denn, zum import. Bislang hatte ich nur einen Fall, bei dem das tatsächlich "nötig" war und das war mit Bootstrap. Kurze Erklärung. Bootstrap ist ein Framework, dass dir die später, nach den Grundlagen, in vielen Fällen helfen kann. Es hat aber auch manches vordefiniert. z.B. dass a:visited eine bestimmte Farbe hat. In dem Fall muss man eine Datei in Bootstrap öffnen und den Wert anpassen. Dafür war ich zu faul und habe in meine eigene Datei geschrieben, dass a:visited z.B. #000 sein soll und es mit !important durchgesetzt.
Aber wie gesagt, braucht man praktisch nie. Es gibt immer eine Lösung.

Deine letzte Frage ist etwas verwirrend, aber ich glaube zu meinen, was du willst. Das verhält sich wie folgt.
Das Dokument wird von oben nach unten gelesen, weshalb bei

p {color: red;}
p {color: blue;}

p rot sein würde.
Klassen sind höherwertig als tags, weshalb bei

<p class="text">Hallo Welt</p>

p { color: blue;}
.text { color: red;}

Das p mit der Klasse "text" rot wäre.

Und IDs sind höherwertiger als Klassen. Weshalb bei

<p id="intro" class="text">Hallo Welt</p>

p { color: blue;}
.text { color: red;}
#intro {color: orange;}

Der Text orange wäre.

Kommentar von Tichuspieler ,

Hallo erstmal! Danke für eure Antworten und gleichzeitig Entschuldigung dafür, dass ich mich erst jetzt wieder melde - die Arbeit rief, und ich musste dem Rufe leider folgen ...

Danke für die Erklärung mit Bootstrap. Ich muss gestehen, ich konnte mit dem Begriff nichts anfangen.

Ich hatte auch mal gelernt, dass es immer besser ist, externe Stylesheets einzubinden, deswegen ja auch meine Frage, wann es sinnvoll ist, es direkt im HTML zu schreiben. Deine Worte bestätigen mir aber, dass es nicht verkehrt war, was ich gelernt habe (also nur externe Stylesheets).

Wenn ich es richtig verstehe, ist !important eher etwas, was so gut wie nie zum Einsatz kommt.

Was ich befürchte, ist, dass meine dritte Frage von mir doch etwas unglücklich formuliert war. Ich versuche es anders:

Laut meinem Lehrbuch heißt es, dass eine direkte Stilanweisung immer ausgeführt wird, selbst wenn die Vererbung etwas anderes sagt. Bleiben wir beim Beispiel mit p und strong

Würde ich in der CSS schreiben, das P blau ist und im HTML dann einen Tag p, in das ein strong eingebettet ist, dann wäre der Text innerhalb des strong-Tags in derselben Farbe wie der p-Tag, weil strong ja ein Kind von p ist und demzurfolge dessen Werte annimmt.

Wenn ich im CSS jedoch schreibe, das p = blau ist und strong = rot, dann würde der Text im p blau sein, der im strong hingegen rot.

Wenn ich jedoch in CSS eine Klasse im CSS schreibe (z.B. .orange) und für strong ein grün, dann jedoch im HTML-Code schreibe p class="orange" und darin den strong-Tag einbette, dann wird dieser ja orange, obwohl es doch heißt, dass direkt angegebene Stilanweisungen durchgeführt werden.

Deswegen bin ich so irritiert. Im Prinzip ist es jetzt nicht das Thema, das CSS so zu schreiben, dass es passt wie es passen soll. Ich wollte nur wissen, was jetzt richtig ist und warum.

GLG

Tichuspieler

Kommentar von abbrechen ,

Direkte Angaben sind nicht vererbbar, weil das beim Nutzen mit JavaScript tierische Fehler hervorrufen würde. Wie gesagt, schreibt JavaScript, wenn du darüber das css manipulierst, die Änderungen direkt ins html, damit sie von nichts blockiert werden. Angenommen, du hast eine "Die Passworteingabe ist falsch" Notiz bei deinem LogIn-Feld und darunter, warum auch immer, noch weiteren Text verschachtelt. Du möchtest bei einer falschen Passworteingabe den genannten Satz rot färben. Wäre ja dann doof, wenn der restliche Text auch rot wird.

Hier mal ein Beispiel, wie was wirkt: http://codepen.io/anon/pen/BQBYLa

Antwort
von triopasi, 10

Ich hatte zuletzt einen Fall, wo Farben von Feldern aus der DB gelesen werden und auch geändert werden sollen, ohne das CSS zu ändern, da theoretisch verschiedene Benutzer verschiedene Farben anlegen können, und diese kA von CSS haben... Deshalb wird das inline gesetzt ;) (Nur ein Beispiel.)

Wenn du zB Bootstrap nutzt aber für einzelne Elemente eigene Styles willst, dann ist es einfach leichter ne eigenen CSS anzulegen und Sachen via !important zu überschreiben, als die in Bootstrap zu ändern...

Könntest du dein Beispiel nochmal als Bild oder so posten, damits nicht so verwirrend ist? Aber eig. müsste immer die höchste Spezifität gewählt werden..

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten