4.4. Ülevaade CSS-definitsioonidest

See peatükk annab lühiülevaate erinevatest CSS-i võimalustest. Kaetud on CSS1 standard ning suur osa CSS2-standardist - mõned väga spetsiifilised ja suuremaid teadmisi nõudvad CSS2 võimalused on ülevaatlikkuse huvides välja jäetud.

Tausta defineerimiseks on järgmised võimalused:

background-attachment - määrab, kas taust on "kinni kleebitud" või liigub lehekülje kerimisel kaasa. Väärtused:

• fixed - ei liigu
• scroll - liigub

Näide:

body
{
background-image: url(stars.gif);
background-attachment: scroll
}

background-image - taustapilt. Väärtused:

• url(pildifaili nimi) - viide pildile
• none - taustapilt puudub (muidugi võib ka kogu parameetri ära jätta)

Näide:

body
{
background-image: url(taust.gif);
background-color: #000000
}

background-position - taustapildi asendi valik (vertikaal- ja horisontaalpositsioon). Väärtused:

• top left - ülal vasakul
• top center - ülal keskel
• top right - ülal paremal
• center left - keskel vasakul
• center center - lehe keskel
• center right - keskel paremal
• bottom left - all vasakul
• bottom center - all keskel
• bottom right - all paremal

NB! Võib kasutada ka üht väärtust - sel juhul võetakse teiseks vaikimisi center.

Lisaks saab veel kasutada kaht teistsugust väärtust, mida on lubatud kasutada ka läbisegi :

• x-% y-% - suhtelise asukoha määramine ekraanil. Vasak ülanurk on 0,0 , parem alanurk 100,100. Puuduv väärtus asendatakse vaikimisi 50-ga (keskel).
• x-pos y-pos - asukoht ekraanil (mistahes lubatud ühikutes; vt. 4.3). Nullpunkt on vasakus ülanurgas, puuduv väärtus asendatakse 50%-ga.

Näide:

body
{
background-image: url(taust.gif);
background-position: top left
}
body
{
background-image: url(taust.gif);
background-position: 0% 0%
}

background-repeat - määrab, kas taustapilti korratakse või mitte. Väärtused:

• repeat - pilti korratakse nii horisontaal- kui vertikaalsuunas
• repeat-x - pilti korratakse horisontaalsuunas
• repeat-y - pilti korratakse vertikaalsuunas
• no-repeat - pilti ei korrata

Näide:

body
{
background-image: url(taust.gif);
background-repeat: no-repeat;
}

background - lühidefinitsioon kõigi taustaparameetrite koos defineerimiseks.

Näide:

body
{
background: #00ffcc url(taust.gif) no-repeat fixed top left
}

2003-2024 Kaido Kikkas.
Käesoleva dokumendi paljundamine, edasiandmine ja/või muutmine on
sätestatud GNU Vaba Dokumentatsiooni Litsentsiga (versioon 1.2 või uuem).
Litsentsi ingliskeelne täistekst