CSS-muistilista

Sisällys

  1. Yleistä
  2. Tyylimäärittelyjen liittäminen dokumenttiin
  3. Tyylimäärittelyt
    1. Margins, borders & paddings
    2. Muuta
  4. Esimerkkejä
  5. Vihjeitä CSS:n käyttöön
  6. Sekalaisia (omia) muistiinpanoja
  7. Lähteet

1. Yleistä

Tyylisäännön osat:

A:visited { color: red; }, missä
A:visited = selector (selektori)
color: red; = declaration (deklaraatio )
color: = property (ominaisuus)
red; = value (arvo)
: = flag character
visited = pseudo-class (pseudoluokka)

(suomennokset Jukka Korpelan)

CSS-koodi ei saa sisältää merkkejä ">", "--" eikä "</"

Kommenttien virallinen merkitsemistapa: /* kommentti tähän */

Älä laita selectorin nimeen erikoismerkkejä (esim. _ tai -), sillä tällöin tyylimäärittely ei välttämättä toimi kaikissa selamissa.

Yleinen virhe (minulle) on jättää aloituspiste pois omien selectorien nimistä. Tarkista tämä jos tyylimäärittely ei toimi!

Viittaaminen kuviin: Käytä kuvan absoluuttista tai "juurihakemistoperustaista" osoitetta, sillä ainakin jotkut Netscapen ja IE:n versiot ymmärtävät suhteelliset osoitteet eri tavoilla (toinen suhteessa CSS-tiedostoon ja toinen suhteessa HTML-tiedostoon).

2. Tyylimäärittelyjen liittäminen dokumenttiin

Ks. myös kohta mediat.

Style-elementin avulla (Head-osiossa)

<STYLE TYPE="TEXT/CSS">
<!--
@import url(omatyyli.css); /* tyylitiedosto, */
H1 { color: #004080; } /* jota tarkennetaan/korvataan tässä */
.omaclass { color: red; }
#omaid { color: red; } /* Sama ID voi esiintyä HTML-tiedostossa vain kerran */
--> </STYLE>

Link-elementin avulla (Head-osiossa)

<LINK REL="stylesheet" HREF="tiedostonimi.css" TYPE="text/css">
<LINK REL="alternate stylesheet" HREF="tiedostonimi-screen.css" TYPE="text/css" MEDIA="screen" TITLE="screen-add"> TITLE on suositeltava.

Yksittäiseen elementtiin

<P STYLE="color: blue">jotain</P>
<SPAN CLASS="OmaClass">jotain</P>
<P ID="OmaID">jotain</P>

3. Tyylimäärittelyt

Fonttikategoriat

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

Fonttikoot

  • pt
  • em
  • %
  • mm (?)
  • pc (?)

Pituusmitat

  • mm (absolute)
  • cm (absolute)
  • in (absolute)
  • pt (absolute)
  • pc (absolute)
  • em (relative)
  • ex (realtive)
  • px (device-dependent) (2px on aina 2x niin suuri kuin 1px)

Mediatyypit (CSS2)

  • screen (tietokoneen näyttö)
  • tty (faksi)
  • tv (televisio)
  • projection (dataprojektori)
  • handheld (pienikokoinen näyttö)
  • print (tulostus)
  • braille (pistekirjoitin)
  • aural (puhesyntetisaattori)
  • all (kaikki esitystyypit)

Pseudoluokat

  • A:link { color: #004080; }
  • A:visited { color: #004080; }
  • A:active { color: #004080; }
  • A:hover { color: #004080; }

Pseudoelementit

  • P:first-line { color: #004080; }
  • P:first-letter { color: #004080; }

Elements

  • Inline (esim EM)
  • Block (esim P)
  • List-item (esim LI)
3.1. Margins, borders & paddings
 ____________________________________
|              margin                |
|   ______________________________   |
|  |           border             |  |
|  |   ________________________   |  |
|  |  |        padding         |  |  |
|  |  |   __________________   |  |  |
|  |  |  |     content      |  |  |  |
|  |  |  |__________________|  |  |  |
|  |  |________________________|  |  |
|  |______________________________|  |
|____________________________________|
Property Margin/border/padding widths
2em all 2em
2em 3em top and bottom 2em, left and right 3em
2em 3em 4em top 2em, left and right 3em, bottom 4m
2em 3em 4em 5em top 2em, right3em bottom 4em, left 5em

Collapsing margins:
 -Kahta elementtiä pystysuunnassa erottava marginaali on yhtä iso kuin isompi marginaali näistä kahdesta elementistä. Esim. marginaalien 3px ja 7px yhdistelmästä syntyy 7px leveä marginaali. Vain isompi otetaan huomioon!
-Ei toimi, jos marginaalien välillä on jotain (esim. border tai padding)

3.2. Muuta

Contextual Selectors
 H1 EM { color: red } H1:n sisällä oleva EM on punainen

Leveyden laskenta block-elementeillä

  • Vain width, margin-left ja margin-right -arvot säätyvät automaattisesti, padding ja border eivät.
  • Jos width, margin-left ja margin-right on kaikki säädetty kiinteiksi, margin-right on se joka säätyy tarvittaessa automaattisesti.
  • Jos width, margin-left ja margin-right kaikki säätyvät automaattisesti, width on se joka säätyy automaattisesti.
  • Jos margin-left ja margin-right ovat ainoita, jotka säätyvät automaattisesti tulee molemmista marginaaleista yhtä leveät.
  • Jos kuvasta tekee block-elementin {display: block;}, käyttäytyy se hieman eri tavalla kuin tavallinen block-elementti.

Värien merkitsemistavat

  • color: red;
  • color: rgb(255, 0, 0)
  • color: #F00
  • color: #FA0000

Cascading order

  1. Tärkeäksi merkityt tyylisäännöt
    !important
  2. Kenen tyylitiedosto?
    1. Selaimen tyylitiedosto
    2. Käyttäjän tyylitiedosto
    3. Sivun suunnitteljan tyylitiedosto
  3. Tyylisäännön tarkkuus (spesifisyys)
    Hankala määritellä. Esim. ID on tarkempi kuin CLASS.
  4. Tyylisääntöjen järjestys
    Jäljempänä (alempana) oleva syrjäyttää sen yllä olevat.

Muuta (CSS2)

E:before elementtiä E pitää edeltää jokin
E:after elementin E jälkeen pitää olla jokin
E + F ennen elementtiä F on oltava elementti E

4. Esimerkkejä

H1, H2, H3 {color: #black; } H1, H2 ja H3 ovat mustia
H3 EM { color: blue; } H3:n sisällä olevat EM:t ovat sinisiä
H3.alt { color: red; } alt käy vain H3:een
A.vaalea:visited {color: #black; } A.vaalea:t ovat vierailtuna mustia
BODY { background: url(kuvat/taustakuva.jpg); }
A { text-decoration: underline !important; }
.gray:hover { color: #33ccff; }
.email { display:none; }
.abc:hover {color: #33ccff; text-decoration: underline; }
a {text-decoration: none; }
H3 A:hover {color: #33AAFF; text-decoration: underline; font-weight:bold; }
H3 {font size: 12pt; font-family: Arial, Verdana; }
H2 A:link {font size: 14pt; color: #000000;; text-decoration: none; }
H2 A:visited {font size: 14pt; color: #000000;; text-decoration: none; }
H2 { word-spacing: 0.1em; }
body { scrollbar-face-color: 99CCFF; scrollbar-shadow-color: 000000; scrollbar-highlight-color: 000000; scrollbar-3dlight-color: 000000; scrollbar-darkshadow-color: 000000; scrollbar-track-color: 33CCFF; scrollbar-arrow-color: white; }

5. Vihjeitä CSS:n käyttöön

Uudelleenkäytettävyys
 Kirjoita tyylimääritykset niin, että useammat dokumentit voivat käyttää sitä. Yksityiskohtaiset ja vain tietylle dokumentille ominaiset määritykset voidaan tehdä suoraan style-attribuutilla dokumentin sisälle.

Skaalattavuus
 Ota huomioon, että harvalla lukijalla on samanlainen tietokone ja ohjelmistot kuin sinulla. Vältä absoluuttisia arvoja ja kokoja mikäli on mahdollisuus käyttää suhteellisia arvoja.

Testaa omia tyylimäärityksiä
 Muista testata omat sivusi usealla eri selaimella (myös eri versioilla!). Suunnittele sivut niin, ettei mahdollinen CSS-tuen puute romuta sivun ideaa. Kaikki selaimet, jotka väittävät tukevan CSS:aa eivät välttämättä tee niin oikealla tavalla! Ongelmallisia selaimia ovat erityisesti Netscape 4.x ja IE 5.x.

Huolellinen fonttien käyttö
 Ota huomioon käyttäjät, joilla ei ole samanlaisia fontteja kuin sinulla. Muista antaa vaihtoehtona myös yleisiä fonttiperheitä. Älä käytä erikoismerkkifontteja (esim. Wingding) jonkin hienon ja erikoisen ulkoasun aikaansaamiseen.

Kohtuus!
 Älä yritä muokata ja asettaa jokaiselle mahdolliselle elementille ja attribuutille jotakin arvoa väkisin. Liian moni erilainen fontti ja väri saavat aikaan vain sekavan vaikutelman.

Selected design guidelines

  • Suunnittele css-tiedosto niin, että sitä voidaan käyttää monilla sivuilla. Sivukohtaisiin tyylisääntöihin käytä style-tagia.
  • Suunnittele sivut skaalautuviksi
  • Ota huomioon mahdollisuus että käyttäjällä on oma tyylitiedostonsa. Käytä W3C:n CSS-validaattoria.
  • Testaa sivut monella selaimella
  • Käytä negatiivisia marginaaleja varoen
  • Käytä värien koodeja, ei nimiä (ei blue vaan #0000FF)

6. Sekalaisia (omia) muistiinpanoja

Kuinka tarkasti CSS-luokkia pitäisi lisätä tiedostoon (granularity)?

  • Jos tiedät että ko. elementti ei tule saamaan seurakseen samanlaista elementtiä saman äitielementin sisään, elementille ei tarvitse tehdä omaa CSS-luokkaa.
  • Jos elementti voi saada kaltaistaan seuraa, tee sille oma luokka.
  • Jos haluat että ulkoasu näyttäisi smalta myös vanhemmissa (MSIE/Netscape 4.0) selaimissa, see jokaiselle elementille oma luokkansa.

Marginaalien leveydet kannattaa määrittää absoluuttisina. Suhteellisesta määrittelystä voi tulla ongelmia kun sivujen suunnittelija muuttaa fonttikokoa.

Mediat:
 Viisi vaihtoehtoa eri medioille tarkoitettujen tyylitiedostojen liittämiseen (Kirjoita toissijaiseen tyylitiedostoon vain muuttuneet määreet, niin muutoksien tekeminen on yksinkertaisempaa.):

1) Toimii ainakin IE 6.0:ssa ja Mozilla 1.0.1:ssa, mutta ei Dreamweaver MX:ssa. Tosin MSIE:lla printattaessa saattaa tulla ongelmia. Huomaa että @importin tulee standardin mukaan olla ennen link-tagia

<STYLE type="text/css" media="print">
@import url( print.css );
</STYLE>
<LINK media="screen" href="screen.css" type="text/css" rel="stylesheet">

2) Tämä toimii kaikissa 5-version selaimissa, mutta ei Dreamweaverissa. Ongelma: toissijaisten medioiden tyylitiedoson pitää päivittää all-tyylitiedoston määreet => hankalaa. Jos all:in taas muuttaa screen:iksi, mutta silloin Netscape 4.x löytää tyylitiedoston ja näyttää sivun sekavana.

<LINK media="all" href="main.css" type="text/css" rel="stylesheet">
<LINK media="print" href="print.css" type="text/css" rel="stylesheet">

Eri medioiden tyylitiedostoihin voi standardin mukaan viitata myös ensisijaisesta tyylitiedostosta seuraavilla tavoilla:

3) Tämä ei toimi IE 6.0:ssa eikä Mozilla 1.0.1:ssa.

@import url("loudvoice.css") aural;

4) Tämä toimii MSIE 6.0.ssa ja Mozilla 1.0.1:ssa, sekä osittain Opera 5.0:ssa. Dreamweaver MX:ssa tämä toimii joskus, joskus taas sivu näyttää WYSISYG-tilassa todella sekavalta (silloin kun asettelu on tehty kokonaan div:eillä ja CSS:llä?). (Ja kaiken lisäksi Dreamweaver menee joskus katkomaan div-elementtejä ilman lupaa). Print-osio kannattaa sijoittaa tyylitiedoston alkuun, muuten MSIE 5.0 käyttää sitä myös näytöllä.

@media print { /* style sheet for print goes here */ }

5) Tämä toimii eri selaimissa parhaiten. Linkataan tavalla no. 2 eri medioiden tyylitiedotoihin:

<LINK media="screen" href="screen.css" type="text/css" rel="stylesheet">
<LINK media="print" href="print.css" type="text/css" rel="stylesheet">

Ja sitten screen.css:aan laitetaan vain

@import url("screen-advanced.css");

Ja näytölle tarkoitetut tyyli kirjoitetaan screen-advanced.css:aan. Koska Netscape 4.x ei ymmärrä em. linkkiä, se ei yritä käyttää mitään tyylejä. Dreamwevaerissa sivu ei näin tehtynä kuitenkaan näytä aivan oikealta.

7. Lähteet & lisätietoja

  • Lie, Håkon Wium & Bos, Bert 1999: Cascading Style Sheets, level 1 - W3C Recommendation, 17 Dec 1996, revised 11 Jan 1999. http://www.w3.org/TR/REC-CSS1 [2002-10-29]
  • Lie, Håkon Wium & Bos, Bert 1997: Cascading Style Sheets - Designing for the Web. Addison Wesley Longman, 1997.
  • Linjama, Tero 2001: XHTML. 1. painos. Docendo Finland Oy, 2001.
  • Zeldman, Jeffrey (toim.) A List Apart - For people who make websites. http://www.alistapart.com