Klassen ansprechen

Wenn HTML-Elemente mehrmals vorkommen in einer Seite, aber verschiedene Formate besitzen sollen, werden den HTMLElemente "Klassen" zugewiesen. So können sie einzeln angesprochen werden. Im CSS spricht man von einem "Kontextsensitiven Selektor".

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Klassen ansprechen</title>
	<style>
		body {
			background-color:white;
		}
		h1 {
			color:black;
		}
		h2 {
			color:black;
		}
		p {
			color:black;
			background-color:silver;
		}
	</style>
</head>
<body>
	<h1>Haupttitel</h1>
	<h2 class="top">Untertitel</h2>
	<p class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa consequatur, iste alias quaerat eos nulla cupiditate provident dolorem repellendus ea, quo reprehenderit fugit hic suscipit assumenda. Deleniti adipisci tenetur culpa?</p>
        <h2 class="middle">Untertitel</h2>
	<p class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa consequatur, iste alias quaerat eos nulla cupiditate provident dolorem repellendus ea, quo reprehenderit fugit hic suscipit assumenda. Deleniti adipisci tenetur culpa. dolorem repellendus ea, quo reprehenderit fugit hic suscipit assumenda. Deleniti adipisci tenetur culpa?</p>
	<h2 class="down">Untertitel</h2>
	<p class="down">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa consequatur, iste alias quaerat eos nulla cupiditate provident dolorem repellendus ea, quo reprehenderit fugit hic suscipit assumenda. Deleniti adipisci tenetur culpa?</p>
</body>
</html>


 

            

Aufgabe 3> weiter

Jetzt hast du ein body-Element, einen h1-Titel, drei h2-Untertitel und drei p-Elemente.

Um die einzelnen Element unterscheiden und geziehlt ansprechen zu können, wurden den HTML-Elementen ein zusätzliches Attribut, eine Klasse (Benutzerdefinierte Klassenbezeichnungen) angehängt.

Untersuche die HTML-Elemente im nebenstehenden Editor:
<body>, <h1>,
<h2 class="top"> <p class="top">
<h2 class="middle"> <p class="middle">
<h2 class="down"> <p class="down">
Erkenne die Sytax: HTML-Element - Attribut - Bezeichnung
Alle drei Absätze <p> haben einen grauen Hintergrund, definiert durch eine einzige Regel. Erstelle für den oberen Absatz eine neue Regel.

Schreibe die neue Regel direkt in den Editor (Zeile20), Beispiel:

        p.top {
            color:#0088ee;
            background-color:#ffa100;
        }

Verwende die Hexadezimalen Werte:
Rot: #ff000
Blau: #0088ee
Orange: #ffa100
Violet: #9a00c9
Grün: #00993a

Erstelle auch für die anderen Absätze <p> und Untertitel >h2>.entsprechende Regeln
Untersuche die HTML-Ausgabe
Prüfe das Ergebnis

DB-Table: cssbasic3