Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung
Vorhergehende Überarbeitung
modul:m293:learningunits:lu03:htmselektor [2024/05/13 07:36] – created msutermodul:m293:learningunits:lu03:htmselektor [2024/05/13 08:15] (aktuell) msuter
Zeile 1: Zeile 1:
 ====== LU03c - Selektoren für Elemente ====== ====== LU03c - Selektoren für Elemente ======
 <WRAP center round info 60%> <WRAP center round info 60%>
-Die Attribute ''id'' und ''class'' ...+Die Attribute ''id'' und ''class'' können für jedes HTML-Element verwendet werden. 
 +Sie erlauben uns, in Stylesheets (CSS) oder Javascript bestimmte Elemente zu selektieren.
 </WRAP> </WRAP>
 +
 +===== id =====
 +^ html ^ css ^
 +| <code html>
 +<form id="loginform">
 +  ...
 +</form>
 +</code> | <code css>
 +#loginform {
 +  background-color: #f0f0f0;
 +}
 +</code> |
 +
 +Das ''id''-Attribut ist ein globales Attribut und kann für jedes HTML-Element verwendet werden.
 +Es gibt einem Element eine eindeutige ID (der Wert muss innerhalb des HTML-Dokuments eindeutig sein).
 +
 +Über das ''id''-Attribut können wir ein einzelnes Element selektieren und manipulieren.
 +
 +===== class =====
 +^ html ^ css ^
 +| <code html>
 +<ul>
 +  <li class="navitem">
 +    ...
 +  </li>
 +  <li class="navitem">
 +    ...
 +  </li>
 +</ul>
 +</code> | <code css>
 +.navitem {
 +  color: blue;
 +
 +</code> |
 +
 +Das ''class''-Attribut spezifiziert einen oder mehrere Klassennamen für ein Element.
 +Es wird meist verwendet, um auf eine Klasse in einem Stylesheet zu verweisen. 
 +Dadurch können wir mehrere Elemente selektieren, die alle gleich formattiert werden.
 +
 +Auch in Javascript können wir alle Elemente mit einer bestimmten Klasse auswählen.
 +Dies wird aber nicht ganz so häufig gemacht.
  
  • modul/m293/learningunits/lu03/htmselektor.1715578568.txt.gz
  • Zuletzt geändert: 2024/05/13 07:36
  • von msuter