CSS
| Wissen | Können | Projekt |
|---|---|---|
|
|
|
Allgemein
Wie bereits bekannt, erlaubt das style Attribut eines HTML Elements erweiterte Formatierungen. Die Syntax des dort definierten Texts entspricht bereits der CSS Syntax. Aber es ist natürlich umständlich und vor allem schlechter Programmierstil, jedem HTML Element seine eigene Formatierung explizit mitzugeben. Die Formatierung sollte generell von der Strukturierung getrennt werden. Eine erste Möglichkeit besteht darin innerhalb eines style Tags im head Bereich des HTML Dokuments die Formatierungen anzugeben. Die noch bessere Alternative ist einen eigenständige .css Datei. Diese kann im head Bereich des HTML Dokuments einfach eingebunden werden. Innerhalb geschweifter Klammern werden die Definitionem einem HTML Element zugeordnet.
|
Boxmodel
Mit margin werden die Abstände vom äußeren Rand zu den umgebenden Elementen festgelegt. Der border eines Elements gehört in seiner vollen Breite zum jeweiligen Element dazu. Die padding Einstellungen beschreiben den Abstand vom inneren Rand zu den enthaltenen Elementen.
|
Selektoren
Die im vorherigen Beispiel gezeigten CSS Definitionen wurden dort bestimmten HTML Elementtypen zugeordnet. Dies passierte einfach indem der Tag-Name vor die geschweiften Klammern geschrieben wurde. Da aber natürlich zumeist nicht alle Elemente des gleichen Typs auch gleich formatiert werden sollen, gibt es hier noch sehr viele weitere Möglichkeiten für solche Selektoren. Die verbreitetste Art beruht auf den Definitionen von id und class. Jedem HTML Element kann zur eindeutigen Identifikation ein beliebiger id-Attributwert gegeben werden. Zur Gruppierung von Elementen kann das Attribut class verwendet werden. Soll ein Element mehreren Klassen angehören, so können auch mehrere Klassennamen durch Leerzeichen getrennt dem Attribut zugeordnet werden.
Um in CSS ein Element mit einer bestimmten ID zu selektieren, wird anstelle des Typnamen nun der ID-Bezeichner mit vorangestelltem "#" verwendet. Analog können durch vorangestellten "." Klassen selektiert werden. Selektoren können kombiniert werden indem sie durch "," getrennt hintereinander geschrieben werden. Auch diverse Kombinationen hinsichtlich der HTML Struktur sind möglich.
|