Utilizzando La class Attribute
Il codice HTML class attributo consente di definire stili uguali per elementi con lo stesso nome della classe.
Qui abbiamo tre <div> elementi che punta allo stesso nome della classe:
Esempio
<!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> Prova tu stesso " Londra
Londra è la capitale dell'inghilterra. E 'la città più popolosa del Regno Unito, con un'area metropolitana di oltre 13 milioni di abitanti.
In piedi sul fiume Tamigi, Londra è stata un importante insediamento per due millenni, la sua storia che risale alla sua fondazione da parte dei Romani, che la chiamarono Londinium.
Parigi
Parigi è la capitale e la città più popolosa della Francia.
Situato sul fiume Senna, è al cuore della regione Ile-de-France, conosciuta anche come la regione parisienne.
All'interno della sua area metropolitana è uno dei più grandi centri di popolazione in Europa, con oltre 12 milioni di abitanti.
Tokyo
Tokyo è la capitale del Giappone, al centro della Greater Tokyo Area, e l'area metropolitana più popolosa del mondo.
E 'la sede del governo giapponese e il Palazzo Imperiale, e la casa della famiglia imperiale giapponese.
La prefettura di Tokyo fa parte dell'area metropolitana più popolosa al mondo con 38 milioni di persone e più grande economia urbana del mondo.
Utilizzando La class attributo Elementi in linea
L'attributo class HTML può essere utilizzato anche per elementi in linea:
Esempio
<!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> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 »