Eli tyylitiedostot käsittelyyn. Yritän tässä pikaisesti selittää mitä tyylitiedostot ovat, miksi niitä käytetään, mitä hyötyä niistä on ja tietenkin koetan saada jonkinlaista esimerkkiä aikaan.
Tyylitiedostojen perimmäinen tarkoitus on määrätä sivun ulkoasu. Ennen CSS:n vakiintumista kaikki tyylit kirjoitettiin HTML:n mukana: aina kun halusi käyttää jotakin muuta kuin selaimen oletuskirjaisimia, piti määrittää font-tagi ja kertoa mitä kirjasinta käyttää. Ja yleensä tämä vaikutti vain tietyn alueen sisällä, esim. kerralla ei saanut kokonaista taulukkoa käyttämään samaa kirjaisinta, vaan sama tagi piti määrittää jokaiseen soluun erikseen. Vähemmästäkin voi päätellä, että tämä tarkoitti todella suurta työtaakkaa päivittää sivua sen jälkeen kun sen kerran sai valmiiksi.
HTML-standardia on nykyisellään muutettu niin, että ainoa asia minkä se määrittää, on elementti jota käytetään ja mitä se sisältää: ulkoasu on jätetty kokonaan CSS:n harteille.
CSS:ää voi liittää HTML-tiedostoon kolmella eri tavalla: HTML-tagin mukana käyttäen STYLE-määrittelyä, HTML-tiedoston mukana omana STYLE-tagina tiedoston HEAD-osassa sekä omassa tiedossaan, jolloin tyylitiedosto linkitetään HTML-tiedostoon erillisellä koodinpätkällä. Havainnollistetaan:
[code:1:0ec04931f9]
Tapa 1: HTML-tagissa
<div style="border-width : 2px; border-style : solid; border-color : blue;">
Tämä layer on reunustettu sinisellä tasaisella kahden pikselin levyisellä reunalla.
</div>
[/code:1:0ec04931f9]
[code:1:0ec04931f9]
Tapa 2: HTML-tiedoston alussa
<html>
<head>
<title>Esimerkkisivu</title>
<style type="text">
BODY {
font-family : verdana, arial, helvetica;
font-size : 10pt;
}
IMG {
border-width : 2px 1px 2px 1px; /* järjestyksessä top right bottom left */
border-style : dashed;
border-color : #ff0000;
}
</style>
</head>
<body>
Kaikki sivulla olevat kuvat on reunustettu ylä- ja alareunasta kahden pikselin ja sivuilta yhden pikselin levyisellä katkoviivalla. Lisäksi koko dokumentin fontti on määritelty käyttämään verdana-kirjasinta koolla kymmenen.
<p />
<img src="testikuva.jpg" alt="Testikuva" title="Testikuva" />
<img src="testikuva2.jpg" alt="Testikuva" title="Toinen testikuva" />
</body>
</html>
[/code:1:0ec04931f9]
[code:1:0ec04931f9]
Tapa 3: erillinen tiedosto, joka linkitetään HTML-tiedostossa
CSS-tiedosto index.css:
BODY {
font-family : verdana, arial, helvetica;
font-size : 10pt;
}
A:link {
text-color : #0000ff;
text-decoration : none;
}
A:selected {
text-color : #0000ff;
text-decoration : none;
}
A:visited {
text-color : #0000ff;
text-decoration : none;
}
A:hover {
text-color : #0000ff;
text-decoration : underline;
}
HTML-tiedosto index.html:
<html>
<head>
<title>Erillisen CSS-tiedoston testisivu</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
Tämä HTML-tiedosto sisältää erillisen CSS-tiedoston, jossa kirjaisimeksi on määritelty koon kymmenen verdana (jos verdanaa ei löydy, käytetään arialia; jos sitäkään ei löydy, niin helveticaa). Lisäksi kaikki sivulla olevat <a href="http://kontu.merri.net">linkit</a> on tyylitelty niin, että ne ovat aina sinisiä ilman alleviivausta, paitsi jos hiiri on linkin päällä.
</body>
</html>
[/code:1:0ec04931f9]
Tässä taisikin olla tarpeeksi ensimmäistä kertaa varten, teen tätä ilman mitään mallia ja esisuunnittelua omasta päästäni, joten on vähän vaikea keksiä mitä lisää voisi kertoa
Tyylitiedostojen perimmäinen tarkoitus on määrätä sivun ulkoasu. Ennen CSS:n vakiintumista kaikki tyylit kirjoitettiin HTML:n mukana: aina kun halusi käyttää jotakin muuta kuin selaimen oletuskirjaisimia, piti määrittää font-tagi ja kertoa mitä kirjasinta käyttää. Ja yleensä tämä vaikutti vain tietyn alueen sisällä, esim. kerralla ei saanut kokonaista taulukkoa käyttämään samaa kirjaisinta, vaan sama tagi piti määrittää jokaiseen soluun erikseen. Vähemmästäkin voi päätellä, että tämä tarkoitti todella suurta työtaakkaa päivittää sivua sen jälkeen kun sen kerran sai valmiiksi.
HTML-standardia on nykyisellään muutettu niin, että ainoa asia minkä se määrittää, on elementti jota käytetään ja mitä se sisältää: ulkoasu on jätetty kokonaan CSS:n harteille.
CSS:ää voi liittää HTML-tiedostoon kolmella eri tavalla: HTML-tagin mukana käyttäen STYLE-määrittelyä, HTML-tiedoston mukana omana STYLE-tagina tiedoston HEAD-osassa sekä omassa tiedossaan, jolloin tyylitiedosto linkitetään HTML-tiedostoon erillisellä koodinpätkällä. Havainnollistetaan:
[code:1:0ec04931f9]
Tapa 1: HTML-tagissa
<div style="border-width : 2px; border-style : solid; border-color : blue;">
Tämä layer on reunustettu sinisellä tasaisella kahden pikselin levyisellä reunalla.
</div>
[/code:1:0ec04931f9]
[code:1:0ec04931f9]
Tapa 2: HTML-tiedoston alussa
<html>
<head>
<title>Esimerkkisivu</title>
<style type="text">
BODY {
font-family : verdana, arial, helvetica;
font-size : 10pt;
}
IMG {
border-width : 2px 1px 2px 1px; /* järjestyksessä top right bottom left */
border-style : dashed;
border-color : #ff0000;
}
</style>
</head>
<body>
Kaikki sivulla olevat kuvat on reunustettu ylä- ja alareunasta kahden pikselin ja sivuilta yhden pikselin levyisellä katkoviivalla. Lisäksi koko dokumentin fontti on määritelty käyttämään verdana-kirjasinta koolla kymmenen.
<p />
<img src="testikuva.jpg" alt="Testikuva" title="Testikuva" />
<img src="testikuva2.jpg" alt="Testikuva" title="Toinen testikuva" />
</body>
</html>
[/code:1:0ec04931f9]
[code:1:0ec04931f9]
Tapa 3: erillinen tiedosto, joka linkitetään HTML-tiedostossa
CSS-tiedosto index.css:
BODY {
font-family : verdana, arial, helvetica;
font-size : 10pt;
}
A:link {
text-color : #0000ff;
text-decoration : none;
}
A:selected {
text-color : #0000ff;
text-decoration : none;
}
A:visited {
text-color : #0000ff;
text-decoration : none;
}
A:hover {
text-color : #0000ff;
text-decoration : underline;
}
HTML-tiedosto index.html:
<html>
<head>
<title>Erillisen CSS-tiedoston testisivu</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
Tämä HTML-tiedosto sisältää erillisen CSS-tiedoston, jossa kirjaisimeksi on määritelty koon kymmenen verdana (jos verdanaa ei löydy, käytetään arialia; jos sitäkään ei löydy, niin helveticaa). Lisäksi kaikki sivulla olevat <a href="http://kontu.merri.net">linkit</a> on tyylitelty niin, että ne ovat aina sinisiä ilman alleviivausta, paitsi jos hiiri on linkin päällä.
</body>
</html>
[/code:1:0ec04931f9]
Tässä taisikin olla tarpeeksi ensimmäistä kertaa varten, teen tätä ilman mitään mallia ja esisuunnittelua omasta päästäni, joten on vähän vaikea keksiä mitä lisää voisi kertoa
