HTML5 ja CSS3 Osa 9: Div ja Span

Vectr
Vectr ohjelman uutuudet
2016/05/17
scribus
Scribus työympäristö
2016/05/25
Näytä kaikki

HTML5 ja CSS3 Osa 9: Div ja Span

Nämä kaksi ovat hyviä kandidaatteja edellisessä osassa opetelluilla id:llä ja classilla muotoiltaviksi, sillä niillä ei ole mitään ennalta määrättyä tarkoitusta. Ennen HTML5:n uusia rakenne-elementtejä (näistä myöhemmin lisää) käytettiin diviä todella paljon sivun asetteluun, ja sillä on yhä paikkansa, jos et pysty käyttämään jossain kohtaa uusia elementtejä. (Voit lukea siitä lisää HTML Doctorin sivulta.). Käytä kuitenkin uusia rakenne-elementtejä aina kun pystyt, ne tuovat mukanaan myös merkityksen!

Kaksi viimeistä kappaletta muotoiltu divin avulla alla olevassa esimerkissä. (tyyli: .huomio {color: #ff0000}
<p>Vilu mulle virttä virkkoi, sae saatteli runoja.</p>
<div class="huomio">
<p>Vilu mulle virttä virkkoi, sae saatteli runoja. </p>
<p>Vilu mulle virttä virkkoi, sae saatteli runoja.</p>
</div>  

Spania taas näkee usein esim lauseen sisällä, missä sitä on käytetty jonkin tietyn sanan/tekstin osan muotoiluun, koska se ei sisällä rivinvaihtoa, kuten vaikkapa <p>.Tehdään ensin tyyli: .khan {color: #ff0000}

Ja käytetään sitä muuttamaan tietty osa tekstistä punaiseksi:
<p> Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemahan, sukuvirttä suoltamahan, lajivirttä laulamahan.<span class="khan">Sanat suussani sulavat, puhe'et putoelevat, kielelleni kerkiävät, hampahilleni hajoovat.</span> Veli kulta, veikkoseni, kaunis kasvinkumppalini! Lähe nyt kanssa laulamahan, saa kera sanelemahan yhtehen yhyttyämme, kahta'alta käytyämme!</p>

 

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Spam Blocking by WP-SpamShield

This site uses Akismet to reduce spam. Learn how your comment data is processed.