Utilisation de la class d' attributs
Le code HTML class attribut permet de définir des styles égaux pour les éléments avec le même nom de classe.
Ici , nous avons trois <div> éléments qui pointe au même nom de classe:
Exemple
<!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> Essayez vous - même » Londres
Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.
Debout sur la Tamise, Londres a été un règlement important depuis deux millénaires, son histoire qui remonte à sa fondation par les Romains, qui la nommèrent Londinium.
Paris
Paris est la capitale et la ville la plus peuplée de France.
Situé sur la Seine, il est au cœur de la région Ile-de-France, également connu sous le nom de la région parisienne.
Au sein de sa région métropolitaine est l'un des plus grands centres de population en Europe, avec plus de 12 millions d'habitants.
Tokyo
Tokyo est la capitale du Japon, le centre de la région du Grand Tokyo et la région métropolitaine la plus peuplée du monde.
Il est le siège du gouvernement japonais et le palais impérial, et la maison de la famille impériale japonaise.
La préfecture de Tokyo fait partie de la région métropolitaine la plus peuplée du monde avec 38 millions de personnes et la plus grande économie urbaine mondiale.
Utilisation de la class d' attributs sur les éléments Inline
L'attribut class HTML peut également être utilisé pour des éléments en ligne:
Exemple
<!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> Essayez vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 »