Omne tulit punctum qui miscuit utile dulci(Kaikki pinnat vie kotiin se, joka yhdistää huvin ja hyödyn. Sanasanaisesti: Jokaisen vie pisteen se, joka sekoittaa hyödyllistä makeaan.)Horatius, Ars poëtica, 343"Kerro minulle, millaisiin luokkiin sinä jaat Web-sivut, niin minä kerron, millainen olet."
- brosyyri
- yrityksen, laitoksen, ihmisen, hänen koiransa tms. esite
- infopläjäys
- parhaimmillaan: jäsennelty, pienehköihin osiin jaettu, mukana hakutoiminto
- toimintasivu
- esim. tilausjärjestelmä, interaktiivinen animaatio, "chat"
- kikkailu
- "katso äiti, mä osaan!"
Tyypillinen ongelma: infopläjäyksen kuorruttaminen kikkailulla, joka sotkee toimivuuden.
CSS oikein käytettynä mahdollistaa kuorruttamisen siten, että kakun voi syödä ilman kuorrutusta tai sen kera. (Kaikki eivät pidä kermavaahdosta tai eivät voi syödä sitä.)
- brosyyrissä CSS voi parantaa näyttävyyttä, antaa persoonallisen vaikutelman, luoda "firman imagoa" jne.
- infopläjäyksessä CSS voi auttaa korostamaan asioita, ilmaisemaan loogisia suhteita visuaalisesti, helpottamaan "raskaan" aineiston (esim. iso taulukko) esitystä jne.
- toimintasivulla CSS voi myös liittyä toiminnan havainnollistamiseen tyylin muuttamisella ns. DOMin kautta (HTML+JavaScript+CSS)
- kikkailusivulla saa aivan erityisiä sekoiluja aikaan CSS:llä.
Esimerkki tekstitason tyylittelystä:
dt { font-weight: bold; color : #066; background: transparent none;}Sanoo: Esitä määritelmälistojen termit (
dt-elementit, definition term) seuraavasti:
- lihavoituina
- värillä #066, missä numerot kertovat punaisen, vihreän ja sinisen valon intensiteetin asteikolla 0:sta F:ään (heksadesimaalilukuna)
- taustaväri on "läpinäkyvä", taustakuvaa ei ole.
Toisena esimerkkinä on ns. kirjallinen kappaletyyli (literary paragraphs). Tässä tyylissä kappaleiden välissä ei ole tyhjiä rivejä, kuten useissa selaimissa oletusarvoisesti on (ns. Mosaic-tyyli).
Kukin kappale alkaa siten, että ensimmäistä riviä on hiukan sisennetty. Sisennyksen määrä vaihtelee tyylin mukaan. Tällaista monet pitävät tärkeänä perinteenä.
Tämä voidaan toteuttaa dokumentinlaajuisesti esimerkiksi siten, että tyylisäännöstössä ehdotetaan
p-elementtien ylä- ja alamarginaalin nollaamista sekä esim. yhdenem-yksikön (= fontin koko) suuruista ensi rivin sisennystä.Lisäksi voidaan jättää uuden tekstijakson aloittavan kappaleen eteen tyhjää tilaa ja ensimmäinen rivi sisentämättä, käyttämällä esim. merkkausta
<p class="start">ja CSS:ssä lisäsääntöä, joka ehdottaastart-luokkaan kuuluvillep-elementeille sopivan korkuista ylämarginaalia sekä ensi rivin sisennyksen nollausta.Konkreettiset CSS-säännöt voisivat olla:
p { margin-bottom:0; margin-top:0; text-indent:1em; }p.start { text-indent : 0; margin-top: 0.7em; }
CSS tekniikkana on kuitenkin vielä lapsenkengissä: spesifikaatiot, selaintuki ja sivuntekijöiden strategiat ovat kehittymättömiä.
Jukka Korpela, jkorpela@malibutelecom.com