:: CSS-opas: Oppaan lisäsivut: H Miten olen itse käyttänyt sivuillani CSS:ää ::

Luettelen alla aihealueittain tekemäni aihepiirit. Paluulinkkeinä tähän aihepiiriin on tämä valikko ja sivun yläreunassa oleva linkki Aihepiiriluettelo.

CSS-opas

Piirroksiani

Luontosivuja

Erityislinkit:
Etusivu
Mitä uutta?
Sanasto
Sisällysluettelo
Kaikki aihepiirit

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > H Miten olen itse käyttänyt sivuillani CSS:ää

H Miten olen itse käyttänyt sivuillani CSS:ää

Aiheet

Yleistä

Tämä sivu antaa vastauksia, mitä kannattaa CSS-piirteitä käyttää, joten se tavallaan jatkoa sivulle Usein esitettyjä kysymyksiä. Olen testannut kaikkia visuaalisia CSS2-spesifikaation piirteitä lukuun ottamatta eräitä fontteihin liittyviä ominaisuuksia (mainitsen niistä sivulla 12. Mitä muita erityispiirteitä CSS sisältää).

CSS:ään on jotakin selainkohtaisia epästandardeja laajennuksia. Microsoftin selaimissa ne on suunniteltu yleisesti käytettäviksi, mutta Opera ja Netscape-selaimissa lähinnä selaimen omaan käyttöön. Käyttöliittymää (user interface) koskeva selainkohtainen CSS ei ole haitallista selaimilla, jotka eivät sitä tue. Olen itse käyttänyt sivustoillani joskus ominaisuutta scrollbar-base-color (muuttaa vierityspalkkien värejä), vaikka juuri nyt en käytä varsinaisilla asiasivuilla mitään epästandardia piirrettä (muutamilla mallisivuilla em. ominaisuus on käytössä). Yleisesti ottaen Microsoftin epästandardien piirteiden suosiminen on arveluttavaa firman tuotepolitiikan vuoksi (tutustu WWW-standardeja koskevaan suomenkieliseen ja englanninkieliseen sivuuni ).

Jotkut selaimet tukevat myös CSS3:een ehdotettuja piirteitä, joista yhtä olen käyttänyt. Löydät suhteellisen tarkat tiedot tuetuista CSS-piirteistä kahdesta englanninkielisestä taulukosta (CSS-taulukko 1 , CSS-taulukko 2 ) ja niiden kommenttisivuista. Mallisivuista on olemassa oma liitesivu. Eräät mallit ovat XML-dokumentteja. Käsittelen CSS:n liittämistä XML-dokumentteihin eräällä sivulla.

Listaan tällä sivulle sivustoillani nykyisin käyttämäni CSS:n. Taulukoissa ei ole mukana vain demonstrointitarkoituksessa käytetyt piirteet. Koska sivustoni on esimerkkinä CSS:n käytöstä, olen käyttänyt sangen suuren määrän erilaisia CSS-piirteitä - kaupallisilla sivustoilla ei niin paljoa tuskin voi hyödyntää. Olen kuitenkin jättänyt käyttämättä eräitä toimimattomia, huonosti toimivia tai vähän tuettuja piirteitä. Kerron lyhyesti syyn, miksi en jostakin syystä käytä enää tiettyä piirrettä. Joissakin tapauksissa kuvaan myös syyt, miksi suosittelen jonkin piirteen käyttämistä.

Peruskonseptit, säännöt ja valitsimet

Peruskonsepteja on CSS:n liittäminen (X)HTML-dokumentteihin. HTML 4.01 spesifikaation pohjalta peruskonsepteihin kuuluu tavallaan myös käyttäjän tyylisivut, sillä spesifikaatio vahvasti suosittaa niiden tukemista.

CSS:n perusmekanismeja ovat myös erilaiset säännöt ja valitsimet. Osa niistä kuuluu aivan peruskonsepteihin, mutta osa kuuluu enemmänkin CSS:n edistyneisiin piirteisiin.

Elementit ja attribuutit
`<LINK rel="stylesheet" media="..." ...>` `<LINK rel=stylesheet=" media="screen" title="..." ...>` `<STYLE media="..." ...>`	Annan pääsääntöisesti aihepiirikohtaisen CSS:n elementtiä `LINK` ja dokumenttikohtaisen CSS:n elementtiä `STYLE` käyttäen, sillä kaikki mediatyyppejä tukevat selaimet ymmärtävät attribuutin `media` (en joka kerta käytä attribuuttia lainkaan, jolloin CSS koskee automaattisesti kaikkia esitysmuotoja). Koska Opera tukee "diaesitysmuotoa", olen käyttänyt attribuutilla `media` arvoja `print`, `screen` ja `projection`. Mozilla Gecko -selaimet (esim. Netscape 6.x+) ja Opera 7.x+ tukevat vaihtoehtoisia tyylisivuja. Koska niistä ei ole mitään hyötyä, poistin ne käytöstä. Käsittelen perusmäärittelyjä sivulla 2. Miten CSS liitetään Web-sivuihin sekä eri esityslaitteille tarkoitettujen ns. mediatyypien käytön toimivuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`style`	Käytän attribuuttia `style` aika vähän, sillä niistä on ongelmia Netscape 4.x -sarjan kanssa. Käsittelen tätä attribuuttia sivulla 2. Miten CSS liitetään Web-sivuihin ja Netscape 4.x -sarjan erityisongelmia eräällä sivulla.
`class`, `id`	Käsittelen näitä attribuutteja sivulla 4. Mitä ovat valitsimet, luokat ja id-attribuutit.
At-säännöt
`@import`	Käytin aiemmin runsaasti tuontisääntöjä. Koska Operalla - suosikkiselaimellani - ne aiheuttavat ongelmia attribuutin `media` kanssa, olen luopunut niiden käytöstä lähes kokonaan. Käytän niitä joissakin tilanteissa lähinnä sellaisen CSS:n tuomiseen, joka on yhteistä käytetyille mediatyypeille. Käsittelen at-säännön määrittämistä sivulla 2. Miten CSS liitetään Web-sivuihin ja sen ongelmia sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`@media`	Käytin medialohkoja aiemmin paljon, mutta pääsääntöisesti olen luopunut niiden käytöstä. Käytän nykyisin vain erityistilanteissa, sillä Microsoft Internet Explorer 5.0 Mac ei tue niitä. Käsittelen mediatyyppien ongelmia sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`@page`	Toimii ainakin Operassa. Käsittelen sääntöä sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
Tärkeyssääntö
`!important`	Vaikka tätä piirrettä nimitetään säännöksi, se liitetään ominaisuuksien arvojen joukkoon ja se on siten tavallaan enemmänkin ominaisuuksiin liittyvä asia. Netscape 4.x ei tue tätä piirrettä. Käsittelen sitä sivulla 5: Mikä on CSS:n prosessointijärjestys.
Valitsimet
`*`	Attribuuttivalitsimet (esim. `[class="joku"]`) toimivat ainakin uusissa Opera ja Mozilla Gecko -selaimissa. Käytän niitä visuaalisen isäinformaation luomiseen sekä joissakin tapauksissa myös MS IE:n ohittamiseen, milloin uusille Opera ja Mozilla Gecko -selaimille annetut samat ominaisuuksien arvot tuottaisivat ongelmia. Käsittelen sääntöjä ja valitsimia sivulla 4. Mitä ovat valitsimet, luokat ja id-attribuutit.
`elementti`
`elementti elementti`
`elementti.luokka`, `.luokka`
`#id`, `elementti#id`
`elementti[attribuutti="arvo"]`
`p:first-letter`
`:before`, `:after`	Käytän näitä lähinnä tulostuksen ja Operan "diaesityksen" apuna luodakseni hyödyllistä lisäinformaatiota ominaisuuden `content` kanssa. Käsittelen näitä valitsimia sivuilla 4. Mitä ovat valitsimet, luokat ja id-attribuutit ja 9. Miten CSS annetaan listaelementeille.

Ominaisuudet

Standardit CSS2-ominaisuudet (aakkosjärjestyksessä)
`background` jne.	Käsittelen `background` ja `border` ominaisuuksia sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille. Olen hyödyntänyt niitä sekä pikakirjoitteina että yksittäisiä aliominaisuuksia käyttäen.
`border` jne.
`border-collapse`	Käsittelen ominaisuutta sivulla 10. Miten CSS annetaan taulukkoelementeille.
`bottom`	Liittyy ominaisuuteen `position`. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`color`	Käsittelen ominaisuutta sivuilla sivulla 3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat.
`content`	Ominaisuus on erittäin hyödyllinen tulostuksessa ja Operan "diaesitysmuodossa". Yhdessä `:before` or `:after` näennäiselementtien kanssa sillä saa luotua uusilla Opera ja Netscape selaimilla hyödyllistä lisäinformaatiota. Generoin niillä myös automaattisesti `'` -merkkejän. Käsittelen ominaisuutta lyhyesti sivulla 9. Miten CSS annetaan listaelementeille.
`cursor`	Käytän sitä joissakin erityislinkeissä. Käsittelen ominaisuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`display`	Perusominaisuuksia, jolla kontrolloin eri esitysmuotoja. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`float`	Käytän muutamien elementtien asemoimiseen, mutta en perusrakenteissa. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`font-family`, `font-size`, `font-style`, `font-weight`	Käsittelen ominaisuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille sekä fonttikokojen osalta sivulla 3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat.
`height`	Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille.
`left`	Liittyy ominaisuuteen `position`. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`line-height`	Käsittelen ominaisuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`list-style` etc.	Käytän aliominaisuuksilla. Käsittelen listojen ominaisuuksia sivulla 9. Miten CSS annetaan listaelementeille.
`margin`	Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille.
`max-width`, `min-height`, `min-width`	Kontorolloin näillä `height` ja `width` ominaisuuksien ohella lohkoelementtien dimensioita. Ne toimivat uusissa Opera ja Netscape-selaimissa. Käsittelen ominaisuuksiasivuilla 8. Miten CSS annetaan elementtien taustoille ja reunoille ja 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`orphans`	Se estää ominaisuuden `widows` ohella Operalla tulostettaessa jonkin verran yksinäisiä rivejä. Omaisuudet kuuluvat ns. sivutettuun mediaan, jota käsittelen sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`outline` (`-moz-outline`)	Käytän sitä erityislinkeissä dynaamisten valikoiden alapuolella Mozilla Gecko -selaimille. Ne selaimet tukevat `outline` ominaisuutta `-moz-outline` kautta. Se toimii CSS2-spesifikaation mukaan `a:hover` kanssa, mutta keskusteltuani erään selainkehittelijän kanssa ominaisuus `outline` ei ole tuettu suoraan, sillä täysi CSS2-toteutus epäonnistui. Tarkoituksenani on vain poistaa selaimen oma ääriviivamäärittely. Päämäärä toimii osittain. Opera 7.x+ tukee `outline` suoraan ja annan sen lomakekontrollielementeille `:focus` kanssa. Käsittelen ominaisuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille
`overflow`	Käytän joissakin taulukoissa taulukkosolun sisällön kontrolliin arvoa `hidden`. Käsittelen ominaisuutta sivuilla 10. Miten CSS annetaan taulukkoelementeille ja 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`padding`	Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille.
`page-break-after`, `page-break-before`, `page-break-inside`	Kontrolloin näillä tulostuksen sivukatkoja sekä "diojen" vaihtamista Operan "diaesitysmuodossa". Viimeisin ominaisuus toimii vain Operan tulostusmediassa. Omaisuudet kuuluvat ns. sivutettuun mediaan, jota käsittelen sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`position`	Olen käyttänyt kaikkia mahdollisia arvoja. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`quotes`	Katso ominaisuuden `content` kommentit.
`right`	Liittyy ominaisuuteen `position`. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`size`	Omaisuus kuuluu ns. sivutettuun mediaan, jota käsittelen sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`table-layout`	Käsittelen ominaisuutta sivulla 10. Miten CSS annetaan taulukkoelementeille.
`text-align`, `text-decoration`, `text-indent`	Käsittelen ominaisuuksia sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.
`top`	Liittyy ominaisuuteen `position`. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`vertical-align`	Käsittelen ominaisuuksia sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille.
`widows`	Ks. ominaisuus `orphans`.
`visibility`	Käytän tätä ominaisuutta päänavigaatioelementissä piilottamaan jonkun linkin. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
`width`	Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille.
`z-index`	Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.
CSS-piirteet
`opacity`	Mozilla Gecko -selaimet tukevat sitä kokeellisesti etuliitteellä `-moz-` (`-moz-opacity`). Käytän sitä dynaamisten valikoiden "varjoissa".
Epästandardit CSS-ominaisuudet
`filter`	Käytän sitä eräille MS IE -selaimille dynaamisten valikoiden varjoissa. Kyseessä on Microsoft IE 5.5+ Windows -selainten tukema erikoistehoste. Microsoft ilmoittaa sen tukemisen olevan CSS3-spefikaation toteutusta. Tämä ei kuitenkaan pidä paikkaansa. `filter` ei ole tarkoitettu graafisten erikoistehosteiden luomiseen tavanomaisille dokumenteille. Se kuuluu SVG-kieleen, jossa sen syntaksi on aivan toisenlainen kuin MS IE:n käyttämä. W3C: Scalable Vector Graphics (SVG) 1.0 Specification (Property Index).