Tyylitiedostot - CSS

 

Helpottaa muotoilujen tekemistä

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.

 

Laajojen sivujen latautuminen nopeampaa.

Tyylit voidaan liittää dokumenttiin usealla eri tavalla:

  1. Linkittämällä erillinen tyylitiedosto yhteen tai useampaan WWW-sivuun.

    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>
    <head>
    <title>...</title>
    <link rel=STYLESHEET href="tyyli.css" type="text/css">
    </head>
    <body>...

    Huomaa "type=text/css" attribuutti, jota käytetään myös <style>-tagissa ilmoittamaan, että käytetään tyylejä.

  2. Upottamalla tyylit yksittäiseen WWW-sivuun.

    Tässä tapauksessa määrittelet tyylit style-tagilla, joka sijoitetaan <HEAD>-tagien sisään:

    Esimerkki

    <html>
    <head>
    <style type="text/css">
    <!--
    P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
    H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
    -->
    </style>
    </head>
    <body>...

    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ä.