CSS2:n hyödyllisiä ominaisuuksia - Luento 9

• tietoverkot0901.ogg 2.4M
• tietoverkot0902.ogg 2.5M
• tietoverkot0903.ogg 2.6M
• tietoverkot0904.ogg 2.5M
• tietoverkot0905.ogg 2.5M
• tietoverkot0906.ogg 876k

Seuraavassa käydään läpi erilaisia CSS2:stä löytyviä ominaisuuksia, joita kurssin aiemmilla luennoilla ei ole käsitelty. Luennon esimerkkejä kannattaa katsoa sekä Mozillalla (1.1) että Operalla (6.05), koska kaikki esimerkit eivät toimi kummallakin selaimella. Monet esimerkit eivät kunnolla Internet Explorerilla kanssa!

Valitsimet ja näennäisluokat

Seuraavassa on esitelty lyhyeiden esimerkkien avulla erilaisia CSS2:n valitsimia (engl. selectors) ja näennäisluokkia (engl. pseudo). Valitsimien (engl. selector) avulla voidaan viitata xhtml-dokumentissa käytettyihin rakenteisiin määrityksiin, joten ne toimivat eräällä tavalla tyylin niminä.

Yleisiä sääntöjä

• *-merkillä voidaan viitata useaan elementtiin.
• p-viittaa jokaiseen xhtml-tiedoston p-elementtiin.
• h1, h2, h3-antaa samat ominaisuudet pilkulla erotelluille tyyleille.
• div p-viittaa jokaiseen p-elementtiin, joka löytyy jostakin kohti div-elementin sisältä.
• div> p-viittaa välittömästi div-elementin sisällä olevaan p-elementtiin.
• div + p-viittaa välittömästi div-elementin jälkeen tulevaan p-elementtiin.
• h2[title]-viittaa h2-elementtiin, jolla on title-attribuutti.
• h1#etusivu-viittaa h1-elementtiin, jonka id-attribuutin arvo on etusivu.
• Esimerkkejä valitsimien käytöstä.

Linkin näennäisluokat

• a:link-viittaa vierailemattomaan linkkiin.
• a:visited-viittaa vierailtuun linkkiin.
• a:focus-viittaa fokusoituun linkkiin, joka aktivoidaan esimerkiksi TAB-näppäintä käyttämällä. Linkkiä ei siis välttämättä ole aktivoitu.
• a:hover-viittaa linkkiin, jota osoitetaan osoitinlaitteella, kuten hiirellä.
• a:active-viittaa linkkiin, jota painetaan esimerkiksi hiirellä.
• Esimerkkejä näennäisluokkien käytöstä.

Muut näennäisluokat

• p:lang(fr)-viittaa p-elementtiin, jonka kieli on Ranska.
• ul li:first-child-viittaa ul-elementin sisällä sijaitsevan li-elementin ensimmäiseen esiintymään.
• p:first-line-viittaa p-elementin ensimmäiseen riviin.
• p:first-letter-viittaa p-elementin ensimmäiseen kappaleeseen.
• p.huomio:before-lisää p-elementin huomio-aliluokkakappaleen etupuolelle halutun asian.
• p.huomio:after-lisää p-elementin huomio-aliluokkakappaleen jälkeen halutun asian.
• Esimerkkejä näennäisluokkien käytöstä.

Mediatyypit

• Mediatyyppien tarkoituksena on mahdollistaa sivun sisällön määritteleminen erillaisia sivun käyttömedioita varten.
• Esimerkiksi WWW-dokumentti voidaan muotoilla erilaisilla mediatyypeillä eri tavalla paperille kuin näytölle.
• Hyötynä tästä saavutetaan, että jokaista mediaa varten voidaan tehdä omat tyylimääritykset, jotka mahdollistavat tiedon tehokkaan saamisen useamman median kautta.

Erilaiset mediatyypit

• all-tyyppiin voidaan määritellä asetuksia kaikille laitteille.
• aural-tyyppiin voidaan määritellä asetuksia puhesyntetisaattoreita varten.
• braille-tyyppiin voidaan määritellä asetuksia esimerkiksi pistekirjoitusnäyttöä varten.
• embossed-tyyppiin voidaan määritellä asetuksia brailletulostimia varten.
• handheld-tyyppiin voidaan määritellä pieninäyttöisille laitteille.
• print-tyyppiin voidaan määritellä esimerkiksi paperille tulostettavaksi tarkoitettuja asetuksia.
• projection-tyyppiin voidaan määritellä asetukset projektoreita varten.
• screen-tyyppiin voidaan määritellä tietokonenäytöllä käytettäviä asetuksia.
• tty-tyyppiin voidaan määritellä tasalevyistä kirjasinta käyttäviin laitteisiin.
• tv-tyyppiin voidaan määritellä asetuksia televisiotyyppisille laitteille.

Esimerkkejä mediatyyppien käytöstä

• Kurssin kotisivuja tulostettaessa jätetään tulosteista pois navigointipalkit sekä pyritään välttämään sivunvaihtoa asiakirjan eri rakenteissa. Tämä on toteutettu seuraavilla CSS-määrittelyillä.

  @media print {
   H1, H2, H3, H4, H5, H6 { 
    page-break-after: avoid;
    page-break-inside: avoid; 
   }
   BLOCKQUOTE, PRE { 
    page-break-inside: avoid; 
   }
   UL, OL, DL { 
    page-break-before: avoid; 
   }
   .navbar, .navbartop, .navbarbottom {
  	display: none;
   }
  }
  

• Toinen esimerkki mediatyyppien käytöstä löytyy WWW-sivujen näyttämisestä esityksenomaisesti. Esimerkiksi tämä sivu näkyy Opera-selaimella diaesityksenä, kun sitä katsotaan kokoruututilassa.

  @media projection {
   body {
  	 margin-top: 1em;
  	 margin-left: 1em;
  	 margin-right: 1em;
  	 font-size: 200%;
   }
   h1,h2,h3,h4 {
  	 page-break-before: always;
   }
   .navbartop, .navbarbottom, .author {
  	 display: none;
   }
  }
  

• Tarkempi esimerkki aural-mediatyypin määrittelyistä : aural.css.

Visuaalinen muotoilu ja asemointi

CSS2 antaa erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Esimerkiksi CSS-asemoinnin avulla voidaan tehdä kehysrakennetta vastaavia sivuja ilman kehyksiä. Seuraavaan on koottu lyhyeksi listaksi erilaisia asioita, joita kannattaa miettiä jo sivun suunnitteluvaiheessa, jotta vältyttäisiin ylimääräisiltä ongelmilta sivun toteutusvaiheessa.

• Mieti erilaisten sivun elementtien (navigointi, koristeet, sisältö) paikat tarkkaan.
• Jaa sivun rakenne loogisiin lohkoihin. Lohkorakenne voi olla esimerkiksi seuraava:
  • Yläreunassa on lohko perusnavigoinnille ja ylätunnistetiedoille.
  • Sivun alaosa muodostuu kahdesta lohkosta.
    • Vasemmassa reunassa on tarkempi linkkilista asiakirjan sisältöön.
    • Oikeassa reunassa on sivun varsinainen sisältö.
• Jokainen edellisistä lohkoista kannattaa merkitä omaksi lohkokseen div-elementillä. Tällöin lohkon käsittely on helpompaa.
• Jos jokin lohko halutaan asemoida absoluuttisesti, niin asemointi määritykset kannattaa tehdä kaikille lohkoille.

Sivun sisällön asetteluun voidaan käyttää seuraavia ominaisuuksia.

• float- ja clear-ominaisuudet, joilla voidaan liu'uttaa sivun osia oletuksesta poikkeavasti.
• position, top, bottom, right, left ja z-index-ominaisuudet.

Asemointiin liittyviä ominaisuuksia

position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Erilaisia arvoja ovat seuraavat:

• static-määrittää sijoittumisen normaaliksi elementin normaaliin paikkaan nähden.
• relative-määrittää sijoittumisen suhteelliseksi elementin normaaliin paikkaan nähden.
• absolute-määrittää sijoittumisen absoluuttisesti sivulle. Sijoittuminen lasketaan sen asemoidun lohkon paikan suhteen, jossa lohko sijaitsee.
• fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä. Muutoin sijoittuminen on sama kuin absolute määrityksellä. fixed-kiinnitetty elementti voi toimia esimerkiksi tulostettavien sivujen ylä- tai alatunnistetietoina.
• inherit-määrittää elementin sijoittumisen periytyväksi.

Positioinnin yhteydessä määritellään usein myös seuraavat ominaisuudet:

• top-ominaisuudella voidaan määritellä elementin etäisyys yläreunasta.
• bottom-ominaisuudella voidaan määritellä elementin etäisyys alareunasta.
• left-ominaisuudella voidaan määritellä elementin etäisyys vasemmasta reunasta.
• right-ominaisuudella voidaan määritellä elementin etäisyys oikeasta reunasta.
• z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.

Seuraavassa muutamia esimerkkejä asemoinnista

• Erilaisia asemointeja
  • asemointi.html - lähdekoodi
  • asemointi.css - lähdekoodi
• Suhteellinen (engl. relative) asemointi, jossa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa.

  .up {
  	position: relative;
  	top: -1em;
    }
    

  • relative.htm-lähdekoodi
  • relative.css-lähdekoodi
• Absoluuttinen (engl. absolute) asemointi, jossa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
  Asemoitu elementti vierii dokumentin sisällön mukana.

  .vasenylanurkka {
  	position: absolute;
  	top: 10%;
  	left: 10%;
  	width: 30%;
  	height: 10%;
    }
  

  Vierivä kehyksien korvike

  • abs.htm - lähdekoodi
  • abs.css - lähdekoodi
• Kiinnitetty (engl. fixed) asemointi, jossa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
  Asemoitu elementti EI vieri dokumentin sisällön mukana.

  .vasenylanurkka {
  	position: fixed;
  	top: 10%;
  	left: 10%;
  	width: 30%;
  	height: 10%;
    }
  	

  Kiinteä kehyksien korvike

  • navbar.htm - lähdekoodi
  • navbar.css - lähdekoodi
• z-index ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.
  • z-level.htm - lähdekoodi
  • z.css - lähdekoodi
• Kikkailua asemoinnilla, z-indexillä ja hoverilla. (Toimii oikein Mozilla 1.1:ssä)
  • palikat.html - lähdekoodi
  • palikat.css - lähdekoodi

Muutamia float- ja clear- ominaisuuteen liittyviä esimerkkejä

• Elementtejä rinnakkain
  • float.htm
  • float.css
• Rinnakkaisuuden esto
  • float2.htm
  • float.css
• Sarakejako
  • columns.htm
  • columns.css
• Lomake
  • form.htm
  • form.css
    

Ylivuoto, leikkaus ja näkyvyys -ominaisuudet

• Ylivuoto eli overflow-ominaisuudella voidaan määritellä mitä pitää tehdä jos elementti ei mahdu sille annettuun tilaan. Elementin käyttäytymistä voidaan määritellä seuraavien arvojen avulla
  • visible-arvolla ylivuotava osuus näytetään.
  • hidden-arvolla ylivuotava osuus piilotetaan.
  • scroll-arvolla elementtiin voidaan määritellä vierityspalkki sisällön vieritykseen.
  • auto-arvolla elementtiin tehdään tarvittaessa vierityspalkki.
• Leikkaus eli clip-ominaisuudella voidaan rajoittaa elementistä näkyvää suorakaiteen muotoista aluetta.
• Näkyvyys eli visibility-ominaisuudella voidaan poistaa elementti näkyvistä, mutta kuitenkin pitää se sivulla eli näkymätön elementti vaikuttaa muiden sivun osien sijoitteluun.

Seuraavassa esimerkki ominaisuuksien käytöstä

• Esimerkki overlow-, clip-, ja visibility-ominaisuuksista (Mozilla 1.1)
  • overflow.html - lähdekoodi
  • overflow.css - lähdekoodi

display-ominaisuus

display-ominaisuudella voidaan muuttaa esimerkiksi tekstikappaleen näkymiseen liittyviä ominaisuuksia. Tekstikappaleesta voidaan tehdä visuaalisesti osa toista tekstikappaletta tai sen näkyminen voidaan estää kokonaan. display-ominaisuudelle voidaan asettaa seuraavia arvoja.

• block-arvolla elementti käyttäytyy lohkotason elementin tavoin.
• inline-arvolla elementti käyttäytyy tekstitason (inline) elementin tavoin.
• list-item-arvolla elementti käyttäytyy lista-alkion tavoin.
• marker-arvolla elementti näytetään itsenäisenä elementtinä, joka voidaan sijoittaa ennen tai jälkeen muita elementtejä.
• none-arvolla elementin sisältöä ei näytetä ollenkaan ja elementti ei vaikuta mitenkään ympäröiviin elementteihin.
• run-in-arvolla elementti saadaan osaksi toista lohkotason elementtiä.
• compact-arvolla elementti saadaan samalle riville kappaletason elementin kanssa, jos vain tilaa riittää.

Seuraavassa esimerkki compact ja run-in ominaisuuden käytöstä.

• Esimerkki compactin ja run-inin käytöstä (Opera 6.05)
  • compact.html
  • compact.css

Erilaisia listanumerointityylejä

CSS2:sta löytyviä listatyylejä ovat:

• decimal (1, 2, 3, ...)
• decimal-leading-zero (01, 02, 03, ...)
• lower-roman (i, ii, iii, iv, v, ...)
• upper-roman (I, II, III, IV, V, ...)
• lower-latin (a, b , c, ...)
• upper-latin (A, B, C, ...)
• lower-greek (alpha, beta, gamma, ...)
• hebrew
• georgian
• armenian
• cjk-ideographic
• hiragana
• katakana
• hiragana-iroha
• katakana-iroha

Seuraavassa esimerkkejä listatyyleistä:

• Esimerkki uusista listatyyleistä (Mozilla 1.1)
  • listat.html
  • listat.css

Automaattinen numerointi

Automaattisen numeroinnin avulla voidaan listoille tai otsikoille määritellä automaattinen numerointi. Seuraavassa esimerkki automaattisen numeroinnin käytöstä.

• Esimerkki automaattisesta numeroinnista (Opera 5.05)
  • numerointi.html
  • numerointi .css
• Esimerkki generoidusta sisällöstä sekä automaattisesta numeroinnista (Opera 5.05)
  • content.html
  • content.css

Sivun ominaisuuksia

Sivun ominaisuuksilla voidaan hallita dokumenttia sivutettuna. Seuraavassa muutamia sivuttamisesta löytyviin ominaisuuksia.

• @page-määrityksen sisällä voidaan kertoa sivutukseen liittyviä ominaisuuksia, kuten esimerkiksi koko (size), marginaalit.
• Sivunvaihtoon liittyvät ominaisuudet
  • page-break-before-voidaan määritellä sivunvaihdon käyttäytyminen ennen kappaletta.
  • page-break-after-voidaan määritellä sivunvaihdon käyttäytyminen kappaleen jälkeen.
  • page-break-inside-voidaan määritellä sivunvaihdon käyttäytyminen lohkon sisällä.
  • Sivunvaihdon esiintyminen voidaan kieltää arvolla avoid ja sivunvaihto voidaan pakottaa arvolla always.
• Esimerkkinä sivun ominaisuuksien käytöstä löytyy mediatyyppien yhteydestä.

Käyttäjän omien värien ja kirjasimien käyttäminen

Voidaan käyttää sivulla suoraan käyttäjän käyttöympäristössä määriteltyjä värejä ja kirjasimia.

• Esimerkki järjestelmäväreistä ja -fonteista. (Opera)
  • system.html
  • system.css

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

• Esimerkki minimin ja maksimin määrittelystä. (Opera 6.05)
  • minmax.html
  • minmax.css

Muita mielenkiintoisia CSS2:n ominaisuuksia

• Tekstivarjot
• inherit-arvo kaikille ominaisuuksille
• Tuki kaksisuuntaiselle tekstille
• Kielikohtaiset lainausmerkit
• Laajennettu kirjasimien valinta
• Taulukoiden ominaisuudet
• Suhteellinen sijoittelu
• Absoluuttinen sijoittelu
• Kiinnitetty sijoittelu
• Tarkemmat tyylimääritykset
• Uusia näennäisluokkia (pseudo-classes)
• Kursorit
• Outlines

Hyödyllisiä linkkejä CSS-kikkoihin

• CSS/edge
• CSS Layout Techniques: for Fun and Profit
• The Layout Reservoir

CSS-bugeja

• CSS Bugs and Workarounds
• CSS Bugs and Implementation Problems, with Workarounds