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:46] – kdemirci | modul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:51] (aktuell) – kdemirci | ||
---|---|---|---|
Zeile 168: | Zeile 168: | ||
**HTML** | **HTML** | ||
- | < | + | < |
< | < | ||
< | < | ||
Zeile 182: | Zeile 182: | ||
< | < | ||
< | < | ||
- | <p class=" | + | <p class=" |
- | <p class=" | + | <p class=" |
- | <p class=" | + | <p class=" |
- | <p class=" | + | <p class=" |
</ | </ | ||
<footer class=" | <footer class=" | ||
Zeile 191: | Zeile 191: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | ===== 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. | ||
+ |