[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuHarjoittelu > Malli-, testi- ja esimerkkisivuja

Malli-, testi- ja esimerkkisivuja

Aiheet

Yleistä

Luettelen tällä sivulla opassivuillani käyttämät malli-, testi ja esimerkkisivut. Ne liittyvät joko HTML, XML tai CSS koodaukseen. Jotkut niistä ovat hyvin yksinkertaisia, mutta eräät sangen komplekseja. Käyn ne sivujen mukaisessa järjestyksessä, mutta eivät aivan johdonmukaisesti, sillä mallikuvien numerointi on hieman epäjohdonmukainen. Varsinaisten mallisivujen lisäksi olen laittanut mukaan vertailusivuja ja vertailevia kuvakaappauksia. Niitä voi käyttää harjoitusten apuna.

Malli-, testi- ja esimerkkisivut

Sivut 1-11

  1. Mikä on HTML ja XML asiakirjojen perusrakenne
    1. ./Models/Model0a.html[S][Pw]) - ilman rakennetta oleva teksti. Sille on myö vertailusivu:
    2. ./Models/Model0c.html[S][Pw] - selkeästi jäsenneltyä tekstiä.
    3. ./Models/Model1.html[S][Pw] - yksinkertainen kappale.
    4. ./Models/Model2.html[S][Pw] - dokumenttipuu.
    5. ./Models/Model3.html[S][Pw] - keskitetty kappale.
    6. ./Models/Model4.html[S][Pw] - esimerkki linkitetystä CSS:stä.
    7. ./Models/Oppilas.html[S][Pw] - ilman tyylisivuja oleva vertailusivu sivulle 2, joka käyttää tyylisivuja.
    8. ./Models/Model4a.html[S][Pw] - esimerkki yksinkertaisesta XHTML-dokumentista.
  2. Miten CSS liitetään Web-sivuihin
    1. ./Models/Model5.html[S][Pw] - malli tyyliattribuutin (style) käytöstä. Koskee myös sivua 11, Miten CSS liitetään Web-sivuihin (position:absolute).
    2. ./Models/Model5a.html[S][Pw] - malli tyyliattribuutin ja ulkopuolisen tyylisivun käytöstä.
    3. ./Models/Model5b.html[S][Pw] - malli tyylielementin (STYLE) ja ulkopuolisen tyylisivun käytöstä.
    4. ./Models/Model6.html[S][Pw] - esimerkki väärin sijoitetusta @import at-säännöstä sekä sivua 4, Valitsimet koskien esimerkkejä väärin nimetyistä valitsimista. Sillä on myös rinnakkainen mallisivu ./Models/Model6NoDTD.html[S][Pw].
    5. ./Models/Model6a.html[S][Pw] - selainten välisten erojen demonstrointia.
    6. ./Models/Model7.html[S][Pw] - esimerkki pikakirjoiteominaisuuksien (shorthand properties) käytöstä (koskee myös sivua 8, Miten CSS annetaan elementtien taustoille ja reunoille ).
  3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat
    1. ./Models/Model8.html[S][Pw] - mallisivu tekstivärin käytöstä.
    2. ./Models/Model8a.html[S][Pw] - toinen mallisivu tekstivärin käytöstä.
    3. ./Models/Model8b.html[S][Pw] - mallisivu relatiivisten font-size arvojen käytöstä.
    4. ./Models/Model8c.html[S][Pw] - vertailusivu xx-small - xx-large fonttikoista.
  4. Mitä ovat valitsimet, luokat ja id-attribuutit (+ seuraavat: 12.)
    1. ./Models/Model9.html[S][Pw] - yleisvalitsinten käyttöesimerkkejä.
    2. ./Models/Model10.html[S][Pw] - malli elementtityyppi­valitsimen (H2) käytöstä.
    3. ./Models/Model11.html[S][Pw] - ryhmistysesimerkkejä. Mukana myös malli taulukkomaisesta listasta koskien sivua 9, Listat.
    4. ./Models/Model12.html[S][Pw] - malli luokkavalitsimen käytöstä.
    5. ./Models/Model13.html[S][Pw] - malli attribuuttivalitsinten käytöstä.
    6. ./Models/Model14.html[S][Pw] - malli id-valitsimen käytöstä.
    7. Virheet.php3#listat2[S][Pw] - attribuutti- ja id-valitsinten testi.
    8. ./Models/Model15.html[S][Pw] - malli kappaleisiin liittyvistä näennäiselementeistä.
  5. Mikä on CSS:n prosessointijärjestys
    1. ./Models/Model16.html[S][Pw] - malli tapauskohtaisista (contextural) valitsimista.
    2. ./Models/Model17.html[S][Pw] - toinen malli tapauskohtaisista (contextural) valitsimista. Koskee myös sivua 9, Miten CSS annetaan listaelementeille .
    3. Virheet.php3#listat[S][Pw] - valitsintesti listaelementeillä. Koskee myös sivua 9, Miten CSS annetaan listaelementeille.
    4. ./Models/Model18.html[S][Pw] - mallisivu !important-säännön käyttämisestä.
  6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille + mediatyypit
    1. ./Models/Model19.html[S][Pw] - malleja elementin FONT määrittelemisestä.
    2. ./Models/Model20.html[S][Pw] - malli elementin BODY perusmäärittelyistä.
    3. ./Models/Model21.html[S][Pw] - malli elementin H2 määrittelemisestä.
    4. ./Models/Model22.html[S][Pw] - malli ominaisuuden font pikakirjoiteominaisuuksista (koskee myös sivua 8, Miten CSS annetaan elementtien taustoille ja reunoille).
    5. Virheet.php3#fontti[S][Pw] - tässä kohtaa oli tarkoitus olla testi @font-face at-säännön tukemisesta, mutta sopiva fonttitiedosto puuttuu tällä hetkellä eikä testiä ole todellisuudessa olemassa.
  7. Miten CSS liitetään ankkureille ja linkeille (+ seuraavat: 44., 57., 58.)
    1. ../Yleiset/index2.html[S][Pw] - demonstroi linkki- ja dynaamisten pseudoluokkien käyttöä.
    2. ../Tests/ElementitTestB.html[S] - testaa omianaisuuden display käyttämistä kuvalinkkien kanssa. Koskee myös sivua 11, Mikä on CSS2:n Visuaalinen muotoilumalli.
  8. Miten CSS annetaan elementtien taustoille ja reunoille (+ seuraavat: 14., 34.)
    1. ./Models/Model23.html[S][Pw] - malli elementille BLOCKQUOTE annetuista reunusominaisuuksista.
    2. Virheet.php3#reunat[S][Pw] - demonstroi reunusongelmista rivinsisäiselementtien kanssa.
    3. ../Teaching/Illegal.php3[S][Pw] - toinen sivu, jossa oleva esimerkki demonstroi reunusongelmista rivinsisäiselementtien kanssa.
    4. ./Models/Model23a.html[S][Pw] - malli laatikon dimensoihin liittyvien ominaisuuksien käytöstä seuraavien kuvakaappausten kanssa:
    5. ../modeltable2.html[S] - demonstroi edellistä ongelmaa. Koskee myös sivua 11, Mikä on CSS2:n Visuaalinen muotoilumalli (position:fixed).
    6. ../Tests/Girl.html[S] - testaa ominaisuuksia background-attachment:fixed and position:fixed; tästä sivusta on kolme kuvakaappausta:
    7. ./Models/Model23b.html[S][Pw] - mallisivu lomake-elementeistä ja kuvakaappaus ../Tests/model000.gif[S] Mozilla 0.7:stä. Sivulla käytetään dynaamisia näennäisluokkia, jolloin testi koskee myös sivua 7, Miten CSS liitetään ankkureille ja linkeille.
  9. Miten CSS annetaan listaelementeille (+ seuraavat: 21., 28., 29.)
    1. ./Models/Model24.html[S][Pw] - malli ominaisuuden list-style-image käyttämisestä.
    2. ../Nt/MISSION_FAILED.php3#Summary[S][Pw] - esimerkki pienten kasvokuvien käyttämisestä listaelementteinä.
    3. ../Tests/ElementitListTest.html[S] - testaa listaelementtien sisennyksiä, kun margin:0 ja padding on määrittämättä. Mukana seuraavat kuvakaappaukset:
    4. ./Models/Model24a.html[S][Pw] - testaa generoituja sisältöjä, sitaatteja sekä eräitä display-ominaisuuden arvoja. Tämä malli koskee myös sivua 11, Mikä on CSS2:n Visuaalinen muotoilumalli. ../Tests/Quotes.html[S] on sitaatteja koskeva lisätestisivu.
  10. Miten CSS annetaan taulukkoelementeille
    1. ./Models/Model25.html[S][Pw] - demonstroi border-collapse, border, background ja joidenkin muidenkin ominaisuuksien käyttöä taulukoissa.
    2. ./Models/Model25a.html[S][Pw] - toinen malli, joka demonstroi border-collapse, border ja background ominaisuuksien käyttöä taulukoissa.
    3. ./Models/Model25b.html[S][Pw] - demonstroi caption-side, border, background ja joidenkin muidenkin ominaisuuksien käyttöä taulukoissa.
    4. ../HTMLKit/Attributes2.php3[S] - esimerkki raskaasta taulukosta, joka käyttää table-layout:fixed taulukonluontimallia.
  11. Mikä on CSS2:n Visuaalinen muotoilumalli (+ seuraavat: 5., 37., 42., 49.)
    1. ./Models/Model26.html[S][Pw] - malli float-ominaisuuden käyttämisestä.
    2. ./Models/Model27.html[S][Pw] - toinen malli float-ominaisuuden käyttämisestä.
    3. ../Tests/ElementitTestFloat.html[S] - englanninkielinen esimerkkisivu float-ominaisuuden käyttämisestä. Jos sinulla on Opera 4.x+, kokoruutunäyttö antaa antaa esimerkin "diaesityksestä" (vaihda "dioja" PageUp/PageDown näppäimillä).
    4. ./Models/Model28.html[S][Pw] - malli position:absolute käyttämisestä.
    5. ./Models/Model29.html[S][Pw] - malli display-ominaisuuden käyttämisestä vaihtoehtona visibility-ominaisuuden käyttämiselle. Sivulla käytetään dynaamisia näennäisluokkia, jolloin testi koskee myös sivua 7, Miten CSS liitetään ankkureille ja linkeille.
    6. ./Models/Model30.html[S][Pw] - malli visibility-ominaisuuden käyttämisestä vaihtoehtona display-ominaisuuden käyttämiselle. Sivulla käytetään dynaamisia näennäisluokkia, jolloin testi koskee myös sivua 7, Miten CSS liitetään ankkureille ja linkeille.
    7. ./Models/Model30b.html[S][Pw] - malli display:none käyttämisestä elementtien piilottamiseen.
    8. ./Models/Model31.html[S][Pw] - malli position:fixed käyttämisestä.
    9. ./Models/Model31b.html[S][Pw] - toinen malli position:fixed käyttämisestä.
    10. ../Tests/BasicLayout.html[S] - malli position:fixed ja margin:auto käytöstä. Minulla on niistä kuvakaappauksia:
    11. ../Nt/ongelmia-us.xml[S][Pw] - esimerkki XML + CSS -käytöstä, joka testaa erityisesti joka käyttää display-ominaisuutta. Sille on myös muutama vertailusivu ja kuvakaappaus:
    12. ../Tests/Model25b.xml[S] - toinen XML-esimerkki, joka käyttää display-ominaisuutta.

Oppaan lisäsivut

Muita sivuja

[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