Alkupuhe
Edellinen oppaani oli alkukatsaus sivujen teon maailmaan ja toivottavasti pääsit hieman kärryille. Seuraavaksi syvennymme CSS:ssän pariin ja puhumme vähän taulukoiden käytöstä.
CSS-määrittelyjä
Käytetään tuota vanhaa viime oppaassa tehtyä pätkää eli:
- Koodi: Valitse kaikki
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Otsikkosi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sisältö">
<p>HTML on kivaa!</p>
</div>
</body>
</html>
Tämän jälkeen luomme tiedoston, jonka nimi on style.css ja määrittelemme sisällölle fontin, värin, reunukset, sisennykset(padding) sekä mitat. Viimeksi kirjoitimme pienen pätkän css:ssää, joka meni näin #sisältö { background-color: #F0F0F0;}. Background-color siis nimensä mukaisesti määrittää taustavärin ja tässä tapauksessa se määrittää sisältö nimisen divin taustavärin. Väri annetaan heksalukuna, joka on tässä tapauksessa #F0F0F0(tälläinen perusharmaa).
Tietyn värin heksaluvun saat selville helposti vaikkapa jonkun kuvankäsittelyohjelman avulla tai netin avulla, jos käytät GIMP-ohjelmaa niin kaksoisklikkaa väriä ja pääset värin valinta valikkoon. Valikosta löydät kohdan, jossa lukee HTML-merkintä(jos siis sinulla on suomenkielinen GIMP) ja sitten vain copy/pasteat sen css:ssään ja lisäät eteen #-merkin. Rivit erotellaan puolipisteellä (huom. ei ole pakko laittaa, jos {} välissä on vain yksi rivi, mutta olen tottunut laittamaan tuon puolipisteen, joka rivin jälkeen) ja kun kyseessä on div id niin sisältö-sanan eteen tulee #, jos kyseessä olisi div class niin sisältö-sanan eteen tulisi piste. Seuraavaksi määrittelemme fontin eli aluksi nyt lisäämme #sisältö-kohtaan seuraavat rivit:
- Koodi: Valitse kaikki
font-family: sans-serif;
font-size; 14px;
font-weight: normal;
Tässä määrittelemme fontiksi sans-serifin ja fontin kooksi 14pikseliä sekä fontin painoksi normaalin eikä esimerkiksi boldattua. Reunukset ja sisennykset määritellään seuraavanlaisesti:
- Koodi: Valitse kaikki
border-color: #f9f9f9 #f9f9f9 #b5b5b5 #b5b5b5;
border-style: solid;
border-width: thin;
padding-left: 2px;
Border-color määrittää reunujen värit ja tässä esimerkissä annoimme jokaiselle reunalle oman värinsä. Reunat ovat tietyssä järjestyksessä alkaen ylhäältä sitten oikealle jne. Jos annamme kaksi värivaihtoehtoa border-color: #f9f9f9 #b5b5b5 niin ylä ja ala reunukset ovat f9f9f9 värisiä ja vasen ja oikea taas b5b5b5 värisiä. Border-style määrittää reunukset tyylin ja vaihtoehdot ovat none, hidden, dotted, dashed, solid, double, groove, ridge, inset ja outset. Solid on yhtenäinen viiva ja sitä voi käyttää monessa tilanteessa, kun taas melkein kaikki muut pitää erikseen testata ja sillähän sinulle selviää, että minkälaisia nuo loput sitten ovat. Border-width määrittelee reunusten paksuuden, tämän kanssa voit käyttää joko seuraavia vaihtoehtoja: thin, medium, thick tai määrittää oman paksuuden esim. 2cm. Padding-leftillä saamme tekstin ja reunusten väliin haluamme määrän pikseleitä ja paddingillä saisimme määritettyä jokaiseen reunaan saman paksuuden tai vaihtoehtoisesti voisimme antaa jokaiselle oman välinsä käskyillä padding-top, padding-right, padding-bottom- padding-left. Voisimme vielä määritellä sivulle minimi leveyden, jotta sivu pysyisi ”ehjänä” vaikka ikkunaa pienentäisi. Leveyden voisimme myös määritellä prosentteina eli sivun leveys riippuu resoluutiosta ja min-widthillä saamme estettyä sivua menemästä liian pieneksi.
- Koodi: Valitse kaikki
width: 98%;
min-width: 640px;
Tämän jälkeen css:ssän pitäisi näyttää seuraavanlaiselta
- Koodi: Valitse kaikki
#sisältö {
background-color: #F0F0F0;
font-family: sans-serif;
font-size; 14px;
font-weight: normal;
border-color: #f9f9f9 #f9f9f9 #b5b5b5 #b5b5b5;
border-style: solid;
border-width: thin;
padding-left: 2px;
width: 90%;
min-width: 640px;
}
Nyt, kun meillä alkaa olemaan kohtuu hyvä css näin alkuun niin voisimme siirtyä hieman tuon html:llän pariin. Lisätään sisällön yläpuolelle divi, jonka nimeksi tulee navigaatio ja se on id, koska meillä on vain yksi navigaatiopalkki ja laitetaan myös nämä kaksi diviä kolmannen sisään ja nimeksi tulee main.
- Koodi: Valitse kaikki
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Otsikkosi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id=”main”>
<div id=”navigaatio”>
</div>
<div id="sisältö">
<p>HTML on kivaa!</p>
</div>
</div
</body>
</html>
HTML
Lisätään navigaatioon vielä kaksi linkkiä <a href=”index.html”>Koti</a> ja <a href=”about.html”>Tietoa</a> ja tämän jälkeen tallennetaan tämän hetkinen html-tiedosto nimellä index.html ja toisen kerran nimellä about.html. Nyt meillä pitäisi olla 3 tiedostoa index.html, about.html ja style.css. Nyt voisimme antaa navigaatiolle samat tyylimäärittelyt kuin sisällölle ja tämän jälkeen css-tiedosto näyttää seuraavanlaiselta.
- Koodi: Valitse kaikki
#sisältö {
background-color: #F0F0F0;
font-family: sans-serif;
font-size; 14px;
font-weight: normal;
border-color: #f9f9f9 #f9f9f9 #b5b5b5 #b5b5b5;
border-style: solid;
border-width: thin;
padding-left: 2px;
width: 98%;
min-width: 640px;
}
#navigaatio {
background-color: #F0F0F0;
font-family: sans-serif;
font-size; 14px;
font-weight: normal;
border-color: #f9f9f9 #f9f9f9 #b5b5b5 #b5b5b5;
border-style: solid;
border-width: thin;
padding-left: 2px;
width: 98%;
min-width: 640px;
}
Lisätään sisällön ja navigaation väliin parin pikselin väli.
- Koodi: Valitse kaikki
position: relative;
top: 2px;
Position: relative määrittää, että liikutamme sisältö-elementtiä nykyisestä sijainnistaan ja position: absolute taas, että liikutamme sisältö-elementtiä sivun mukaan eli top: 2px; olisi tällöin 2 pikseliä sivun ylälaidasta. Siirtää sivua keskemälle mainin avulla ja koodiksi tulee
- Koodi: Valitse kaikki
position: relative;
left: 1%;
Lopullinen koodi
- Koodi: Valitse kaikki
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Otsikkosi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id=”main”>
<div id=”navigaatio”>
</div>
<div id="sisältö">
<p>HTML on kivaa!</p>
</div>
</div
</body>
</html>
CSS:
#sisältö {
background-color: #F0F0F0;
font-family: sans-serif;
font-size; 14px;
font-weight: normal;
border-color: #f9f9f9 #f9f9f9 #b5b5b5 #b5b5b5;
border-style: solid;
border-width: thin;
padding-left: 2px;
width: 98%;
min-width: 640px;
position: relative;
top: 2px;
}
#navigaatio {
background-color: #F0F0F0;
font-family: sans-serif;
font-size; 14px;
font-weight: normal;
border-color: #f9f9f9 #f9f9f9 #b5b5b5 #b5b5b5;
border-style: solid;
border-width: thin;
padding-left: 2px;
width: 98%;
min-width: 640px;
}
#main {
position: relative;
left: 1%;
width: 98%;
}
Loppupuhe
Oppaasta tulee vielä kolmas osa ja siinä voisin sitten käsitellä niitä jo toivottuja kuvia, taulukkoja ja otsikoita. Tässä jo hieman alkua taulukoista: Taulukoita ei tulisi missään nimessä käyttään sivun ulkoasun tekoon sitä varten on divit ja css. Taulukot tulisi siis pitää taulukoina ja ulkoasu ulkoasuna.
PS. Vieläkö vaikuttaa kopioidulta?
EDIT: Yritin siistiä ulkoasua hieman.
1 2 3