Tyylimäärittelyssä hyödylliset XHTML-elementit div ja span

by Tanja Tuulikki Välisalo last modified Nov 27, 2014 07:54 AM

Div ja span ovat XHTML-elementtejä, joiden käyttöön liittyvät aina tyylimääritykset. Erityisesti div-elementti on tärkeä osa asemointia eli verkkosivun layoutin luomista.

Span-elementti

Span-elementti on tekstitason elementti, jonka sisällä voi olla toisia tekstitason elementtejä ja tekstisisältöä. Sen avulla voidaan osia tekstistä määrittää tyyliltään muusta dokumentista poikkeavaksi. Elementti on siis käyttötavoiltaan rinnastettavissa edellisessä luvussa esiteltyihin tyylivalitsimiin, mutta sillä voidaan muokata vielä elementtiäkin pienempää osaa.

Esim. Tekstikappaleen yhden sanan kursivointi.

HTML-dokumentissa:

<p>Tässä on <span>erikoistermi</span>.</p>

CSS-dokumentissa:

span {font-style: italic}

Jos span-elementtiä käytetään samalla sivustolla useammassa eri tarkoituksessa, voi elementit toisistaan aliluokan tai id-attribuutin avulla.

Tehtävä

  • Valitse jostain luomastasi html-dokumentista tekstin joukosta sana, jonka ulkoasua haluat muokata muista poikkeavaksi. Ympäröi sana span-elementillä tyyliin ja anna sille myös class-attribuutti ja sille haluamasi arvo:
<span class="termi">sana</span>

Div-elementti


Div-elementti on lohkotason elementti. Se voi sisältää toisia lohkotason elementtejä, esim. otsikoita, tekstikappaleita, taulukoita jne. sekä tietysti toisia div-elementtejä. Sen avulla voidaankin antaa isoille xhtml-dokumentin osille yhteisiä tyylimäärityksiä.

Esimerkki. Pääotsikolle ja kahdelle tekstikappaleelle voidaan antaa yhteinen reunus:

HTML-dokumentissa:

<div>
<h1>Pääotsikko</h1>
<p>Ensimmäinen tekstikappale</p>
<p>Toinen tekstikappale</p>
</div>

CSS-dokumentissa:

div {
border: solid thin #000000
}

Tehtävä

Erotetaan nyt virusinfo.html-tiedoston sisältö visuaalisesti pääotsikosta luomalla sille reunukset. Mene virusinfo.html-tiedostoon ja luo siellä elementti div, joka sisältää sivun koko sisällön lukuun ottamatta pääotsikkoa! Käytämme div-elementtejä vielä myöhemminkin, joten erota tämä div muista antamalla sille id-attribuutti arvolla sisalto. Muutos näyttää tältä (uudet osat lihavoitu):

Dokumentin alkupäässä:


</h1>
<div id="sisalto">
<ul>
<li>…

ja lopussa:

</div>
</body>
</html>
  • Siirry tyylitiedostoon. Luo siellä tyyli #sisalto.
  • Anna uudelle tyylille valkoinen taustaväri.
  • Tallenna ja tarkastele esikatselussa.

Jotta teksti ei olisi aivan kiinni taustavärin reunassa, on #sisalto-tyyliin syytä lisätä täytettä.

  • Lisää #sisalto-tyyliin padding-ominaisuus ja anna sille 1 % täyte kaikkiin reunoihin.

 

  • Luo myös index-tiedostoon samanniminen div-elementti, niin sama ulkoasu kopioituu myös sinne.

Materiaalin on laatinut Tanja Välisalo