[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan 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ä[S]. Olen testannut kaikkia visuaalisia CSS2-spesifikaation piirteitä lukuun ottamatta eräitä fontteihin liittyviä ominaisuuksia (mainitsen niistä sivulla 12. Mitä muita erityispiirteitä CSS sisältää[S]).

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[S] ja englanninkieliseen sivuuni[S]).

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[S], CSS-taulukko 2[S]) ja niiden kommenttisivuista. Mallisivuista on olemassa oma liitesivu[S]. Eräät mallit ovat XML-dokumentteja. Käsittelen CSS:n liittämistä XML-dokumentteihin eräällä sivulla[S].

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[S], 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[S] sekä eri esityslaitteille tarkoitettujen ns. mediatyypien käytön toimivuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S].

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[S] ja Netscape 4.x -sarjan erityisongelmia eräällä sivulla[S].

class, id

Käsittelen näitä attribuutteja sivulla 4. Mitä ovat valitsimet, luokat ja id-attribuutit[S].

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[S] ja sen ongelmia sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S].

@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[S].

@page

Toimii ainakin Operassa. Käsittelen sääntöä sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S].

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[S].

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[S].

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[S] ja 9. Miten CSS annetaan listaelementeille[S].

Ominaisuudet

Standardit CSS2-ominaisuudet (aakkosjärjestyksessä)
background jne.

Käsittelen background ja border ominaisuuksia sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille[S]. 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[S].

bottom

Liittyy ominaisuuteen position. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

color

Käsittelen ominaisuutta sivuilla sivulla 3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat[S].

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[S].

cursor

Käytän sitä joissakin erityislinkeissä. Käsittelen ominaisuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S].

displayPerusominaisuuksia, jolla kontrolloin eri esitysmuotoja. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].
float

Käytän muutamien elementtien asemoimiseen, mutta en perusrakenteissa. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

font-family, font-size, font-style, font-weight

Käsittelen ominaisuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S] sekä fonttikokojen osalta sivulla 3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat[S].

height

Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille[S].

left

Liittyy ominaisuuteen position. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

line-height

Käsittelen ominaisuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S].

list-style etc.

Käytän aliominaisuuksilla. Käsittelen listojen ominaisuuksia sivulla 9. Miten CSS annetaan listaelementeille[S].

margin

Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille[S].

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[S] ja 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

orphansSe 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[S].
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[S]

overflow

Käytän joissakin taulukoissa taulukkosolun sisällön kontrolliin arvoa hidden. Käsittelen ominaisuutta sivuilla 10. Miten CSS annetaan taulukkoelementeille[S] ja 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

padding

Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille[S].

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[S].

position

Olen käyttänyt kaikkia mahdollisia arvoja. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

quotes

Katso ominaisuuden content kommentit.

right

Liittyy ominaisuuteen position. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

size

Omaisuus kuuluu ns. sivutettuun mediaan, jota käsittelen sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S].

table-layout

Käsittelen ominaisuutta sivulla 10. Miten CSS annetaan taulukkoelementeille[S].

text-align, text-decoration, text-indent

Käsittelen ominaisuuksia sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille[S].

top

Liittyy ominaisuuteen position. Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

vertical-align

Käsittelen ominaisuuksia sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille[S].

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[S].

width

Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille[S].

z-index

Käsittelen ominaisuutta sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli[S].

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).

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004