En ota kantaa taulukkotaittoon, ja oletuksellisesti käytän luokkavalitsinta CSS-määrittelyjen kohdistamiseksi ulkoisesta stylesheetistä XHTML-dokumenttiin. Käsittelemme siis oppaassa esimerkiksi index.html-nimistä dokumenttia sekä style.css-nimistä stylesheeettiä.
Esimerkkilähtökohtana käytetään seuraavaa yksinkertaista pohjaa:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Sivun otsikko</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Sisältö
</body>
</html>
#1 Ulkoasun asemointi
Ulkoasun rakentaminen kannattaa 99%:ssa tavallisista tapauksista aloittaa ympäröivällä divillä, tämä helpottaa sivuston asemointia ja CSS-määrittelyjen käyttöä.
- Koodi: Valitse kaikki
<div class="runko">
Sisältö
</div>
CSS: Voimme keskittää kyseisen divin seuraavasti:
- Koodi: Valitse kaikki
.runko {
width: 600px;
margin: 10px auto;
}
CSS: Voimme myös purkaa margin-määrittelyn ja asettaa kullekin reunalle oman marginin seuraavasti:
- Koodi: Valitse kaikki
.runko {
width: 600px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
HUOM: Elementille on määriteltävä leveys (width) jotta margin-asemointi toimisi.
CSS: Voit rakennusvaiheessa helpottaa divien hahmottamista lisäämällä stylesheettiin div-valitsimella kaikille diveille reunukset:
- Koodi: Valitse kaikki
div {
border: 1px solid #000;
}
#2 Rakenteen suunnittelu
Runkodivin sisälle lisätyt divit asettuvat alekkain. Kun haluat kaksi diviä vierekkäin, ympäröi asianomaiset divit uudella runkodivillä. Sivu johon on lisätty header- ja footer-osio saattaa näyttää esimerkiksi seuraavalta:
- Koodi: Valitse kaikki
<div class="runko">
<div class="header">Header</div>
<div class="sisaltorunko">
<div class="oikea">Tämä div asemoidaan oikealle</div>
<div class="vasen">Tämä div asemoidaan vasemmalle</div>
</div>
<div class="footer">Footer</div>
</div>
1. Reunukset (border) vievät molemmilta sivuilta tilaa (1px leveä reunus vie yhteensä 2px tilaa)
2. Marginit (margin) vievät myös tilaa vaikka eivät elementin sisäleveyttä kasvatakaan.
CSS: Tehdään oikealle 150 pikseliä leveä palkki, tällöin vasemmalle jää tilaa 450 pikseliä. Jätetään diveille väliä esimerkiksi 6-10 pikseliä (pelivara reunusten kanssa). Kavennamme tämän hukkatilan suuremmasta divistä (eli vasemmalta). Malli alempana.
CSS: Saamme palkit vierekkäin float-muotoilulla. Ainoastaan siirrettävälle (mielellään lyhyemmälle) palkille määritellään leijunta (float). Varmistamme footer-divin aseman estämällä leijuvien palkkien ryhmittymisen sen vierelle clear-määrittelyllä (both-arvo estää muita elementtejä tulemasta elementin kummallekaan puolelle):
- Koodi: Valitse kaikki
.oikea {
float: right;
width: 150px;
}
.vasen {
width: 440px;
}
.footer {
clear: both;
}
#3 Elementtien tehokas käyttö
Sisällön tyylittely helpottuu kun käytät asianomaisia tageja. Esimerkki monipuolisesta tekstielementtien käytöstä:
- Koodi: Valitse kaikki
<h1>Otsikon koko määräytyy numerosta (h1, h2, h3)</h1>
<p>Kappaleita (p) käyttämällä voit määritellä CSS:llä p-valitsimella (kts. ylempää miten määrittelimme kaikille diveille reunuksen) esimerkiksi kappaleiden etäisyyksiä toisistaan. Älä milloinkaan käytä kappalejakoon rivivaihtoa (br). Huomaa että voit käyttää h#-valitsimia otsikoiden tyylittelyyn suoraan CSS-tiedostosta.</p>
<p>Tekstin korostamiseen käytetään boldausta (strong) ja kursivointia (em). Huomaa että voit käyttää myös niitä valitsimina CSS-tiedostossa ja määritellä näille tageille toivomiasi muotoiluja. HTML:n vanhat b- ja i-tagit eivät kuulu XHTML-dokumenttiin. Kolmas vaihtoehto on span-tagi. Määrittele spanille luokka niin voit käyttää rajattomasti eriluokkaisia span-tageja tekstissäsi. <span class="alleviivattu">Näppärää!</span></p>
<h2>Kaikki otsikoinnit tulee hoitaa h#-tageilla</h2>
CSS: Suorilla valitsimilla voimme tyylitellä haluttuja elementtejä:
- Koodi: Valitse kaikki
p {
line-height: 1.5;
letter-spacing: 1px;
}
h1 {
font-weight: normal;
}
.alleviivattu {
text-decoration: underline;
}
#4 Yhteenveto oppaasta
Et voi oppia xhtml-taittoa ja css-tyylittelyä opiskelematta niitä. Sinun tarvitsee kuitenkin vain ymmärtää tagien ja muotoilujen perustoiminta, kun tiedät miten koodi rakentuu voit soveltaa taitojasi manuaalien avustuksella (suunnittele sivusi ja hae haluttuja muotoiluja oppaista tarpeen mukaan). Ei siis ole tarvetta opiskella kaikkia muotoiluja heti ulkoa, perusymmärrys riittää. Pääset pitkälle jo ymmärtämällä CSS:n valitsimien käytön.
Keskity siis perusteiden ymmärtämiseen ja harjoittele yksinkertaisilla muokkauksilla.
Muiden sivujen tarkastelu on usein opettavaista (lähdekoodin saa yleensä näkyviin klikkaamalla sivua hiiren oikealla napilla ja valitsemalla "Lähdekoodi"-valinnan (tai vastaavan)).
XHTML-dokumentin lopputulos: http://kadon.net/q/materiaali/xcspeg.html
CSS-stylesheetin lopputulos: http://kadon.net/q/materiaali/style.css
(Nyt voin viivatata tänne aina itseään toistavissa avunpyyntötopikeissa div-taitosta.)
