Klassenattribut

6.1 Das Klassenattribut und das Style-Tag

Aber das ist nicht alles. Nachdem Hunderte von „Stilen“ erfunden worden waren, stellte sich die Frage: Wie verwendet man sie? Und dann kamen sie auf die Idee, sie in „Klassen“ einzuteilen. Dies sind natürlich nicht die gleichen Klassen wie in Java. Nur spezielle Stilgruppen.

Und wenn Sie vor der Verwendung von „Klassen“ ein Bild hatten:

       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

Nun könnte es geschrieben werden als:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

Wir haben ein spezielles erstellt «style» pictureund die Stilwerte aus dem übertragen style. Und dann haben wir das <img>- und das „style“-Bild mit dem Tag verknüpft class.

6.2 Selektor, Arten von Selektoren

Diese separat wiedergegebenen Stile wurden als classesoder bekannt selectors. Sie verfügen über mehrere wichtige Funktionen.

Man html-elementkann mehrere Selektoren haben. Ihre Namen sind mit einem Leerzeichen gekennzeichnet. Beispiel:

       <img src="logo.png" class="picture main">
    

Einer der Gründe, warum wir hier auf Selektoren eingegangen sind, besteht darin, dass sie automatisch angewendet werden können. Und diese nützliche Eigenschaft wird in Zukunft sehr oft genutzt werden. Einschließlich Java-Entwicklern.

Hier ist eine kurze Liste davon:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

Sie müssen sich nicht alles merken. Aber es wäre gut, wenn Sie diese Tabelle ein paar Mal studieren würden und sich das alles in Ihrem Kopf festsetzen würde. Ohne das Web im modernen Leben nirgendwo und im Web – nirgendwo ohne Selektoren.