Menthal27

CSS: Muut muotoilut

Leikkaus (clip)

Tämä muotoilu ei toimi IE 6:lla tai IE 7:llä, mutta kylläkin FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Clip-muotoilulla voidaan rajata alue, joka halutusta elementistä näkyy. Rajattavan elementin paikan täytyy olla määritetty absolute position-muotoilulla.

Arvot
rect(arvo1,arvo2,arvo3,arvo4) Rajaa halutun alueen. Arvo1 kertoo rajatun alueen etäisyyden elementin yläreunasta, arvo2 oikealta, arvo3 alareunasta ja arvo4 vasemmalta. Arvojen perään lisätään aina myös sopiva mittayksikkö.

Esimerkiksi:

clip:rect(5px,4px,1em,15%);

Elementin näyttötapa (display)

Tämä muotoilu toimii osittain IE 6:lla, IE 7:llä ja FF 2:lla ja kokonaan Opera 9:llä sekä Safari 3:lla.

Display-muotoilu määrittää, miten elementti näytetään.

Arvot
* Muotoilu ei toimi IE 6:lla ja 7:llä. / ** Muotoilu ei toimi IE 6:lla ja 7:llä eikä Firefox 2:lla.
block Elementti näytetään lohkotason elementtinä.
inline-block ** Elementti näytetään lohkotason elementtinä, mutta sitä ennen ja sen jälkeen ei tule rivinvaihtoja. (Pelkällä arvolla block tulee.)
inherit Elementin näyttötapa periytyy ylemmiltä elementiltä.
inline Elementti näytetään tekstitason elementtinä.
list-item Elementti näytetään listaelementtinä.
none Elementtiä ei näytetä.
run-in ** Elementti perii näyttötapansa ylemmältä elementiltä siten, että esimerkiksi lohkotason elementin sisällä oleva tekstitason elementti muuttuu äitielementtinsä tapaan lohkotason elementiksi.
table * Elementti näytetään kuten taulukko.
inline-table ** Elementti näytetään kuten taulukko, mutta sitä ennen ja sen jälkeen ei tule rivinvaihtoja. (Pelkällä arvolla table tulee.)
table-caption * Elementti käyttäytyy kuten taulukon caption-elementti.
table-cell * Elementti käyttäytyy kuten taulukon solu.
table-column * Elementti käyttäytyy kuten taulukon col-elementti.
table-column-group * Elementti käyttäytyy kuten taulukon colgroup-elementti.
table-footer-group * Elementti käyttäytyy kuten taulukon alatunniste.
table-header-group * Elementti käyttäytyy kuten taulukon ylätunniste.
table-row * Elementti käyttäytyy kuten taulukon rivi.
table-row-group * Elementti käyttäytyy kuten taulukon tbody-elementti.

Taulukoihin liittyvien muotoilujen avulla on mahdollista rakentaa taulukkomaisia rakenteita esimerkiksi divejä käyttäen.

Esimerkiksi:

display:none;

Kursorit (cursor)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Cursor-muotoilulla voidaan muuttaa käytettävää kursoria eli kuvaa, joka osoittaa hiiren paikan näytöllä. Eri käyttöjärjestelmissä ja selaimissa käytetyt kursorit voivat hieman poiketa toisistaan.

Arvot
default Käytetään oletuskursoria.
auto Selain asettaa kursorin.
crosshair Kursorina on risti.
pointer Kursorina on käsi.
move Kursorina nuolet pääilmansuuntiin.
text Tekstikursori.
wait Kursorina tiimalasi.
help Kursorina kysymysmerkki.
progress Kursorina latausta merkitsevä symboli.
e-resize Kursorina nuoli oikealle.
n-resize Kursorina nuoli ylös.
w-resize Kursorina nuoli vasemmalle.
s-resize Kursorina nuoli alas.
ne-resize Kursorina nuoli koilliseen.
nw-resize Kursorina nuoli luoteeseen.
se-resize Kursorina nuoli kaakkoon.
sw-resize Kursorina nuoli lounaaseen.
url(osoite) Itse määritetty kursori.
inherit Muotoilu peritään ylemmältä elementiltä.

Esimerkiksi:

cursor:pointer;

Kelluminen (float ja clear)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Hymy

Float-muotoilun avulla haluttu elementti voidaan saada “kellumaan”. Tällöin kelluvan elementin jälkeen tuleva sisältö ei rivitykään kelluvan elementin alle vaan sen vierelle (ks. kuva vasemmalla).

Arvot
left Elementti kelluu vasemmalla.
right Elementti kelluu oikealla.
none Elementti ei kellu.
inherit Muotoilu peritään ylemmältä elementiltä.

Esimerkiksi:

float:left;

Aina kelluminen ei kuitenkaan ole suotavaa. Clear-muotoilun avulla voidaan määrittää, saako halutun elementin vierellä olla kelluvia elementtejä vai ei. Jos kelluvia elementtejä ei sallita, clear-muotoilun alaisena oleva elementti sijoittuu sivulla kelluvan elementin alapuolelle.

Arvot
left Kelluvia elementtejä ei sallita muotoiltavan elementin vasemmalla puolella.
right Kelluvia elementtejä ei sallita muotoiltavan elementin oikealla puolella.
both Kelluvia elementtejä ei sallita muotoiltavan elementin kummallakaan puolella.
none Kelluvat elementit sallitaan muotoiltavan elementin molemmilla puolilla.
inherit Muotoilu periytyy ylemmältä elementiltä.

Esimerkiksi:

clear:both;

Korkeus ja leveys (height ja width)

Tämä muotoilu toimii osittain IE 6:lla ja kokonaan IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Elementin korkeus määritetään muotoilulla height ja leveys muotoilulla width. Molempia ei ole pakko ilmoittaa yhtä aikaa.

Internet Explorer 6 tulkkaa leveyttä ja korkeutta väärin välistysten yhteydessä.

Arvot
auto Elementin leveys/korkeus riippuu sen ominaisuuksista. Oletusarvo.
numero ja mittayksikkö Elementin leveys/korkeus ilmoitettuna numeroiden ja sopivan mittayksikön avulla, esimerkiksi 90px tai 25%.
inherit Muotoilu peritään ylemmiltä elementeiltä.

Esimerkiksi:

height:12em;
width:700px;

Maksimikorkeus ja -leveys (max-height ja max-width)

Tämä muotoilu ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Maksimikorkeus (max-height) ja -leveys (max-width) ilmoittavat, kuinka korkea tai leveä elementti saa korkeintaan olla. Molempia ei tarvitse ilmoittaa yhtäaikaisesti.

Arvot
auto Elementin leveys/korkeus riippuu sen ominaisuuksista. Oletusarvo.
numero ja mittayksikkö Elementin leveys/korkeus ilmoitettuna numeroiden ja sopivan mittayksikön avulla, esimerkiksi 90px tai 25%.
inherit Muotoilu peritään ylemmiltä elementeiltä.

Esimerkiksi:

max-width:70%;

Minimikorkeus ja -leveys (min-height ja min-width)

Tämä muotoilu ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Minimikorkeus ja -leveys ilmoittamat, kuinka korkea tai leveä elementin on vähintään oltava. Molempia ei tarvitse ilmoittaa yhtäaikaisesti.

Arvot
auto Elementin leveys/korkeus riippuu sen ominaisuuksista. Oletusarvo.
numero ja mittayksikkö Elementin leveys/korkeus ilmoitettuna numeroiden ja sopivan mittayksikön avulla, esimerkiksi 90px tai 25%.
inherit Muotoilu peritään ylemmiltä elementeiltä.

Esimerkiksi:

min-height:400px;

Välistykset (margin ja padding)

Tämä muotoilu toimii osittain IE 6:lla ja kokonaan IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Margin ja padding

Margin ja padding ovat muotoiluja, joiden avulla elementin sisälle ja sen ulkopuolelle saadaan haluttu määrä tyhjää tilaa eli marginaalia. Margin määrittää halutun tilan elementin ulkopuolella ja padding sen sisällä.

Marginilla on joitain poikkeuksellisia ominaisuuksia, jotka saattavat aiheuttaa päänvaivaa niitä tuntemattomalle. Ensinnäkin, mikäli elementin padding on määritetty nollaksi ja sen sisälle laitetaan toinen elementti, jolla on marginia, sisällä olevan elementin margin vuotaa ulos. Tämän saa korjattua esimerkiksi määrittämällä ulommalle elementille reunukset tai pikselin verran paddingia.

Toisekseen, mikäli kaksi elementtiä on vierekkäin ja molemmilla on sivuillaan marginia, elementtien välinen etäisyys ei ole marginien summa vaan niistä suurempi. Jos siis esimerkiksi elementillä A on oikealla marginia 10 pikseliä ja sen oikealla puolella olevalla elementillä B vasemmalla 15 pikseliä, elementtien välinen etäisyys on 15 pikseliä, koska se on suurempi.

Erilaisia margin- ja paddingmuotoiluja on viisi:

  • margin ja padding määrittävät välistykset kaikille neljälle sivulle. Jokaiselle sivulle voi määrittää oman välistyksensä kirjoittamalla useita arvoja peräkkäin. Ensimmäinen arvo kertoo yläreunan, toinen oikean reunan, kolmas alareunan ja neljäs vasemman reunan välistyksen. Mikäli ilmoitetaan kaksi arvoa, ensimmäinen kertoo ylä- ja alareunuksen ja toinen oikean ja vasemman sivun muotoilut. Mikäli ilmoitetaan vain yksi arvo, kaikki neljä sivua saavat saman välistyksen.
  • margin-top ja padding-top määrittävät välistykset elementin yläsivulle.
  • margin-right ja padding-right määrittävät välistykset elementin oikealle sivulle.
  • margin-bottom ja padding-bottom määrittävät välistykset elementin alasivulle.
  • margin-left ja padding-left määrittävät välistykset elementin vasemmalle sivulle.

Internet Explorer 6 tulkkaa välistysmuotoiluja väärin korkeuden ja leveyden kanssa käytettynä.

Arvot
numero ja mittayksikkö Määrittää välistyksen ilmaistun mitan levyiseksi, esimerkiksi 3cm tai 20px.
inherit Muotoilu peritään ylemmiltä elementeiltä.

Esimerkkejä

Alla on määritelty elementin paddingiksi ylös 1 cm, oikealle 20 px, alhaalle 0.5 em ja vasemmalle 10 px.

padding:1cm 20px .5em 10px;

Alla on määritelty kaikille elementin neljälle sivulle marginiksi 1 em:

margin:1em;

Alla on määritelty kappalejaolle ylös ja alas paddingiksi 0.75em ja sivuille 0 (ei mitään). Margin on kaikilla neljällä sivulla 4px.

p {
   padding:0.75em 0;
   margin:4px;
}

Vierityspalkki, sen näkyminen ja poistaminen (overflow)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Overflow-muotoilulla vaikutetaan elementtien vierityspalkkien näkyvyyteen ja toiminnallisuuteen. Jotta overflow-muotoilu toimisi, sitä käyttäville elementeille on määritettävä myös korkeus ja/tai leveys.

Arvot
auto Vierityspalkki näkyy tarpeen mukaan (mikäli sisältöä on tarpeeksi).
hidden Vierityspalkkia ei käytetä. Ylimääräinen sisältö leikkautuu vierityspalkin puuttuessa pois näkyvistä.
inherit Muotoilu peritään ylemmiltä elementeiltä.
scroll Vierityspalkki näkyy aina.
visible Vierityspalkkia ei käytetä. Ylimääräinen sisältö vuotaa elementin reunojen yli.

Esimerkiksi:

overflow:auto;

Paikkamääritykset (position, left, top, right ja bottom)

Tämä muotoilu toimii osittain IE 6:lla ja kokonaan IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Position-muotoilun avulla voidaan määrittää elementtien paikkoihin liittyviä seikkoja. Position ilmaisee paikanmäärityksen tavan ja muotoilut left, top, right ja bottom itse elementin sijainnin.

Position-muotoilun arvot
* Muotoilu ei toimi IE 6:lla.
absolute Elementin paikka määritetään ruudun reunoista. Mikäli position-muotoilun yhteydessä ei määritetä left-, top-, right- tai bottom-muotoilua, absolute-arvon saanut elementti näkyy ensimmäisen ylemmän lohkotason elementin vasemmassa yläreunassa.
fixed * Käyttäytyy muuten samoin kuin absolute, mutta kiinnittää elementin ruutuun. Elementti pysyy siis koko ajan näkyvissä, vaikka sivua vieritettäisiinkin alas tai sivulle.
inherit Muotoilu periytyy ylemmiltä elementeiltä.
relative Määrittää elementin paikan suhteellisesti. Left-, top-, right- ja bottom-muotoilut ilmaisevat, kuinka paljon elementti siirtyy alkuperäiseltä paikaltaan sivulla. Mikäli left-, top-, right- tai bottom-määrittelyä ei anneta, elementti jää alkuperäiselle paikalleen sivulle.
static Oletusarvo, joka on käytössä, mikäli position-muotoilua ei ole määritetty. Elementin paikka määrittyy muiden muotoilujen ja lähdekoodin johdosta.

Left määrittää sijaintia vasemmalta, top ylhäältä, right oikealta ja bottom alhaalta.

Left-, top-, right- ja bottom-muotoilujen arvot
auto Jättää elementin oletuspaikalleen. Käytössä oletuksena positionin static-arvon kanssa.
numero ja mittayksikkö Ilmaisee elementin paikkaa tietyn mittayksikön avulla, esimerkiksi 50% tai 20px. Myös negatiiviset arvot ovat sallittuja.
inherit Muotoilu periytyy ylemmiltä elementeiltä.

Esimerkiksi:

div {
   position:relative;
   left:2em;
   top:-8em;
}

Tai:

span {
   position:fixed;
   right:40px;
}

Elementin näkyminen (visibility)

Tämä muotoilu toimii osittain IE 6:lla ja IE 7:llä ja kokonaan FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Arvot
* Muotoilu ei toimi IE 6:lla ja 7:llä.
collapse * Taulukon soluun käytettynä piilottaa kyseisen solun. Muihin elementteihin käytettynä vastaa arvoa hidden.
hidden Elementtiä ei näytetä, mutta sen käyttämä tila jää sivulle tyhjänä kohtana. Jos elementin haluaa piiloon siten, ettei sen käyttämää tilaa näytetä, kannattaa käyttää display-muotoilun arvoa none.
inherit Muotoilu peritään ylemmiltä elementeiltä.
visible Elementti näytetään normaalisti.

Esimerkiksi:

h1 {
   visibility:hidden;
}

Tekstin lukusuunta (direction)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Direction-muotoilun avulla elementin tai sivun lukusuuntaa voidaan vaihtaa. Näin voidaan esittää kieliä, joita luetaan oikealta vasemmalle, esimerkiksi arabiaa.

Arvot
inherit Muotoilu peritään ylemmiltä elementeiltä.
ltr Elementin sisältöä luetaan vasemmalta oikealle.
rtl Elementin sisältöä luetaan oikealta vasemmalle.

Esimerkiksi:

direction:rtl;

Kaksisuuntaisen tekstin tuki (unicode-bidi)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Tämä muotoilu on tarkoitettu käytettäväksi yhdessä lukusuuntaan vaikuttavan muotoilun (direction) kanssa.

Unicode-bidi on muotoilu, jota käytetään silloin, kun samalla sivulla käytetään kahta eri suuntaan kirjoitettavaa kieltä, esimerkiksi arabiaa ja suomea.

Arvot
bidi-override Vaihtaa kirjainten järjestyksen päinvastaiseksi. Esimerkiksi sana “mansikka” näkyy muodossa “akkisnam”.
embed Noudattaa direction-muotoilun lukusuuntaa, mutta jos samalla rivillä on toiseen suuntaan kulkevaa tekstiä, sijainti on rtl-muotoilussa oikealla ja ltr-muotoilussa vasemmalla.
inherit Muotoilu periytyy ylemmältä elementiltä.
normal Noudattaa direction-muotoilun suuntaa.

Tekstin rivityksen ja välilyöntien näyttäminen (white-space)

Tämä muotoilu toimii osittain IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

White-space-muotoilulla voidaan määrittää, miten tekstin välilyöntejä tulkitaan ja miten se rivitetään.

Arvot
* Kaikki testatut selaimet näyttivät muotoilun eri tavalla.
inherit Muotoilu peritään ylemmältä elementiltä.
normal Teksti rivittyy tarpeen mukaan välilyöntien kohdalta. Ylimääräisiä välilyöntejä ei näytetä. (Oletusarvo.)
nowrap Teksti rivittyy vain rivinvaihtokoodin avulla, ei välilyöntien tai lähdekoodin rivinvaihtojen kohdalta. Ylimääräisiä välilyöntejä ei näytetä.
pre Teksti rivittyy, kun lähdekoodissa vaihdetaan riviä (br-elementtiä ei tarvita). Teksti ei rivity välilyöntien kohdalta. Ylimääräiset välilyönnit näytetään.
pre-line * Teksti rivittyy tarpeen mukaan rivinvaihtojen (sekä rivinvaihtokoodin että lähdekoodissa näkyvän rivinvaihdon) kohdalta sekä tarvittaessa välilyöntien kohdalta. Ylimääräisiä välilyöntejä ei näytetä.
pre-wrap * Teksti rivittyy tarpeen mukaan rivinvaihtojen (sekä rivinvaihtokoodin että lähdekoodissa näkyvän rivinvaihdon) kohdalta sekä tarvittaessa välilyöntien kohdalta. Ylimääräiset välilyönnit näytetään.

Esimerkki

Alla on pieni pätkä lähdekoodia ja sen alla sama pätkä yllämainittujen muotoilujen alaisena.

Lähdekoodi:

Norsut ovat hyvin    sosiaalisia eläimiä. Ne elävät
suurissa  laumoissa
Intiassa           ja        Afrikassa.

Muotoilulla white-space:normal:

Norsut ovat hyvin sosiaalisia eläimiä. Ne elävät
suurissa  laumoissa
Intiassa           ja        Afrikassa.

Muotoilulla white-space:nowrap:

Norsut ovat hyvin sosiaalisia eläimiä. Ne elävät
suurissa  laumoissa
Intiassa           ja        Afrikassa.

Muotoilulla white-space:pre:

Norsut ovat hyvin sosiaalisia eläimiä. Ne elävät
suurissa  laumoissa
Intiassa           ja        Afrikassa.

Muotoilulla white-space:pre-line:

Norsut ovat hyvin sosiaalisia eläimiä. Ne elävät
suurissa  laumoissa
Intiassa           ja        Afrikassa.

Muotoilulla white-space:pre-wrap:

Norsut ovat hyvin sosiaalisia eläimiä. Ne elävät
suurissa  laumoissa
Intiassa           ja        Afrikassa.

Elementtien järjestys (z-index)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Z-indexillä on mahdollista määritellä position-muotoilun alaisten elementtien keskinäistä järjestystä. Jos esimerkiksi sivulla x on kaksi diviä, jotka ovat ilman z-index -muotoiluja hieman toistensa päällä (div b on divin a päällä), z-indexin avulla niiden keskinäistä järjestystä voidaan muuttaa siten, että se div, joka lähdekoodin perusteella olisi divin b alla, onkin nyt sen päällä.

Static-tyypin elementtejä ei voi järjestellä z-indexin avulla. Toisaalta absolute-, fixed- ja relative-tyyppiset elementit ovat automaattisesti static-tyypin elementtien päällä ilman z-indexiäkin.

Z-indexin arvo täytyy antaa kaikille järjestettäville elementeille.

Arvot
auto Oletusarvo. Elementin z-index-arvo on sama kuin sen äitielementin.
inherit Muotoilu peritään ylemmältä elementiltä.
numero Kokonaisluku. Mitä pienempi numero, sitä alempana muotoiltava elementti on.

Esimerkiksi:

div {
   z-index:7;
   position:relative;
   top:2em;
}
  

Menthal27 © Sonja Valkeinen 2002-2011.Nyytti. Takaisin sivun alkuun.