19. HTML Luokathttps://peda.net/id/a0e9cc8020a2016-05-23T07:55:53+03:00https://peda.net/:static/533/peda.net.logo.bg.svg<div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div>
Lukittujen elementtien luokitteluhttps://peda.net/id/e35126f820a2016-05-23T08:05:13+03:00<p>HTML luokka atribuutti tekee mahdolliseksi määritellä tietyn tyylin tietylle <div> elementille:</p>
<div>
<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupunki. Se on suosituin kaupunki Englannissa, sen metropolialueella on yli 13 miljoonaa asukasta.</p>
</div>
<div>
<h2>Pariisi</h2>
<p>Pariisi on Ranskan pääkaupunki<br/>
<br/>
</p>
</div>
<div>
<h2>Tokio</h2>
<p>Tokio on Japanin pääkaupunki, se on maailman suosituin metropoli alue maailmassa.</p>
</div>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>!DOCTYPE<span> html</span><span>></span></span><br/>
<span><span><</span>html<span>></span></span><br/>
<span><span><</span>head<span>></span></span><br/>
<span><span><</span>style<span>></span></span><span><br/>
div.cities <span><span>{</span><br/>
background-color<span><span>:</span>black<span>;</span></span><br/>
color<span><span>:</span>white<span>;</span></span><br/>
margin<span><span>:</span>20px<span>;</span></span><br/>
padding<span><span>:</span>20px<span>;</span></span><br/>
<span>}</span></span> <br/>
</span><span><span><</span>/style<span>></span></span><br/>
<span><span><</span>/head<span>></span></span><br/>
<span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="cities"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Lontoo<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>>Lontoo on Englannin pääkaupunki<span>. </span><span>Se on suosituin kaupunki Englannissa</span><span>, </span><span>sen metropolialueella on yli 13 miljoonaa asukasta.</span></span></span>.<span><span><</span>/p<span>></span></span><br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="cities"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Pariisi<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>>Pariisi on Ranskan pääkaupunki</span></span>.<span><span><</span>/p<span>></span></span><br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="cities"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Tokio<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>>Tok<span>io on Japanin pääkaupunki</span><span>, se on maailman suosituin metropoli alue maailmassa.</span></span></span><span><span><</span>/p<span>></span></span><br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span><br/>
<span><span><</span>/html<span>></span></span></div>
</div>
2016-05-23T08:04:54+03:00Avointen elementtien luokitteluhttps://peda.net/id/4527541020a2016-05-23T08:07:38+03:00<p>HTML luokka atribuutti myös antaa mahdollisuuden määritellä tyylejä tietyille <span> elementeille:</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>!DOCTYPE<span> html</span><span>></span></span><br/>
<span><span><</span>html<span>></span></span><br/>
<span><span><</span>head<span>></span></span><br/>
<span><span><</span>style<span>></span></span><span><br/>
span.note <span><span>{</span>font-size<span><span>:</span>120%<span>;</span></span>color<span><span>:</span>red<span>;</span></span><span>}</span></span><br/>
</span><span><span><</span>/style<span>></span></span><br/>
<span><span><</span>/head<span>></span></span><br/>
<span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>h1<span>>Minun</span></span><span><span><</span>span<span> class<span>="note"</span></span><span>>tärkeä</span></span><span><span><</span>/span<span>></span></span>otsikko<span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>p<span>>Tämä on</span></span><span><span><</span>span<span> class<span>="note"</span></span><span>>tärkeä</span></span><span><span><</span>/span<span>></span></span> text.<span><span><</span>/p<span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span><br/>
<span><span><</span>/html<span>></span></span></div>
</div>
2016-05-23T08:07:38+03:00