Verwenden der class Attribut
Das HTML - class Attribut macht es möglich , gleich Stile für Elemente mit den gleichen Klassennamen zu definieren.
Hier haben wir drei <div> Elemente , die auf den gleichen Klassennamen - Punkte:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most
populous city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of
France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
</body>
</html> Versuch es selber " London
London ist die Hauptstadt von England. Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, mit einem Großraum von mehr als 13 Millionen Einwohnern.
Stehend auf der Themse, London wurde von den Römern eine große Siedlung für zwei Jahrtausende, seine Geschichte zu ihrer Gründung geht zurück, die es Londinium benannt.
Paris
Paris ist die Hauptstadt und bevölkerungsreichste Stadt Frankreichs.
Das Hotel liegt an der Seine, ist es im Herzen der Ile-de-France Region, die auch als Region parisienne bekannt.
Innerhalb seiner Metropolregion ist eine der größten Ballungszentren in Europa, mit über 12 Millionen Einwohnern.
Tokio
Tokio ist die Hauptstadt von Japan, die Mitte des größeren Tokyo-Bereichs, und die bevölkerungsreichste Metropole der Welt.
Es ist der Sitz der japanischen Regierung und dem Kaiserpalast und die Heimat der japanischen Kaiserfamilie.
Die Tokio ist Teil der bevölkerungsreichste Metropole der Welt mit 38 Millionen Menschen und der größten städtischen Volkswirtschaft der Welt.
Verwenden der class Attribut auf Inline - Elemente
Das HTML-class-Attribut kann auch für Inline-Elemente verwendet werden:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span
class="note">Important</span> Heading</h1>
<p>This
is some <span
class="note">important</span> text.</p>
</body>
</html> Versuch es selber "