Klassen zusammenlegen

Das Attribut "Klasse" kann auch mehrfach angewendet werden. Wenn mehere HTML-Elemente die selbe Klasse besitzen, reicht es diese Klasse zu formatieren. Die Regeln werde in diesem Fall kumuliert (Klassen werden mehrfach angewendet - mehere Klassen können gesetzt werden).

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Klassen zusammenlegen</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 4> weiter

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

Du hast in der vorangegangenen Aufgabe jedes Element mit Klasse einzeln angesprochen. Du kannst auch die Klasse ohne das Element formatieren. das führt dazu, dass du drei Gruppen mit jeweils einem Untertitel und einem Absatz ansprechen kannst: "top", "middle", "down".

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">
Erstelle für jede Klasse eine neue Regel: .top .middle .down

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

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

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

Untersuche die HTML-Ausgabe
Prüfe das Ergebnis

DB-Table: cssbasic4