HTML-Klasse

Kategorisieren Sie HTML (Setzen Sie Klassen), damit wir CSS-Stile für die Klasse der Elemente definieren können.

Setzen Sie gleiche Stile für gleiche Klassen oder unterschiedliche Stile für unterschiedliche Klassen.

Beispiel

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    Hintergrundfarbe:schwarz;
    Farbe:weiß;
    Abstand:20px;
    ausfüllen:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London ist die Hauptstadt von England. 
Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, 
mit einem städtischen Gebiet von über 13 Millionen Einwohnern.
</p>
</div> 
</body>
</html>

Selbst ausprobieren

Kategorisierte Blockelemente

Der HTML <div>-Element istBlockelementeEs kann als Container für andere HTML-Elemente verwendet werden.

Legen Sie die Klasse des <div>-Elements fest, damit wir für gleiche <div>-Elemente die gleiche Klasse festlegen können:

Beispiel

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    Hintergrundfarbe:schwarz;
    Farbe:weiß;
    Abstand:20px;
    ausfüllen:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London ist die Hauptstadt von England. 
Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, 
mit einem städtischen Gebiet von über 13 Millionen Einwohnern.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris ist die Hauptstadt und bevölkerungsreichste Stadt Frankreichs.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo ist die Hauptstadt Japans, der Mittelpunkt des Großen Tokioter Raums,</p>
und die bevölkerungsreichste städtische Region der Welt.</p>
</div>
</body>
</html>

Selbst ausprobieren

Kategorisierte Inline-Elemente

Das HTML <span> Element ist ein Inline-Element und kann als Textcontainer verwendet werden.

Die Einstellung der Klasse des <span> Elements ermöglicht es, gleiche Stile für gleiche <span> Elemente zu setzen.

Beispiel

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Wichtige</span> Überschrift</h1>
</body>
</html>

Selbst ausprobieren