CSS (Cascading Style Sheets)

Luentotaltiointi
Tyylien liittäminen dokumenttiin
- Lisätietoja
Tyylien määrittäminen
- Perintä
Mittayksiköt
- Sivuilla käytettävät värit
Kommentit
Ulkoiset CSS-tyylit
- Käyttäjän määräämät tyylit
- Tyylien liittäminen toisesta tyylitiedostosta
Tyylien valitsimet (engl. selectors)
- Asiayhteyden mukaan määräytyvät tyylit
- pseudoluokat (pseudoluokat)
Laatikkomalli (engl. box model)
CSS1:n ominaisuudet
Lisätietoa

Luentotaltiointi

www03.mp3 16M
www03.wmv 53M

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.

Dokumenttien rakenne määritellään XHTML:n avulla.
- Sisältö on hyvin tulkittavissa.
- Sisältö on saatavissa riippumatta näyttölaitteesta.
- Sisältö on helposti muunnettavissa.
Dokumenttien ulkoasu määritellään CSS-tyylilomakkeen avulla.
- Dokumentin rakenne on yksinkertainen.
- Sivuilla yhtenäinen ulkoasu.
- Ulkoasun määrittämiseen ei mene aikaa.
- Keskitetty ulkoasun päivitys.
Dokumentteja voidaan katsella monenlaisia ohjelmilla ja laitteilla (mediat)
- Esimerkiksi
  - erilaiset graafiset selaimet
  - mobiiliselaimet
  - ääniselain
  - tekstiselain
  - tv:n selain
  - tulostin
  - projektori
  - kohopistekirjoitin
- Sivut testattava huolellisesti erilaisilla selaimilla!

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" />

Tyyli on aina käytössä (persistent) jos title-attribuutia ei ole määritelty.
Tyyli on oletuksena käytössä mutta voidaan vaihtaa (preferred) jos title-attribuutilla on jokin arvo. Kaikki tyylit joilla on sama title-attribuutin arvon käsitetään yhdeksi tyyliryhmäksi. Jos ryhmiä on useita niin oletuksena käytetään niistä ensimmäistä.
Muuttamalla rel-attribuutin arvoksi Alternate stylesheet voidaan määritellä vaihtoehtoisia tyylejä joista käyttäjä voi valita haluamansa.
media-attribuutilla voidaan määritellä millaisilla laitteille tyylinmääritykset ovat tarkoitettuja, esim. mobiiliselaimille voisi määritellä mediaksi handheld. Medioista lisää luennolla 4.

Lisätietoja

Style Sheets in HTML documents
External style sheets (persistent, preferred, alternate)
Alternative Style: Working With Alternate Style Sheets
Alternative style sheets

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;
}

Samat ominaisuudet voidaan laittaa monille elementeille erottelemalla ne pilkuilla.
Vaihtoehtoiset ominaisuudet luetellaan pilkuilla.
Jos ominaisuuteen voidaan määrittää useita arvoja niin ne on eroteltava välilyönnillä.
CSS-määritykset luetaan käyttöön kirjoitusjärjestyksessä jolloin voi olla merkitystä missä järjestyksessä tyylisääntöjä kirjoittaa.

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.

CSS2 syntax and basic data types

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

HTMLHelp, "RGB Color Values"
Gernot Metze, "Color Tables"

Kommentit

Kommentointi onnistuu c-kielestä tutulla tavalla:

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

Ulkoiset CSS-tyylit

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

How to create a user style sheet, http://www.squarefree.com/userstyles/user-style-sheets.html

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