Luettelen alla aihealueittain tekemäni aihepiirit. Paluulinkkeinä tähän aihepiiriin on tämä valikko ja sivun yläreunassa oleva linkki Aihepiiriluettelo.
|
![]() | Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > H Miten olen itse käyttänyt sivuillani CSS:ää |
---|
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ä.
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ä
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 |
style | Käytän attribuuttia Käsittelen tätä attribuuttia sivulla 2.
Miten CSS liitetään Web-sivuihin |
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 | 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.
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 |
Standardit CSS2-ominaisuudet (aakkosjärjestyksessä) | |
---|---|
background jne. | Käsittelen
|
border jne. |
|
border-collapse | Käsittelen ominaisuutta sivulla 10. Miten CSS annetaan taulukkoelementeille |
bottom | Liittyy ominaisuuteen |
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ä |
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 |
height | Käsittelen ominaisuutta sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille |
left | Liittyy ominaisuuteen |
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ä |
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
|
overflow | Käytän joissakin taulukoissa
taulukkosolun sisällön kontrolliin arvoa |
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 |
right | Liittyy ominaisuuteen |
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 |
vertical-align | Käsittelen ominaisuuksia sivulla 8. Miten CSS annetaan elementtien taustoille ja reunoille |
widows | Ks. ominaisuus |
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ä |
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. |