CSS: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 58: | Zeile 58: | ||
} // end test1 | } // end test1 | ||
</pre> | </pre> | ||
== Schriftgrössen == | |||
Im Artikel [https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ rem anwenden] wird erklärt, welche Vorteile die Einheit <code>rem</code> gegenüber <code>em</code> bietet, wenn man diese korrekt einsetzt und auch, welchen Bezug diese auf fixe Einheiten wie <code>px</code> hat. | |||
[[Kategorie:Computer]][[Kategorie:Software]][[Kategorie:Programmierung]] | [[Kategorie:Computer]][[Kategorie:Software]][[Kategorie:Programmierung]] |
Aktuelle Version vom 12. Juni 2022, 14:13 Uhr
Aufbau der css Datei
Die folgenden Anweisungen können natürlich bei Bedarf jederzeit kombiniert werden. Sie sind getrennt, damit man sieht, welcher Schritt was bewirkt.
Selektoren (Elemente) kombinieren oder einzelne Eigenschaften wählen
Will man mehrere html-Elemente mit einer Anweisung gleichzeitig ansprechen, so wird dies folgendermassen aufgebaut:
- h1, h2, h3 ... { gewünschte Eigenschaft; }
Will man nur Elemente mit einer gewissen Eigenschaft auszeichnen:
- h1[align] {...;} // Alle h1, welche mit align ausgerichtet werden
- h1[align = center] {...;} // Nur h1, welche mit align auf center ausgerichtet sind
Man kann auch nur auf einen Teil der Eigenschaft (Parameter) filtern:
- h1[name~=Text] {...;} // Betrifft alle h1, welche im name etwas mit Text drin haben
- h1[name|=Text] {...;} // Betrifft alle h1, welche im name etwas mit Text drin haben
Der Unterschied in der Aufzählung ist die Trennung der Eigenschaft. Bei Abständen nimmt man ~= und bei Unterstrichen |=
Der * ist wie bei anderen System ein Platzhalter für alles und beeinflusst daher alles:
- *[align] {...;} // Betrifft alle Elemente, welche mit align ausgerichtet werden
- * {...;} // Betrifft ALLE! Elemente
Selektoren verschachteln
Will man eine Formatierung nur dann haben, wenn ein Element als Kindelement auftaucht, dann wird dies folgendermassen formatiert:
- Vaterelement Kindelement {...;} // Wichtig ist der Abstand
- Vaterelement > Kindelement {...;} // Nur dann gültig, wenn es ein direktes Kind ist ->
- Vaterelement * Kindelement {...;} // Es muss mindestens ein Element dazwischen sein ->
- Vaterelement + Kindelement {...;} // Hier ist eigentlich Vater / Mutter gemeint, da es nachfolgend ist ->
Klassen (class) und IDs
Will man der Klasse test etwas zuweisen, wird dies folgendermassen zugewiesen:
- *.test oder einfach .test
Bei einer ID ist es das Rautezeichen:
- #id {...;}
- p#id {...;} // Die Formatierung geschieht nur, wenn die ID einem p-Element gehört. Ein h1 mit der ID würde ignoriert
Alle Klassen von Paragraphen:
- p.klassenname
Positionierung (position) und Z-Index
Kann nur mit div (oder span) gemacht werden:
- absolut -> Absolute Massangabe gemessen vom vorherigen
- relative -> relative Positionierung im Verhältnis zur eigentlichen Position
- static -> Kein Beeinflussung vom normalen Aufbau
Nach der Angabe der Positionierungsart muss natürlich noch die Positionsangabe gemacht werden. Diese bezieht sich aufs vorher definierte Element. Es stehen top, bottom, left und right zur Verfügung.
Da es mit der Verschiebung zu Überlappungen kommen kann (das zuletzt definierte Element ist oben), kann man die Darstellung mit dem Z-Index manipulieren und andere Elemente in den Vordergrund bringen. Je höher der Index, um so weiter oben liegt das Element.
Der Bereich des Elementes kann natürlich mit height und width festgelegt werden.
#test1 { position: absolute; left: 10px; top: 20px; width: 100px; height: 100px; z-index: 4; } // end test1
Schriftgrössen
Im Artikel rem anwenden wird erklärt, welche Vorteile die Einheit rem
gegenüber em
bietet, wenn man diese korrekt einsetzt und auch, welchen Bezug diese auf fixe Einheiten wie px
hat.