Tämän sarjan aikana on jo useaan otteeseen mainittu tyylitiedostot. Nämä tyylitiedostot mahdollistavat layoutin ja designin tiukan erottamisen toisistaan. HTML-elementit ovat CSS:n ansiosta vastuussa pelkästään verkkodokumentin loogisesta tai semanttisesta kuvauksesta.
Käytännön kokemuksen perusteella on aluksi hyödyllistä tietää, miltä tyylitiedosto oikeastaan näyttää. Katsotaan ensimmäinen esimerkki.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>Selaimessa dokumentti näyttää tältä:
HTML-tiedoston body-osassa on määritetty kaksi elementtiä:
• otsikko
• tekstikappale
Näille kahdelle elementille määritellään muotoilu CSS:n avulla. Tätä varten head-osassa määritellään tyylitiedoston alue käyttämällä style-elementtiä. Tämän alueen sisällä määritellään elementtien muotoilu.
Tässä vielä uudelleen määritelmä otsikolle h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Näytetyllä syntaksilla määritellään kaksi asiaa:
• Määritetään fonttiperhe.
• Määritellään fontin koko.
Tässä vaiheessa keskitytään yleisesti käytettyyn syntaksiin. Jokainen CSS-komento koostuu periaatteessa kahdesta osasta - valitsimesta ja CSS-määritelmästä. Valitsimella määritellään se elementti, jota muotoillaan. Miltä muotoilu lopulta näyttää, määrää CSS-määritelmä. Valitsin on aina vasemmalla, CSS-määritelmä oikealla aaltosuluissa.
Itse CSS-määritelmä koostuu puolestaan kahdesta osasta, nimittäin ominaisuudesta ja arvosta. Ominaisuus ja arvo erotetaan toisistaan kaksoispisteellä. Arvon jälkeen tulee puolipiste.
Selektor {
Eigenschaft: Wert;
}Tyylitiedostojen liittäminen
On erilaisia tapoja liittää tyylitiedostoja verkkosivuille. Aluksi voit määrittää ulkoasumääräykset suoraan HTML-tagille. Esimerkki:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Tässä esimerkissä otsikko näytetään sinisellä värillä.
Voit lisätä yhdelle HTML-tagille useita tyyliväyliä.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Lisää nämä sitten yksinkertaisesti peräkkäin, erotettuna toisistaan puolipisteellä.
Yleisesti ottaen näitä niin kutsuttuja Inline-tyylittelyjä tulisi käyttää vain, jos yksittäiset osat sivulla halutaan muotoilla yksilöllisesti. Yleensä tällaista suoraa muotoilua tulisi kuitenkin välttää, sillä se tekee HTML-koodista epäselvän.
Keskeinen määritys head-osaan
Voit määrittää keskitetyn tyylitiedoston HTML-tiedoston head-alueelle. Siellä määritellään kaikki tyylit, jotka ovat voimassa tälle tiedostolle.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Tämän vaihtoehdon etuna on, että määritellyt muodot voidaan käyttää useita kertoja dokumentissa toisin kuin Inline-vaihtoehdossa. Edellisessä esimerkissä määriteltiin CSS-luokka text. (Tarkempia tietoja käytetyistä valitsimista, kuten tässä käytetystä luokasta, seuraavat seuraavassa opetusohjelmassa). Tätä luokkaa voidaan nyt käyttää minkä tahansa määrän kertoja dokumentissa.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Tällainen määritelmä tarjoaa Inline-vaihtoehtoon verrattuna luonnollisesti sen lisäetuna, että muutokset voidaan tehdä erittäin nopeasti.
CSS-määritysten ulkoistaminen
Varmasti kätevin tapa määritellä CSS on ulkoistaa tyylit erilliseen tiedostoon. Tämän ansiosta mikä tahansa määrä HTML-tiedostoja voi käyttää samaa CSS-tiedostoa. Tämä mahdollistaa kaikkien verkkoprojektiin kuuluvien tiedostojen yhtenäisen muotoilun. Myöhemmät muutokset, jotka koskevat kaikkia sivuja, voidaan toteuttaa helposti.
<link rel="stylesheet" type="text/css" href="css/styles.css">
HTML-tiedoston otsikkosivulla määritellään link-elementti. link-sisällä annetaan ensin attribuutti-arvopari rel="stylesheet". Tämän jälkeen tulee type="text/css". href-attribuutti osoittaa kyseiseen CSS-tiedostoon. Tässä - samoin kuin kuvien liittämisessä - on tärkeää antaa oikea polku. Tässä esimerkissä oletan, että CSS-tiedosto styles.css on hakemistossa css, joka puolestaan on samalla tasolla kuin itse HTML-tiedosto.
Viitattu CSS-tiedosto on tavallinen tekstitiedosto, jolla on css-pääte. Ulkoisessa CSS-tiedostossa määritellään vastaavat CSS-komennot.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Vaihtoehto link-menetelmälle on tuoda tyylitiedostoja (Stylesheets) käyttöön. Tässäkin tapauksessa CSS-ohjeet sijaitsevat ulkoisessa tiedostossa. Tähän käytetään seuraavaa syntaksia:
<style type="text/css">
@import url("css/styles.css");
</style>
Sulkeiden sisällä annetaan polku tuotavaan CSS-tiedostoon. Muuten mainittakoon, että @import on CSS-syntaksia, jota voidaan käyttää myös CSS-tiedostojen sisällä. Tämä mahdollistaa muiden tyylitiedostojen kutsumisen tyylitiedostosta ja parantaa tyylitiedostojen järjestystä.
Luonnollisesti herää kysymys, pitäisikö käyttää link-menetelmää vai @import-menetelmää. Yleisesti ottaen suosin link-menetelmää, koska se on yksinkertaisesti nopeampi, sivuston suorituskyvyn kannalta parempi vaihtoehto.
Käyttöjärjestelmäkohtaiset tyylitiedostot
Tyylitiedostoja voi määrittää erilaisille käyttöjärjestelmille, kuten tulostimille tai näytölle. Tähän käytetään media-attribuuttia. Tyylitiedosto voidaan määrittää myös useille eri medioille, jotka erotetaan toisistaan pilkulla.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Tässä tapauksessa kaksi tyylitiedostoa kutsuttiin, toinen näytölle ja toinen tulostettaessa. CSS-tiedosto druck.css ladataan, kun selaimen tulostustoimintoa käytetään. Yhteensä on käytettävissä seuraavat media-arvot:
• all – Koskee kaikkia tulostusmedioita.
• aural – CSS-tiedosto käytetään äänijärjestelmille.
• braille – CSS-tiedosto on suunniteltu pistekirjoitus-tulostimille, jotka voivat tuottaa niin kutsuttua "sokeiden kirjoitusta".
• embossed – Tämä kohdistaa pistekirjoitustulostimet.
• handheld – Käsikäyttöisiä laitteita varten.
• print – CSS-tiedosto on tarkoitettu paperille. Selaimen tulostustoimintojen tulee automaattisesti käyttää tätä tiedostoa.
• projection – Käytetään heijastettuihin esityksiin.
• screen – Tarkoitettu näytönäytölle.
• tty – CSS-tiedosto koskee medioita, jotka käyttävät kiinteää merkistöruutua. Nämä voivat olla esimerkiksi kirjoituskoneita ja päätteitä.
• tv – Tämä kohdistaa TV-tyyppiset laitteet. Oletetaan, että laitteilla on alhainen resoluutio ja rajallinen vieritys.
Näytetyn HTML-syntaksin lisäksi link-elementin kautta on myös erityisiä CSS-variaatioita. Näissä käytetään @import tai @media-komentoja.
<style type="text/css">
@media screen, projection {
/* Formaatit näytölle */
}
@media print {
/* Formaatit tulostamista varten */
}
</style>
style-elementin sisällä määritellään @media-kautta alue formaattimäärittelyille, jotka on tarkoitettu tietylle tulostusympäristölle. Tämän jälkeen @media-synkronoinnin perään on kirjoitettava yksi aiemmin mainituista mediatyypeistä, erotettuna välilyönnillä. Useat mediatyypit erotetaan toisistaan pilkulla.
