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:44] kdemircimodul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:51] (aktuell) kdemirci
Zeile 103: Zeile 103:
   - Der dritte Absatz verwendet den Klassenselektor p.hinweis.warnung, wo alles recht ähnlich formatiert wird wie im zweiten Absatz.   - Der dritte Absatz verwendet den Klassenselektor p.hinweis.warnung, wo alles recht ähnlich formatiert wird wie im zweiten Absatz.
   - 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:   - 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, 
 +   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; 
 +
 + 
 +/* 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 140% 
 +   Hintergrundfarbe auf grau 
 +*/ 
 +.kopffuss { 
 +  font-size: 140%; 
 +  background: #f5f5f5; 
 +
 + 
 +/* Schriftgröße auf 130%  
 + */ 
 +.bigfont { font-size: 130%; } 
 + 
 +.warnung { color: blue; } 
 +</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> 
 +  <header class="kopffuss">Kopfzeile</header> 
 +  <nav class="bigfont">Navigation</nav> 
 +  <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> 
 +  </main> 
 +  <footer class="kopffuss">Fußzeile</footer> 
 +  </body> 
 +</html> 
 +</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.1740725094.txt.gz
  • Zuletzt geändert: 2025/02/28 07:44
  • von kdemirci