Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
modul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:46] kdemircimodul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:51] (aktuell) kdemirci
Zeile 168: Zeile 168:
  
 **HTML** **HTML**
-<code>+<code html>
 <!doctype html> <!doctype html>
 <html> <html>
Zeile 182: Zeile 182:
   <h1>Klassenselektor</h1>   <h1>Klassenselektor</h1>
   <p>Das p-Element ohne einer Klasse.</p>   <p>Das p-Element ohne einer Klasse.</p>
-  <p class="hinweis">Das p-Element mit der Klasse <code>hinweis</code>.</p> +  <p class="hinweis">Das p-Element mit der Klasse hinweis.</p> 
-  <p class="hinweis warnung">Das p-Element mit den Klassen <code>hinweis warnung</code>.</p> +  <p class="hinweis warnung">Das p-Element mit den Klassen hinweis warnung.</p> 
-  <p class="warnung">Das p-Element mit der Klasse <code>warnung</code>.</p> +  <p class="warnung">Das p-Element mit der Klasse warnung.</p> 
-  <p class="hinweis bigfont">Das p-Element mit den Klassen <code>hinweis bigfont</code>.</p>+  <p class="hinweis bigfont">Das p-Element mit den Klassen hinweis bigfont.</p>
   </main>   </main>
   <footer class="kopffuss">Fußzeile</footer>   <footer class="kopffuss">Fußzeile</footer>
Zeile 191: Zeile 191:
 </html> </html>
 </code> </code>
 +
 +===== 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="special"> kann daher wie folgt notiert werden:
 +
 +<code>
 +div#special
 +</code>
 +
 +oder nur
 +
 +<code>
 +#special
 +</code>
 +
 +Der Vorteil von elementname#id im Gegensatz zu #id kann eventuelle Versehen desselben id-Attributwert vorbeugen. Eine Validierung deckt solche fehlerhaften Umstände sofort auf.
 +
 +**Beispiel**
 +
 +**CSS**
 +<code css>
 +/* Datei: style.css */
 + 
 +/* Schwarzer Rahmen,
 +   Zentrierter Text,
 +   5 Pixel Abstand von oben
 + */
 +#header,
 +#nav,
 +#footer { 
 +  text-align:center;
 +  border: 1px solid black;
 +  margin-top: 5px;
 +  padding: 5px;
 +  font-family: Verdana, Arial;
 +}
 +
 +/* Schriftgröße auf 140%
 +   Hintergrundfarbe auf grau
 +*/
 +#header,
 +#footer {
 +  font-size: 140%;
 +  background: #f5f5f5;
 +}
 +
 +div#main { margin: 20px; }
 +
 +/* Grauer Text
 + */
 +h1,
 +abbr {
 +  color: gray;
 +  font-family: Verdana, Arial;
 +}
 +
 +/* Schriftfamilie für p-Elemente
 + */
 +p { font-family: Verdana, Arial; }
 +
 +/* Absatztext für einen Hinweis
 + */
 +p.hinweis {
 +  margin-left: 50px;
 +  border-left: 10px solid green;
 +  padding-left: 5px;
 +}
 +
 +/* Absatztext für einen Hinweis als Warnung
 + */
 +p.hinweis.warnung {
 +  border-left: 10px solid red;
 +  border-top: 2px solid red;
 +  border-right: 10px solid red;
 +  border-bottom: 2px solid red;
 +  text-align: center;
 +}
 +
 +/* Schriftgröße auf 130% 
 + */
 +.bigfont { font-size: 130%; }
 +</code>
 +
 +**HTML**
 +<code html>
 +<!doctype html>
 +<html>
 +  <head>
 +    <title>Klassenselektor</title>
 +    <meta charset="UTF-8">
 +   <link rel="stylesheet" type="text/css" href="style.css">
 +  </head>
 +  <body>
 +  <div id="header">Kopfzeile</div>
 +  <div id="nav">Navigation</div>
 +  <div id="main">
 +  <h1>Klassenselektor</h1>
 +  <p>Das p-Element ohne einer Klasse.</p>
 +  <p class="hinweis">Das p-Element mit der Klasse hinweis.</p>
 +  <p class="hinweis warnung">Das p-Element mit den Klassen hinweis warnung.</p>
 +  <p class="warnung">Das p-Element mit der Klasse warnung.</p>
 +  <p class="hinweis bigfont">Das p-Element mit den Klassen hinweis bigfont.</p>
 +  </div>
 +  <div id="footer">Fußzeile</div>
 +  </body>
 +</html>
 +</code>
 +
 +===== 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.
 +
  • modul/m287/learningunits/lu02/einfache-selektoren.1740725192.txt.gz
  • Zuletzt geändert: 2025/02/28 07:46
  • von kdemirci