Tyylitiedostot - CSS
Tehdessäsi sivuja HTML-kielellä, tyylien vaihtaminen (siis esmerkiksi fonttikoon, -värin jne.) on kömpelöä. Vaihdot on suoritettava jokaisen kohtaan, minne se halutaan. Oletetaan, että olet tehnyt otsikkoja H1-tagilla useamman samaan sivustoon. Haluat kaikkiin vaihtaa väriksi punaisen - tällöin sinun olisi lisättävä jokaiseen edellä mainittuun kohtaan
<h1><font
color="red">
</font></h1>
mutta jos käytät tyylitiedostoja, voit tehdä sen vain
yhteen kohtaan.
.
Siis CSS on tyylikieli, joka kuvaa HTML-, XHTML- tai XML -dokumenttien ulkoasua. CSS korvaa vanhentuneen HTML:n käyttämät muotoilukomennot.
Tyylit voidaan liittää dokumenttiin usealla eri tavalla:
Tämä tapa mahdollistaa sen, että yhtä tyyli-tiedostoa voidaan käyttää usealla sivulla, mikä on erittäin tehokasta. Tämä tapa myös erottaa kokonaan tyyli-määrittelyt muusta sivun sisällöstä, mikä estää tyylejä ymmärtämättömän selaimen sekoittavan tyylejä varsinaiseen sisältöön.
Tässä tapauksessa määrittelet tyylit erilliseen tiedostoon, jonka pääte on .css ja viittaat siihen link-tagilla, mikä sijoitetaan HEAD-tagien sisään:
Esimerkki<html> |
Huomaa "type=text/css" attribuutti, jota käytetään myös <style>-tagissa ilmoittamaan, että käytetään tyylejä.
../style/oma.css
tai http://www.kase.fi/~annepu/tyyli/oma.css
Tässä tapauksessa määrittelet tyylit style-tagilla, joka sijoitetaan <HEAD>-tagien sisään:
Esimerkki<html> |
Lisäämällä sisäisiä tyyli-määrityksiä sellaisiin tageihin kuin <p>, <div> tai <span> |
Tässä tapauksessa määrittelet tyylin jollekin tietylle tekstille tai käytät esim. <span>-tagia määrittelemään tyylin jollekin sanalle tai lauseelle:
Käytämme tällä kurssilla erillistä tyylitiedostoa
Tehtävä 1
Tee seuraava www-sivu
a) <HTML>
<HEAD>
<TITLE></TITLE>
<LINK REL="stylesheet" TYPE="text/css"
HREF="tyyli.css">
</HEAD>
<BODY>
<h1>Joo</h1>
<h2>Joo</h2>
<h3>Joo</h3>
<h4>Joo</h4>
<p>Jotakin tekstiä voisi kirjoitella tähän</p>
<div class="kuva">
<IMG SRC="kuva.jpg" ALT="Kuva... ">
</div>
</BODY>
</HTML>
Kokeile
b) Tee tyylitiedosto
<!--
H1
{
font-family: verdana;
color: green;
}
H3
{ font-family: verdana;
color: black;
}
P { font-family: Verdana;
color: red;
font-size:15pt;
margin-left: 40 px
}
.kuva
{
margin-left: 200 px;
}
-->
Ja tallenna nimellä tyyli.css
2.a) Lisää koodiin linkkejä
<A class=isolinkki
HREF="http://www.veteli.fi/lukio">
Vetelin lukio</A>
</p>
<p>
<A class=pienilinkki
HREF="http://www.kase.fi">
Kase</A>
<A class=pienilinkki
HREF=""http://www.veteli.fi"">
Veteli</A>
b) Lisää tyylitiedostoon linkkien käsittelyyn seuraava
A:link, A:visited
{ text-decoration: none }
A:hover
{ text-decoration: underline }
.isolinkki
{ font-size: 20pt;
color: blue }
.pienilinkki
{ font-size: 10pt;
color: red }
Selitys:
A:link, A:visited, A:active, A:hover { text-decoration: none / underline } link = normaali linkki visited = linkki, jota on käytetty active = linkki, jota painetaan hiirellä hover = linkki, jonka päällä hiiren kursori on
3. Siirry sivuille http://www.sivut.org/html/oppaat/tyylipohjat.php#linkit
Kokeile tyylitiedoston muutoksia
a) fontin muutoksia, esimerkiksi lihavointia
b) marginaaleja
c) ynnä muuta
Netti on täynnä ohjesivustoja - toinen linkki
http://www.weppipakki.com/css.htm
4) Etsi miten css-tiedostoon voit lisätä oikean reunan palkille värejä.