Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
modul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:37] – kdemirci | modul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:51] (aktuell) – kdemirci | ||
---|---|---|---|
Zeile 9: | Zeile 9: | ||
==== Übersicht der einfachen CSS-Selektoren ==== | ==== Übersicht der einfachen CSS-Selektoren ==== | ||
- | | Selektor | Bezecihnung |Auswahl | HTML-Beispiel | | + | | **Selektor** | **Bezecihnung** | **Auswahl** | **HTML-Beispiel** | |
| <color # | | <color # | ||
- | | .klname | Klassenselektor | Element mit der Klasse klname | <p class=" | + | | <color #ed1c24>.klname</ |
+ | | <color # | ||
+ | ==== HTML-Elemente mit dem Typselektor ansprechen ==== | ||
+ | |||
+ | Der Typselektor (alias Elementselektor) spricht die HTML-Elemente direkt mit dem Elementnamen an. Angewendet wird diese Regel auf alle Elemente desselben Typs im HTML-Dokument. Dabei ist es irrelevant, an welcher Stelle im HTML-Dokument diese Elemente geschrieben sind, welcher Klasse diese zugehören oder welchen Bezeichner sie haben. | ||
+ | |||
+ | **Beispiel**\\ | ||
+ | Bei den HTML-Elementen < | ||
+ | |||
+ | **Beispiel eines Stylesheets mit nur Typselektoren.**\\ | ||
+ | <code css> | ||
+ | /* Schwarzer Rahmen, | ||
+ | | ||
+ | 5 Pixel Abstand von oben */ | ||
+ | header, | ||
+ | nav, | ||
+ | footer { | ||
+ | text-align: | ||
+ | border: 1px solid black; | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | |||
+ | /* Grauer Text */ | ||
+ | h1, abbr { | ||
+ | color: gray; | ||
+ | } | ||
+ | |||
+ | /* Grauer gepunkteter Rahmen */ | ||
+ | p { | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **Beispiel: Der Aufruf des Stylesheets über die HTML-Seite. ** | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Klassenselektor ===== | ||
+ | |||
+ | Mit dem Klassenselektor werden HTML-Elemente gewählt, die zu einer bestimmten Klasse gehören. Ein bestimmten Klassennamen wird mit dem globalen HTML-Attribut class für (fast) alle Elemente vergeben | ||
+ | |||
+ | **Beispiel**\\ | ||
+ | Das HTML-Element <p> wird mit dem Klassennamen < | ||
+ | |||
+ | HTML-Code: | ||
+ | < | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | CSS-Code nur auf p-HTML-Elemente anwendbar: | ||
+ | < | ||
+ | p.hinweis { color: red; } | ||
+ | </ | ||
+ | |||
+ | oder CSS-Code auf jedes HTML-Elemente anwendbar: | ||
+ | < | ||
+ | .hinweis { color: red; } | ||
+ | </ | ||
+ | |||
+ | **Beispiel** | ||
+ | HTML-Elemente können auch mehrere Klassen auf einmal verwenden. Hier werden dem p-Element die beiden Klassen hinweis und bigfont zugewiesen. | ||
+ | |||
+ | < | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | ==== Beispiel ==== | ||
+ | Nun ein einfaches HTML-Dokument, | ||
+ | |||
+ | - Der erste Absatz mit dem p-Element verwendet keine Klasse, weshalb hier nur der Typselektor p mit der Anpassung der Schriftfamilie darauf angewendet wird. Dieselbe Schriftfamilie wird auch bei den anderen vier Absätzen verwendet. | ||
+ | - Der zweite Absatz wird mit dem Klassenselektor p.hinweis formatiert, wo der Absatz von links um 50 Pixel eingerückt und ebenfalls links ein grüner Rand mit 10 Pixeln hinzugefügt wird. Der Abstand zu diesem Rand beträgt 5 Pixel. | ||
+ | - Der dritte Absatz verwendet den Klassenselektor p.hinweis.warnung, | ||
+ | - Der vierte Absatz mit der Klasse warnung wird nicht formatiert, weil für diese Klasse keine Stilangaben notiert wurden. Wollen Sie für diesen vierten Absatz mit der Klasse warnung eine CSS-Regel mit einem Klassenselektor definieren, müssten Sie diese wie folgt notieren: | ||
+ | |||
+ | **CSS** | ||
+ | <code css> | ||
+ | /* Datei: style.css */ | ||
+ | |||
+ | /* Schwarzer Rahmen, | ||
+ | | ||
+ | 5 Pixel Abstand von oben | ||
+ | */ | ||
+ | header, | ||
+ | nav, | ||
+ | footer { | ||
+ | text-align: | ||
+ | border: 1px solid black; | ||
+ | margin-top: 5px; | ||
+ | padding: 5px; | ||
+ | font-family: | ||
+ | } | ||
+ | |||
+ | /* Grauer Text | ||
+ | */ | ||
+ | h1, | ||
+ | abbr { | ||
+ | color: gray; | ||
+ | font-family: | ||
+ | } | ||
+ | |||
+ | /* Schriftfamilie für p-Elemente | ||
+ | */ | ||
+ | p { font-family: | ||
+ | |||
+ | /* Absatztext für einen Hinweis | ||
+ | */ | ||
+ | p.hinweis { | ||
+ | margin-left: | ||
+ | border-left: | ||
+ | padding-left: | ||
+ | } | ||
+ | |||
+ | /* Absatztext für einen Hinweis als Warnung | ||
+ | */ | ||
+ | p.hinweis.warnung { | ||
+ | border-left: | ||
+ | border-top: 2px solid red; | ||
+ | border-right: | ||
+ | border-bottom: | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /* Schriftgröße auf 140% | ||
+ | | ||
+ | */ | ||
+ | .kopffuss { | ||
+ | font-size: 140%; | ||
+ | background: #f5f5f5; | ||
+ | } | ||
+ | |||
+ | /* Schriftgröße auf 130% | ||
+ | */ | ||
+ | .bigfont { font-size: 130%; } | ||
+ | |||
+ | .warnung { color: blue; } | ||
+ | </ | ||
+ | |||
+ | **HTML** | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <header class=" | ||
+ | <nav class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | <footer class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== ID-Selektoren ===== | ||
+ | Mit dem ID-Selektor werden HTML-Elemente gewählt, welche eine bestimmte ID (anhand des id-Attributs) zugeordnet haben. Im Gegensatz zu Klassen sind IDs immer einzigartige Elemente in einem HTML-Dokument. Es darf nur einem Element im gesamten HTML-Dokument diese ID zugewiesen werden. Ein solcher ID-Selektor wird mit dem Rautenzeichen (oder Gatterzeichen – #), gefolgt von der ID notiert. Der ID-Selektor für <div id=" | ||
+ | |||
+ | < | ||
+ | div#special | ||
+ | </ | ||
+ | |||
+ | oder nur | ||
+ | |||
+ | < | ||
+ | #special | ||
+ | </ | ||
+ | |||
+ | Der Vorteil von elementname# | ||
+ | |||
+ | **Beispiel** | ||
+ | |||
+ | **CSS** | ||
+ | <code css> | ||
+ | /* Datei: style.css */ | ||
+ | |||
+ | /* Schwarzer Rahmen, | ||
+ | | ||
+ | 5 Pixel Abstand von oben | ||
+ | */ | ||
+ | #header, | ||
+ | #nav, | ||
+ | #footer { | ||
+ | text-align: | ||
+ | border: 1px solid black; | ||
+ | margin-top: 5px; | ||
+ | padding: 5px; | ||
+ | font-family: | ||
+ | } | ||
+ | |||
+ | /* Schriftgröße auf 140% | ||
+ | | ||
+ | */ | ||
+ | #header, | ||
+ | #footer { | ||
+ | font-size: 140%; | ||
+ | background: #f5f5f5; | ||
+ | } | ||
+ | |||
+ | div#main { margin: 20px; } | ||
+ | |||
+ | /* Grauer Text | ||
+ | */ | ||
+ | h1, | ||
+ | abbr { | ||
+ | color: gray; | ||
+ | font-family: | ||
+ | } | ||
+ | |||
+ | /* Schriftfamilie für p-Elemente | ||
+ | */ | ||
+ | p { font-family: | ||
+ | |||
+ | /* Absatztext für einen Hinweis | ||
+ | */ | ||
+ | p.hinweis { | ||
+ | margin-left: | ||
+ | border-left: | ||
+ | padding-left: | ||
+ | } | ||
+ | |||
+ | /* Absatztext für einen Hinweis als Warnung | ||
+ | */ | ||
+ | p.hinweis.warnung { | ||
+ | border-left: | ||
+ | border-top: 2px solid red; | ||
+ | border-right: | ||
+ | border-bottom: | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /* Schriftgröße auf 130% | ||
+ | */ | ||
+ | .bigfont { font-size: 130%; } | ||
+ | </ | ||
+ | |||
+ | **HTML** | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <div id=" | ||
+ | <div id=" | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Klassenselektor vs. ID-Selektor ===== | ||
+ | Der Klassenselektor ist der Selektor mit dem Punkt, und der ID-Selektor ist der Selektor mit der Raute. Ebenso sollten Sie sich merken, dass Sie zwar jedes HTML-Element mit einer oder auch mehreren Klassen versehen können, aber grundsätzlich nur mit einer ID. Im Gegensatz zu Klassen müssen IDs in einem HTML-Dokument immer einzigartig sein. Daher darf eine bestimmte ID auch nur einmal in einem HTML-Dokument vorkommen. Auch ist es nicht erlaubt, einem HTML-Element mehr als eine ID zuzuweisen. | ||