Fragen zum Thema CSS (indirekt Spezifität)?

... komplette Frage anzeigen

2 Antworten

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.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Tichuspieler
01.11.2016, 22:03

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

0
Kommentar von abbrechen
02.11.2016, 23:37

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

0

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..

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?