CSS (Cascading Style Sheets)

Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia Cascading Style Sheets, level 2 (CSS2)-suosituksen mukaisesti. Lähinnä käydään läpi kuitenkin vain CSS1-tason ominaisuuksia.

Luentotaltiointi

Ongelmia videon katselussa?

Perusteet

Käyttäjän määräämät tyylit

Kaikkiin uusimpiin selaimiin voi itse määritellä omat CSS-asetukset joita käytetään oletuksena sivuja näytettäessä. Käyttäjä voi oman selaimensa asetuksilla ohittaa sivuntekijän määrittelyt:

CSS-asetuksien ylimäärittely !important-määreellä: 

background: white none !important

Tyylien liittäminen dokumenttiin

Tyylit liitetään xhtml-dokumenttiin link-elementillä seuraavaan tapaan: 

  <link href="tyylit.css" rel="stylesheet" type="text/css" title="Tyylin nimi" media="all" />

style-elementti

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

<head>
<title>foo</title>
<style type="text/css" media="screen">
h1 { background-color: white; }
</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.

style-attribuutti

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

<h1 style="background-color: white;">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.

Lisätietoja

Tyylien määrittäminen

Perusperiaate on muuttaa olemassaolevien 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;
}

CSS:n ominaisuuksista löytyy dokumentti osoitteesta:

http://appro.mit.jyu.fi/doc/css/

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. Kaikki ominaisuudet eivät periydy.

Mittayksiköt

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä. em suhteutetaan aina oletusfontin kokoon.

px (pikseli) yksikköä voi käyttää reunusten ja marginaalien määrittelyssä 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, pc. Näitä tarvitaan kuitenkin äärimmäisen harvoin ja ex-yksikköä lukuunottamatta ovat hyödyllisiä vain jos käytetyn median fyysinen koko on tiedossa.

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Helpoin tapa on käyttää prosentteja: 

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

Xetorista löytyy värivalitsin valikosta Macros | Text | Color Picker, joka tuottaa värikoodin heksadesimaalina (#RRGGBB, missä RR = punainen, GG=vihreä, BB=sininen ja XX = 00-ff)

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

Kommentit

Kommentointi onnistuu c-kielestä tutulla tavalla:

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

Tyylien liittäminen toisesta tyylitiedostosta

@import-säännöllä voi liittää omaan tyylitiedostoonsa muiden tyylitiedostojen sisältämiä tyylejä. @import-rivien pitää olla css-tiedostossa ensimmäisinä.

@import "toinentyyli.css";
@import url(http://appro.mit.jyu.fi/appro2003.css);

Tyylien valitsimet (engl. selectors)

class-attribuutin avulla voidaan xhtml-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;
}

Esimerkki tyylin aliluokan käytöstä .

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

pseudoluokat (pseudoluokat)

Näennäisluokat ovat tyylien erikoistapauksia, jolla 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: gray;

}

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.

CSS1:n ominaisuudet

Lisätietoa

Kommentoi

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento2/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)< http://hazor.iki.fi/>
2006-11-17 11:08:57