Katsaus CSS:ään

Tässä yhteydessä en käsittele seuraavia:

Johdattava esimerkki

h1, h2, h3, h4   { text-align : center; }
strong.warning   { color : red; background : white; }
blockquote       { padding : 5px; font-style : italic; }
blockquote.latin { border : solid green 3px; }

Onko intuitiivisesti selvää, mitä suunnilleen merkitsee?

Esimerkkiä voi katsella.

Miksi CSS?

Erilaisia vastauksia:

  1. Rakenteen (HTML) ja esitysasun (CSS) erottaminen toisistaan
  2. Ulkoasua koskevien ehdotusten tekeminen
  3. HTML + CSS = ladontakieli (desktop publishing) (väärä vastaus)

Historiaa:

Jo HTML 2.0:ssa ajateltiin tyylisäännöstöjä, esim.:

The P element indicates a paragraph. The exact indentation, leading space, etc. of a paragraph is not specified and may be a function of other tags, style sheets, etc.

Tilanne:

Yksinkertainen (?) esimerkki

Halutaan korostaa kappaleen ensimmäistä kirjainta. Voitaisiin tehdä esimerkiksi kuvalla. Kuvilla voitaisiin hurjastella.

Mutta ollaan vaatimattomia: halutaan vain lihavoida jokaisen kappaleen ensimmäinen kirjain.

Banaali ratkaisu HTML:llä: <p><b>T</b>ämä on... (jokaiselle kappaleelle erikseen!).

Luonnollisin yritys CSS1:llä (first-letter-pseudoelementtiä käyttäen):

p:first-letter { font-weight : bolder; }

Huomaa: CSS:n syntaksi poikkeaa HTML:n syntaksista ja siinä tekee helposti virheitä! Esim. "=" pro ":". Ja huomaa:

Ongelma: bolder on huonommin tuettu kuin epäloogisempi bold.

Toinen ongelma: rakennetta tukee toistaiseksi lähinnä vain Opera (ja Mozilla).

Lisäongelma: IE 3:n Mac-versio tukee sitä väärin: boldaa koko kappaleen.

Hei, meillä on vielä ongelma: Yleinen tapa kirjoittaa

<h3>Jotain</h3>
Liirum laarum
niitä näitä.
<p>
Jotain lisää blaa blaa.

(HTML 4.0 Strict auttaisi.)

Miten opiskella CSS:ää

  1. Jukka Korpela: Web-julkaisemisen opas, luku Värikkyyttä: tyylisäännöstöt (style sheets, CSS). Suomenkielisenä johdantona CSS:ään voi lukea myös Pekka Pääkkösen kirjoittaman dokumentin CSS-Tyylimäärittely, joka on referaatti kirjasta Lie & Bos : Cascading style sheets.
  2. Seuraavasta voi olla pieni apu: CSS-termejä suomeksi ja englanniksi
  3. Varsinaiseen opiskeluun sopinee parhaiten WDG:n CSS-aineisto joka käsittelee CSS1:tä.
  4. CSS2:n opiskelu ei vielä ole kovin hyödyllistä, koska sen tuki on suppea. Mutta CSS:stä syvällisemmin kiinnostuneen kannattaa lukea CSS2:n spesifikaatio.
  5. Lisää apua löytyy CSS Pointers -aineistosta.

¿Entä Downloadable CSS Tutorial from Style Master?

Primum est non nocere. Tärkeintä on olla vahingoittamatta. (Hippokrates.) Huolehdi siitä, että CSS:n käyttö ei kovin pahasti huononna esitysasua.

Käytännön neuvoja

  1. Katsotaan WDG:n CSS-aineistosta Cascading Style Sheets miten homma tehdään
  2. Katsotaan toimiiko se edes siedettävästi selaimissa: Master Compatibility Chart
  3. Tarkistetaan HTML-koodi validaattorilla ja CSS-koodi CSSCheckillä.
  4. Ihmetellään kun se ei siltikään toimi. :-) Ehkä kysytään neuvoa ryhmässä comp.infosystems.www.authoring.stylesheets

Tee mieluummin yksinkertaista CSS:ää joka toimii kuin hienouksia, jotka eivät toimi.


Viimeisimmän päivityksen ajankohta: 2000-03-09

Jukka Korpela