Lektionen
Start
Jetzt lernen
CodeGym /Java Kurs /Frontend SELF DE /Einführung in Selektoren

Einführung in Selektoren

Frontend SELF DE
Level 2 , Lektion 4
Verfügbar

1. Tag <style>

Wenn ein HTML-Element zu viele Styles hat, kann man diese in ein spezielles Element auslagern — der Tag style. Normalerweise wird er im Tag <head> platziert und sieht so aus:

CSS+HTML+JavaScript
          
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Beispiel</title>
    <style>
        body {
            background-color: lightgray;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Das ist ein Beispiel für die Nutzung von Styles im Tag <style>.</p>
</body>
</html>
Java university

Jetzt muss man nicht mehr eine lange Reihe von Styles im Attribut <body> von style schreiben, sondern kann sie in den Tag style auslagern. Das ist echt praktisch.

Das Gleiche gilt für den Tag <p> (Paragraph). Außerdem wird der Style, der im Tag <style> im <head> angegeben ist, auf alle Paragraphen im Dokument angewendet, selbst wenn es mehrere Tausend davon gibt. Das liegt daran, dass die Styles im Tag <style> innerhalb von Selektoren beschrieben sind.

5.2 Selektoren

Selektoren sind eine Methode, um HTML-Elemente auszuwählen, auf die die CSS-Eigenschaften angewendet werden. Es gibt verschiedene Arten von Selektoren:

Tag-Selektor

Wendet Styles auf alle Elemente eines bestimmten Typs an. Man gibt einfach den Namen des Tags mit geschweiften Klammern danach an. 


tagname {
    // Styles
}

tagname kann alles sein: body, image, a, p, … alles

Klassen-Selektor

Man kann CSS-Eigenschaften auch nicht an ein bestimmtes Tag binden, sondern einfach einer Gruppe von CSS-Eigenschaften einen Namen geben. Solch eine Gruppe nennt man in CSS Klasse. Dieser Stil wird auf alle Elemente mit einer bestimmten Klasse angewendet. Klassen werden mit dem Attribut class in HTML definiert.

CSS+HTML+JavaScript
      
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.important {
            font-weight: bold;
        }
    </style>
</head>
<body>
<p class="important">Das ist ein wichtiger Text.</p>
<p>Das ist ein normaler Text.</p>
</body>
</html>

Im obigen Beispiel wird nur der Text des ersten Paragraphs fett formatiert, da wir dort den Stil/Klasse „important“ angewendet haben. Beim zweiten Paragraph wurde so ein Stil nicht angewendet.

Beim Beschreiben von Styles im Tag <style> kann man es auf 3 Arten angeben:

  • tagname { …}
  • tagname.classname { …}
  • .classname { …}

Das Thema zu Selektoren werden wir ausführlicher besprechen, wenn wir CSS lernen. Ich erzähle euch jetzt davon, weil in den HTML-Beispielen CSS vorkommen wird und ich oft CSS in den Style-Tag auslagern und Selektoren nutzen werde, um Styles bestimmten HTML-Elementen zuzuweisen.

Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION