CSS (Cascading Style Sheets)

Seuraavassa tarkastellaan CSS-tyylikielen käyttöä. Tarkemmin aiheesta voi lukea esim. Mozilla developer networkin css-sivulta ja kurssisivuston css 1 - ja css 2-dokumentaatioista.

Perusteet

Tyylien liittäminen dokumenttiin

Tyylit liitetään HTML-dokumenttiin link-elementillä (head-elementin sisään) seuraavaan tapaan:

<link href="tyylit.css" rel="StyleSheet" type="text/css"  media="all" />

Tämä tyyli on aina käytössä

Aina käytössä oleva tyyli vs. vaihdettava tyyli

media-attribuutilla voidaan määritellä, millaisille laitteille tyylinmääritykset ovat tarkoitettuja, esim. tulostusta varten voisi määritellä mediaksi print.

<link href="tyylit.css" rel="StyleSheet" type="text/css" media="print" />

all-media tarkoittaa, että asetuksia käytetään kaikille medioille. all-median asetuksia voidaan ylikirjoittaa tarvittaessa muissa medioissa. Muiden medioiden tyylitiedostot pitää muistaa linkittää HTML-tiedostoon all-median linkityksen jälkeen, koska tyylit otetaan käyttöön ylhäältä alas periaatteella. Viimeisenä käyttöön tulee siis viimeiseksi liitetty tiedosto.

Tietokoneen näytön media on screen.

Jos median jättää määrittelemättä, kyseistä tyyliä käsitellään kuten all-median tyylejä.

style-elementti

style-elementti

Tyylejä voi lisätä dokumenttikohtaisesti käyttämällä style-elementtiä:

<head>
<title>foo</title>
<style type="text/css" media="screen">
h1 { color: blue; background-color: yellow; }
</style>
</head>

style-elementin käyttöä ei voi kuitenkaan suositella, koska se rajaa vaikutuksen vain yhteen dokumenttiin. Sama voidaan tehdä yhtä helposti ulkoisella CSS-tiedostolla.

Älä käytä style-elementtiä tällä kurssilla.

style-attribuutti

style-attribuutti

Tyylejä voi lisätä elementtikohtaisesti käyttämällä style-attribuuttia:

<h1 style="color: blue; background-color: yellow;">Otsikko</h1>

style-attribuutin käyttöä ei voi kuitenkaan suositella, koska se rajaa vaikutuksen vain yhteen elementtiin. Sama voidaan tehdä yhtä helposti ulkoisella CSS-tiedostolla ja class-attribuutin tai id:n avulla.

Älä käytä style-elementtiä tällä kurssilla.

Tyylien käyttöjärjestys

Jos saman elementin (esim. h1) tyylimääritys on tehty useassa paikassa, on niiden käyttöjärjestys seuraava. Ylin (pienin numero) määritys siis näytetään, jos se löytyy ja siitä mennään aina porras kerrallaan alaspäin niin kauan, että tyylimääritykset löytyvät.

  1. selaimeen asetettu käyttäjän oma CSS-tiedosto
  2. style-attribuutti - älä käytä
  3. style-elementti - älä käytä
  4. erillinen CSS-tyylitiedosto
  5. selaimen oletustyyliasetukset

Tyylien määrittäminen

Kaikista CSS 1:n ominaisuuksista löytyy suomenkielinen ohjedokumentti osoitteesta: http://appro.mit.jyu.fi/doc/css/

Paras englanninkielinen lähde: CSS Syntax.

Perusperiaate on muuttaa olemassa olevien HTML-elementtien ominaisuuksia. Oletuksena tyylin nimi on siis sama kuin sen HTML-elementin nimi, jonka ulkoasuominaisuuksia halutaan muokata. Jokaisella muutettavalla ominaisuudella on tietty nimi.

tyylinimi {
  ominaisuus: arvo;
}

Esim. määritellään body-elementin tekstin väriksi musta ja taustaväriksi valkoinen:

body {
  color: black;
  background-color: white;
}

Esim. määritellään kaikille otsikkotasoille sama fontti, väri ja alaviiva:

h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, sans-serif;
  color: blue;
  border-bottom: 1px solid black;
}

Perintä

Dokumenttipuun elementit perivät esim. tekstin värin äitielementiltään:

<h1><strong>CSS</strong> on iso juttu.</h1>

strong-elementti saa saman tekstin värin kuin mikä h1-elementillä on, ellei väriä ole strong-elementille erikseen määrätty. Aivan kaikki ominaisuudet eivät kuitenkaan periydy. Esim. border-ominaisuus ei periydy.

Mittayksiköt

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä. em suhteutetaan aina oletusfontin kokoon. Toinen vaihtoehto on rem, joka vastaa aina selaimen oletusfonttikokoa.

px (pikseli) -yksikköä voi käyttää pienten (alle 5 px) reunusten ja marginaalien määrittelyssä sekä kuville tarkoitettujen lohkojen leveyksissä ja korkeuksissa, mutta sitä ei suositella käytettäväksi kirjasimen koon määrittämiseen.

p {
  font-size: 120%;
}

h1 {
  margin-top: 1em;
}

h2 {
  border: 1px solid black;
}

Muita CSS:n tuntemia yksiköitä ovat ex, in, cm, mm, pt ja pc. Näitä tarvitaan kuitenkin äärimmäisen harvoin ja ex-yksikköä lukuunottamatta ne ovat hyödyllisiä vain, jos käytetyn median fyysinen koko on tiedossa kuten esim. printatessa.

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Yksi tapa on käyttää RGB-määritystä prosentteina:

p {
  background-color: rgb(100%, 100%, 100%); /* valkoinen */
}

Perusvärit voidaan myös kirjoittaa suoraan nimillä:

p {
  background-color: blue; /* sininen */
}

Yksi käytetty tapa on antaa värit RGB-arvoina:

p {
  background-color: #FF0000; /* punainen */
}

Linkkejä värien määrittämisestä:

Kommentit

Kommentointi CSS-tyylitiedostossa onnistuu C/C++/Java-kielestä tutulla tavalla:

strong { /* Korostamiseen käytettävä tyyli */
  background-color: white;
  color: red;
}

Tyylien valitsimet (engl. selectors)

Luokat (class) valitsimina

class-attribuutin avulla voidaan HTML-elementti määrätä käyttämään tiettyä tyyliä. Esim.

<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus</p>

Vastaavat tyylimääritykset

p {
  background-color: white;
  color: green;
  text-align: center;
}

p.varoitus {
  background-color: white;
  color: red;
}

Edellisen valitsimen yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.

.varoitus {
  background-color: white;
  color: red;
}

Elementin yhteyteen määritelty valitsin on "vahvempi" kuin yleistetty valitsin. Siispä alla olevilla tyylimäärityksillä tekstikappaleen väriksi tulisi punainen, vaikka yleistetty valitsin tulee tyylitiedostossa vasta elementin yhteyteen määritetyn valitsimen jälkeen.

p {
  background-color: white;
  color: green;
  text-align: center;
}

p.varoitus {
  background-color: white;
  color: red;
}

.varoitus {
  background-color: white;
  color: blue;
}

Tyylien valitsimien yhteydessä perintä tarkoittaa sitä, että voit luoda luokkia (class) jokaisesta elementistä. Kaikki luokat perivät joitakin ominaisuuksia peruselementiltä (paitsi, jos uusia arvoja määritetään vanhojen tilalle tai ominaisuus ei ole perittävissä).

Esimerkki tyylin aliluokan käytöstä

Tunnisteet (id) valitsimina

id-attribuutin avulla voidaan HTML-elementti määrätä käyttämään tiettyä tyyliä. Esim.

<p>Normaalitekstiä kappaleellinen</p>
<p id="varoitus">varoitus</p>

Vastaavat tyylimääritykset

p {
  background-color: white;
  color: green;
  text-align: center;
}

p#varoitus {
  background-color: white;
  color: red;
}

Tunnistetta käytettäessä täytyy huomata se, että samassa HTML-tiedostossa ei voi olla samaa tunnistetta (id) usealla HTML-elementillä. Näin ollen lähes aina luokan (class) käyttö on suositeltavampaa.

Asiayhteyden mukaan määräytyvät tyylit

Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.

p-elementin sisällä oleva strong-elementti muotoillaan seuraavan säännön mukaisesti:

p strong {
  background-color: white;
  color: red;
}

Esimerkki asiayhteyden mukaan määräytyvästä tyylistä

Näennäisluokat (pseudoluokat)

Näennäisluokat ovat tyylien erikoistapauksia, joilla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan, onko linkki vierailtu vai ei.

a:link {  /* vierailematon linkki */
  color: blue;
  background-color: transparent;
}

a:visited {  /* vierailtu linkki */
  color: purple;
  background-color: transparent;
}

a:active {  /* aktiivinen linkki */
  color: red;
  background-color: transparent;
}

a:hover {  /* kohdistettu linkki */ 
  color: blue;
  background-color: grey;
}

Esimerkki näennäisluokkien käytöstä

Laatikkomalli (engl. box model)

CSS:n laatikkomalli määrittää jokaisen elementin laatikoksi, jolla on marginaali, raja, täyte ja sisältö.

Sivulla olevien elementtien rajat saat näkyviin esimerkiksi asentamalla Firefoxiin Web Developer -pluginin. Laatikkomallin saa näkyviin Web Developerissa valinnalla Outline | Outline Block Level Elements.

Taulukoiden ulkoasu

Taulukon (table-elementti) ulkoasuun vaikuttavat seuraavat css-ominaisuudet:

Seuraavassa taulukossa on käytössä tyyliasetukset:

table {
border-collapse: separate; 
border-spacing: 10px; 
empty-cells: show;
border: 2px dotted black;
}
caption {
caption-side: bottom; 
}
taulukon otsikko
otsikko 1otsikko 2
solu 1
solu 3solu 4
solu 6
solu 7solu 8

Seuraavassa taulukossa on käytössä tyyliasetukset:

table {
border-collapse: collapse; 
empty-cells: hide;
border: 5px ridge black;
}
caption {
caption-side: top; 
}
taulukon otsikko
otsikko 1otsikko 2
solu 1
solu 3solu 4
solu 6
solu 7solu 8

CSS1:n ominaisuudet

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/css/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2019-02-12 12:55:15
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta