Kurssitaulukko

CSS yleiskurssi

• CSS课外书
• CSS esittely
• CSS peruslauseke
• CSS edistyneet lausekkeet
• CSS johdannaisselaimet
• CSS id-valitsimet
• CSS luokitusvalitsimet
• CSS luominen
• CSS tausta
• CSS teksti
• CSS kirjasin
• CSS luettelo

CSS ruudukkomalli

• CSS kehysmalli yleiskatsaus
• CSS sisäpiirilevy
• CSS reunalevy
• CSS ulkonevy
• CSS ulkonevy-yhdistäminen

CSS sijoittaminen

• CSS sijoittelu yleiskatsaus
• CSS suhteellinen sijoittelu
• CSS absoluuttinen sijoittelu
• CSS kelluva

CSS valitsimet

• CSS elementti-valitsimet
• CSS valitsinryhmät
• CSS luokitusvalitsin yksityiskohtaisesti
• CSS id-valitsin yksityiskohtaisesti
• CSS ominaisuusvalitsin yksityiskohtaisesti
• CSS jälkeläisvalitsimet
• CSS lapsivalitsimet
• CSS peräisinvelji-valitsimet

Valinnaiset kurssit

Kurssisuositus:

• CodeW3C.comin kattava valikoima

CSS sallii puhtaiden värien ja taustakuvien käytön, myös erittäin monimutkaisten efektien luomiseen.

CSS kykyt ovat paljon HTML:ää laajemmat.

taustaväriä

Voin käyttää background-color ominaisuusAseta elementille taustaväri. Tämä ominaisuus hyväksyy kaikki sallitut värit.

Tämä sääntö asettaa elementin taustavärin harmaaksi:

p {background-color: gray;}

Jos haluat, että taustaväri ulottuu vähän ulospäin tekstin ympärillä olevasta elementistä, lisää vain hieman sisäpiirtymää:

p {background-color: gray; padding: 20px;}

Kokeile itse

Voin asettaa taustavärin kaikille elementeille, mukaan lukien body ja sisäpiirteet kuten em ja a.

background-color ei voi periä, sen oletusarvo on transparent. Transparent tarkoittaa 'läpinäkyvää'. Tämä tarkoittaa, että jos elementillä ei ole määriteltyä taustaväriä, sen tausta on läpinäkyvä, jotta sen esi-isäelementin tausta on näkyvissä.

taustakuvan

Kuvan sijoittaminen taustalle vaatii background-image-ominaisuus.background-image-ominaisuuden oletusarvo on none, mikä tarkoittaa, että taustalle ei ole asetettu minkäänlaista kuvaa.

Jos haluat asettaa taustakuvan, sinun on asetettava tälle ominaisuudelle URL-arvo:

body {background-image: url(/i/eg_bg_04.gif);}

Useimmat taustat sovelletaan body-elementtiin, mutta ei ainoastaan tähän.

Seuraavassa esimerkissä tausta sovelletaan vain yhdelle kappaleelle, ei muille osille dokumenttia:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Voit jopa asettaa taustakuvan sisennetyille elementeille, seuraava esimerkki asettaa taustakuvan linkille:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Kokeile itse

Teoreettisesti voit jopa asettaa kuvia textarealle ja select-yhdyskäytävälle, mutta ei kaikki käyttäjät agentit käsittele tätä tilannetta hyvin.

Lisäksi on lisättävä, että background-image ei voi periä. Itse asiassa kaikki taustan ominaisuudet eivät voi periä.

Taustan toisto

Jos haluat tasoittaa taustakuvaa sivulla, voit käyttää: background-repeat-ominaisuus.

Ominaisuuden arvo repeat johtaa kuvaan, joka täyttää sekä horisontaalisen että vertikaalisen suunnan, kuten taustakuvien yleinen tapa. repeat-x ja repeat-y johtavat kuvaan, joka toistuu vain horisontaalisessa tai vertikaalisessa suunnassa, kun taas no-repeat ei salli kuvan toistumista missään suunnassa.

Oletuksena taustakuva alkaa elementin vasemmalta ylältä. Katso seuraava esimerkki:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Kokeile itse

Taustan sijoittelu

Voit käyttää background-position-ominaisuusMuuta kuvan sijaintia taustassa.

Seuraavassa esimerkissä taustakuva asetetaan keskelle body-elementtiä:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

On olemassa monia tapoja antaa arvo background-position-ominaisuudelle. Ensin, voit käyttää joitakin avainsanoja: top, bottom, left, right ja center. Yleensä nämä avainsanat ilmestyvät parin muodossa, mutta ei aina. Voit myös käyttää pituusarvoja, kuten 100px tai 5cm, ja viimein voit käyttää prosenttialueita. Eri tyyppiset arvot vaikuttavat hieman taustakuvan sijoitteluun.

Avainsanat

Kuvan sijoitusavainsanat ovat helpoimmin ymmärrettäviä, ja niiden toiminta on samanlainen kuin nimensä viittaa.

Mukaisesti standardiin, sijaintiavainsanat voivat esiintyä millä tahansa järjestyksessä, kunhan niitä ei ole enempää kuin kaksi - yksi horisontaaliseen ja toinen vertikaaliseen suuntaan.

Jos esiintyy vain yksi avainsana, toinen avainsana katsotaan centeriksi.

Siis, jos haluat, että jokaisessa kappaleessa on kuva keskellä yläpuolella, voit lausua seuraavasti:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Seuraavat ovat vastaavat sijaintiavainsanat:

Prosenttiarvot

Prosenttiarvojen ilmentyminen on monimutkaisempaa. Oletetaan, että haluat keskittää kuvan elementissä prosenttiarvoilla, mikä on helppoa:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Tämä tarkoittaa, että kuva sijoittuu sopivasti, ja sen keskipiste on kohdistettu elementin keskipisteeseen.Toisin sanoen, prosenttiarvot sovelletaan sekä elementtiin että kuvaan.Tämä tarkoittaa, että kuvassa kuvatut 50% 50% -pisteet (keskipiste) ja elementissä kuvatut 50% 50% -pisteet (keskipiste) ovat kohdistettu.

Jos kuva sijaitsee 0% 0%, sen vasen yläkulma sijoittuu elementin sisäisen marginaalialueen vasemmassa yläkulmassa. Jos kuvan sijainti on 100% 100%, kuvan oikea alakulma sijoittuu oikean marginaalialueen oikeassa alakulmaan.

Siis, jos haluat sijoittaa kuvan horisontaalisesti 2/3:een ja vertikaalisesti 1/3:een, voit lausua seuraavasti:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Jos tarjotaan vain prosenttiarvo, annettu arvo käytetään horisontaaliseksi arvoksi, ja vertikaaliseksi arvoksi oletetaan 50%. Tämä on samanlaista avainsanojen kanssa.

Oletusarvo background-position:lle on 0% 0%， mikä toiminnallisesti vastaa top left:iä. Tämä selittää, miksi taustakuva leviää aina elementin sisäisen marginaalialueen vasemmassa yläkulmassa, ellei ole asetettu eri sijaintiarvoja.

Pituusarvot

Pituusarvot selittävät elementin sisäisen marginaalialueen ylävasemman kulman siirtymisen. Siirtymispiste on kuvan ylävasemman kulma.

Esimerkiksi, jos asetusarvo on 50px 100px, kuvan ylävasemman kulma sijaitsee elementin sisäisen marginaalialueen ylävasemmassa kulmassa oikealla 50 kuvapistettä ja alhaalla 100 kuvapistettä:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Huomaa, että tämä eroaa prosenttiparista, koska siirtymä tapahtuu vain yhdestä ylävasemmasta kulmasta toiseen. Tämä tarkoittaa, että kuvan ylävasemman kulma täsmälleen vastaa background-position lauseen määrittämää pistettä.

Taustan liittäminen

Jos dokumentti on pitkä, taustakuva liikkuu mukana, kun dokumentti luetaan alas. Kun dokumentti liikkuu yli kuvan sijainnin, kuva katoaa.

Voit background-attachment ominaisuusEstä tämä liikkuminen. Tämä ominaisuus mahdollistaa kuvan olevan kiinnitetty (fixed) suhteessa näyttöalueeseen, joten se ei liiku vieressä.

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Kokeile itse

Oletusarvo background-attachment -ominaisuudelle on scroll, mikä tarkoittaa, että oletuksena tausta liikkuu mukana dokumentin kanssa.

CSS taustan ominaisuudet

Työkalupakka

CSS viittausoppikirja

CSS esimerkit

CSS testit

CSS oppitunnit

Sponsorinvinkit