CSS (Cascading Style Sheets)

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

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 HTML:n avulla.
• 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.
• Sivujen tiedot on saatava myös ilman tyylejä!
• Sivut testattava huolellisesti erilaisilla selaimilla!
• Käyttäjä voi oman selaimensa asetuksilla ohittaa sivuntekijän määrittelyt (user stylesheet)

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

• Tyyli on aina käytössä (persistent) jos title-attribuutille ei anneta arvoa
• 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.

Lisätietoja

• Style Sheets in HTML documents
• Alternative Style: Working With Alternate Style Sheets
• Alternative style sheets

Mittayksiköt

CSS sisältää seuraavat yksikö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

Kommentit

Kommentointi onnistuu c-kielestä tutulla tavalla:

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

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 */
}

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

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

Käyttäjän omat CSS-tiedostot

Kaikkiin uusimpiin selaimiin voi itse määritellä omat CSS-asetukset joita käytetään oletuksena sivuja näytettäessä.

Käyttäjä voi myös ylimääritellä sivuntekijän CSS-asetuksia !important-määreellä:

background: white none !important

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

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

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

CSS-määritykset luetaan käyttöön kirjoitusjärjestyksessä jolloin voi olla merkitystä missä järjestyksessä joitain 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.

@import

@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ö.

Box dimensions

css1:n ominaisuudet

• Kirjasimen ominaisuudet (esimerkki)
  • font-family

    Kirjasintyyppiä määrättäessä pitää muistaa antaa useita vaihtoehtoja koska ei voida tietää mitä kirjasimia käyttäjien koneilta löytyy. Viimeisenä vaihtoehtona pitää antaa yleisen kirjasinperheen nimi esim. sans-serif

  • font-style
  • font-variant
  • font-weight
  • Font-size

    Kirjasimen kokoa määrättäessä pitää varoa ettei tee kirjasimesta liian pientä. Järkevintä on yleensä käyttää käyttäjän selaimen oletuskokoa eli 1em. Kirjasimen kokoa ei pidä määrätä px-yksiköissä koska pikselien koko vaihtelee näyttöjen koon ja tarkkuuden mukaan.

  • font
• Värin ja taustavärin ominaisuudet (esimerkki)
  • color
  • background-color

    Määriteltäessä taustaväri pitää muistaa määrätä myös tekstin väri (color).

  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
• Tekstin ominaisuudet (esimerkki)
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • text-align
  • text-indent
  • line-height
• Elementin raja, täyte ja marginaali (esimerkki)
  • Elementin marginaalit
  • Elementin täyte
  • Elementin rajan ominaisuudet
    • border-width
    • border-color
    • border-style
    • border
• Muut elementin ominaisuudet (esimerkki)
  • width
  • height
  • float
  • clear
  • display
  • white-space
• Listan ominaisuudet (esimerkki)
  • list-style-type
  • list-style-image
  • list-style-position
  • list-style

CSS 2.1

CSS2.1 ei ole vielä virallisen suosituksen tasolla mutta muuttunee viralliseksi tämän vuoden aikana. CSS2.1 sisältää pieniä korjauksia CSS2:een verrattuna.

Muutokset CSS2:n ja CSS2.1:n välillä

Lisätietoa

• Web Style Sheets CSS tips & tricks