Bernhard_4711 hat geschrieben: ↑Di 3. Okt 2023, 09:33
Das sagt mir leider gar nichts! Ich bin autodidaktischer prozeduraler C-Programmierer. Sobald es um Klassen, Methoden etc. geht, bin ich raus. Das ist für mich "rocket science"...
CSS ist nicht so eine Programmierung wie Objektive Programmierung in C++ oder PHP, sondern "Klassen" sind in CSS eine Benennnung von einem oder mehreren HTML Elementen, damit sie mittels CSS mit diesem Namen ansprechbar sind.
Man kann z.B. mehrere DIV-Boxen mit einem Klassennahmen versehen und dann einen roten Hintergrund einfügen. Das geht fast mit allen HTLM-Elementen. Warum das mit Radiobuttons und Häckchen in Formularen nicht geht, liegt tief in den Gründungszeiten des HTML verborgen.
Beispiel:
https://www.w3schools.com/css/tryit.asp ... ntax_class
Mit der Spezifität wirds etwas komplizierter, weil das manchmal Hexenwerk ist.
CSS in einer Datei beschreibt ein HTML-Element.
CSS im HTML-Dokument kann wichtiger gelten als CSS in der extra Datei.
CSS direkt im HTML eingebaut als Attribut gilt als vorrangig zum externen CSS.
Darum sollte man sich beim Programmieren sehr gut überlegen, ob man der Faulheit wegen CSS direkt ins HTML mit einorpgrammiert.
Da tut man sich hinterher sehr schwer, das von außen anders zu gestalten.
Eine CSS-Klasse haben wir ja oben erklärt, die wird im CSS dann als . dargestellt.
Daneben ist die ID sehr wichtig, weil sie in einer HTML-Seite nur einmal vorkommen darf, im Gegensatz zu einer Klasse. Und somit ist die ID auch vorrangig gegenüber eine Klasse. Mit einer ID spreche ich nur ein einzige Element an in der ganzen Seite, sie wird als # dargestellt.
ID schlägt Klasse.
Das sieht man schön in dieser Seite, # ist höherranging als .
https://wiki.selfhtml.org/wiki/CSS/Tuto ... fit.C3.A4t
Unspezifische Zuordnungen wie div { color:red;} machen alle div-Boxen mit roter Schrift.
Im Contenido könnte man schreiben, div#content{ color:red;} und dann würde man genau die div-Box meinen, die die ID "content" hat.
Wegen der Vererbung im CSS werden dann alle Texte innerhalb des content-div rot, außer man deklariert das nachfolgend in einer CSS Anweisung anders, so wie: div#content h1 {color:green;}, dann sind alle Überschriften im Contenido Content grün und der Rest an Text immer noch rot.
Man beachte das Leerzeichen vor dem h1, das ist wichtig, weil ich meine mit der Schreibweise dieses eine div mit der ID="content" und aber alle h1 Überschriften, die sich in dieser Div-Box befinden.
Das kann man so richtig schon miteinander kombinieren und verschachteln bis man irgendwann einen Zustand hat wie bei einer Bootstrap-Webseite.
Irgendwann blickt da kaum einer mehr durch und dann fangen die Leute an, es mit !important; hinter den CSS-Anweisungen zu versehen, damit sich überhaupt noch was ändert.
Das ist dann ein Offenbarungseid, weil man sich verschachtelt hat.
Ja, und dann ist es fast schon Rocketscience, sowas wieder ordentlich zu entwirren und richtig zu setzen ohne !important.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.
