CSS (Cascading Style Sheets)

Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia Cascading Style Sheets, level 2 (CSS2)-suosituksen mukaisesti.

Luentotaltiointi

Ongelmia videon katselussa?

Perusteet

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.

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.

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 */
}p {
	background-color: #ffffff /* valkoinen */
	color: #000000 /* musta */
}

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;
}
.navbar ul li {
  display: inline;
}

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

Valitsimet ja harvinaisemmat pseudoluokat

Seuraavassa on esitelty lyhyeiden esimerkkien avulla erilaisia CSS2:n valitsimia (engl. selectors) ja näennäisluokkia (engl. pseudo). Valitsimien (engl. selector) avulla voidaan viitata xhtml-dokumentissa käytettyihin rakenteisiin määrityksiin, joten ne toimivat eräällä tavalla tyylin niminä.

Tärkeimmät CSS-valitsimet
Valitsin Selitys
* Valitsee jokaisen elementin
.luokka Valitsee jokaisen elementin jonka class-attribuutin arvo on luokka.
E Valitsee jokaisen elementin E
E F Valitsee elementin F, joka on elementin E jälkeläinen
E> F Valitsee elementin F, joka on elementin E lapsi
E:first-child Valitsee elementin E, jos elementti E on äitielementtinsä ensimmäinen lapsielementti
E + F Valitsee elementin F jos se on heti elementin E jälkeen
E[foo] Valitsee elementin E jos elementin E foo-attribuutilla on jokin arvo
E[foo="varoitus"] Valitsee elementin E jos elementin E foo-attribuutilla on arvona varoitus
E#tunniste Valitsee elementin E, jos elementin E ID-attribuutin arvo on tunniste
E:before Lisää ennen elementtiä E jotakin sisältöä
E:after Lisää elementin E jälkeen jotakin sisältöä
E:first-letter Valitsee elementin E ensimmäisen kirjaimen
E:first-line Valitsee elementin E ensimmäisen rivin
Esimerkit tärkeimmistä CSS-valitsimista
Valitsin CSS xhtml
* * { background-color: white; }
E h1 { color: red; }
.luokka .luokka { color: red; } <div class="luokka">Tämä tulee punaisella</div>
E F ul strong { color: red; } <ul><li>Tässä jotain tekstiä ja <strong>tärkeä</strong> sana</li></ul>
E > F ul > li > strong { color: red; } <ul><li>Tässä jotain tekstiä ja <strong>tärkeä</strong> sana</li></ul>
E:first-child p:first-child { color: red; } <body><p>Tämä on ensimmäinen kappale, joka tulee punaisella</p><p>Tämä tulee normaalilla värillä</p></body>
E + F p + p { color: red; } <p>Tämä on ensimmäinen kappale, joka tulee normaalilla värillä</p><p>Tämä tulee punaisella värillä</p>
E[foo] img[title] { border: 1px solid red; } <p><img src="kuva.jpg" alt="foo" title="bar" /></p>
E[foo="varoitus"] a[href="http://appro.mit.jyu.fi/www/"] { font-size: 1.2em; } <a href="http://appro.mit.jyu.fi/www/">WWW-julkaiseminen</a>
E#tunniste p#tarkein { color: red; } <p id="tarkein">tämä on sivun tärkein tekstikappale</p>
E:before p:before { content: "Lue tarkkaan "; color: red; }
E:after p:after { content: " - Tommi "; color: yellow; }
E:first-letter p:first-letter { font-size: 1.5em; }
E:first-line p:first-line { text-transform: uppercase; }

Esimerkkejä valitsimista. Esimerkissä käytetty css

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

laatikkomalliesimerkki

Collapsing margins

Joissain tilanteissa elementtien marginaalit yhdistetään ja suurempi marginaali jää voimaan.

collapsing margins

Mediatyypit

Erilaiset mediatyypit

Sivun ominaisuuksia

Sivun ominaisuuksilla voidaan hallita dokumenttia sivutettuna. Seuraavassa muutamia sivuttamiseen liittyviä ominaisuuksia.

Esimerkkejä mediatyyppien käytöstä

Ylivuoto

Seuraavassa esimerkki ominaisuuksien käytöstä

display-ominaisuus

display-ominaisuudella voidaan muuttaa esimerkiksi tekstikappaleen näkymiseen liittyviä ominaisuuksia. Tekstikappaleesta voidaan tehdä visuaalisesti osa toista tekstikappaletta tai sen näkyminen voidaan estää kokonaan. display-ominaisuudelle voidaan asettaa mm. seuraavia arvoja.

Esimerkki keskittämisestä pystysuunnassa display-ominaisuuden avulla.

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

Minimi- ja maksimikoko kannattaa joskus määrätä esim. navigointialueille tai tekstialueille.

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

CSS1:n ominaisuudet

Lisätietoja

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/sovellukset/luennot/luento2/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)< http://hazor.iki.fi/>
2006-03-02 14:36:16