Korzystanie z class Atrybut
HTML class atrybut umożliwia zdefiniowanie równe style dla elementów o tej samej nazwie klasy.
Tutaj mamy trzy <div> elementy, które wskazuje na tą samą nazwą klasy:
Przykład
<!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> Spróbuj sam " Londyn
Londyn jest stolicą Anglii. Jest to najbardziej zaludnione miasto w Wielkiej Brytanii, z metropolii powierzchni ponad 13 milionów mieszkańców.
Stojąc na Tamizie, Londyn jest jednym z głównych rozliczenia przez dwa tysiąclecia, jej historia sięga do jej założenia przez Rzymian, którzy nazwali go Londinium.
Paryż
Paryż jest stolicą i najbardziej zaludnione miasto Francji.
Położony na brzegu Sekwany, jest w samym sercu regionu Ile-de-France, znany również jako region Parisienne.
W jego obszarze metropolitalnym jest jednym z największych skupisk ludności w Europie, ponad 12 milionów mieszkańców.
Tokio
Tokio jest stolicą Japonii, centrum Greater Tokyo Area, a najbardziej zaludnionych metropolii na świecie.
Jest siedzibą japońskiego rządu i Pałacu Cesarskiego, a domem japońskiej rodziny cesarskiej.
Tokyo prefektura jest częścią na świecie najbardziej zaludnionego obszaru metropolitalnego z 38 milionów ludzi i największej na świecie gospodarki miejskiej.
Korzystanie z class atrybutu Inline Elements
Atrybut klasa HTML mogą być również wykorzystywane do elementów inline:
Przykład
<!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> Spróbuj sam " Sprawdź się z ćwiczeniami!
Ćwiczenie 1 » ćwiczenie 2» ćwiczenie 3 »