Site hosted by Angelfire.com: Build your free website today!

CSS Näited

CSS Taustad

 red_dot.gif Tausta värvi määramine
Selles näites demonstreeritakse, kuidas määrata elemendi tausta värvi.

 red_dot.gif Tausta pildi määramine
Selles näites demonstreeritakse, kuidas saab pilti kasutada taustaks.

 red_dot.gif Tausta pilt kordub
Selles näites demonstreeritakse, kuidas saab tausta pilti panna ennast kordama.

 red_dot.gif Tausta pilt kordub vertikaalselt
Selles näites demonstreeritakse, kuidas saab tausta pilti panna ennast kordama ainult vertikaalselt.

 red_dot.gif Tausta pilt kordub horisontaalselt
Selles näites demonstreeritakse, kuidas saab tausta pilti panna ennast kordama ainult horisontaalselt.

 red_dot.gif Tausta pilt ei kordu
Selles näites demonstreeritakse, kuidas tausta pilt ei korda ennast.

 red_dot.gif Tausta pildi paigutamine
Selles näites demonstreeritakse, kuidas tausta pilti paigutada.

 red_dot.gif Tausta pildi positsioneerimine-1
Selles näites demonstreeritakse, kuidas tausta pilti paigutada kasutdes protsente (%).

 red_dot.gif Tausta pildi positsioneerimine-2
Selles näites demonstreeritakse, kuidas tausta pilti paigutada kasutdes pikseleid (px).

 red_dot.gif Tausta pildi fikseerimine
Selles näites demonstreeritakse, kuidas tausta pilti fikseerida. Sellisel juhul veebilehe kerimisel, pilt kaasa ei liigu.

 red_dot.gif Tausta pildi omadused ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas tausta pildi omadused lühidalt fikseerida ühes deklaratsioonis.

CSS Tekst

 red_dot.gif Teksti värvi määramine
Selles näites demonstreeritakse, kuidas määrata teksti värvi.

 red_dot.gif Teksti taustavärvi määramine
Selles näites demonstreeritakse, kuidas määrata teksti taustavärvi.

 red_dot.gif Tähtede vahekaugused
Selles näites demonstreeritakse, kuidas määrata tähtede vahekaugusi tekstis.

 red_dot.gif Ridade vahekaugused
Selles näites demonstreeritakse, kuidas määrata ridade vahekaugusi tekstis.

 red_dot.gif Teksti nihutamine
Selles näites demonstreeritakse, kuidas paigutada teksti veebilehel.

 red_dot.gif Teksti dekoreerimine
Selles näites demonstreeritakse, kuidas lisada tekstile erinevaid dekoratsioone.

 red_dot.gif Taandrida
Selles näites demonstreeritakse, kuidas märkida paragrahvi esimese rea, taandrida.

 red_dot.gif Teksti tähtedega manipuleerimine
Selles näites demonstreeritakse, kuidas saavutada kontroll suurte ja väikeste tähtede üle.

 red_dot.gif Sõnade vahekaugused
Selles näites demonstreeritakse, kuidas määrata sõnade vahekaugusi.

 red_dot.gif Lause poolituse keeld
Selles näites demonstreeritakse, kuidas keelata brauseril lauset vaikimisi poolitada.

CSS Font

 red_dot.gif Teksti kirjastiil
Selles näites demonstreeritakse, kuidas määrata teksti kirjastiili.

 red_dot.gif Alapealkirja stiil
Selles näites demonstreeritakse, kuidas määrata teksti alapealkirja stiili.

 red_dot.gif Teksti suurus
Selles näites demonstreeritakse, kuidas määrata teksti suurust.

 red_dot.gif Teksti kohandamine
Selles näites demonstreeritakse, kuidas kohandada teksti suurust, kasutades "font-size-adjust" elementi.

 red_dot.gif Teksti stiil
Selles näites demonstreeritakse, kuidas määrata teksti stiili.

 red_dot.gif Teksti variant
Selles näites demonstreeritakse, kuidas määrata teksti kuju, kasutades "font-variant" elementi.

 red_dot.gif Teksti paksus
Selles näites demonstreeritakse, kuidas määrata teksti paksust.

 red_dot.gif Teksti omadused ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas teksti omadused kirjutada kõik ühte deklaratsiooni.

CSS Ääris

 red_dot.gif  Äärise omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas märkida kõik äärise omadused ühte deklaratsiooni.

 red_dot.gif Iga külg erinev
Selles näites demonstreeritakse, kuidas elemendi ümber saab luua äärise, kus iga külg on erinev.

 red_dot.gif Ülaäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi ülaäärise omadused saab märkida kõik ühte deklaratsiooni.

 red_dot.gif Alaäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi alaäärise omadused saab märkida kõik ühte deklaratsiooni.

 red_dot.gif Vasakäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi vasakäärise omadused saab märkida kõik ühte deklaratsiooni.

 red_dot.gif Paremäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi paremäärise omadused saab märkida kõik ühte deklaratsiooni.

 red_dot.gif Erinevad ääriste stiilid
Selles näites demonstreeritakse, kuidas märkida erinevaid ääriste stiile.

 red_dot.gif Ülaäärise stiilid
Selles näites demonstreeritakse, kuidas märkida ülaäärise stiile.

 red_dot.gif Alaäärise stiilid
Selles näites demonstreeritakse, kuidas märkida alaäärise stiile.

 red_dot.gif Vasakäärise stiilid
Selles näites demonstreeritakse, kuidas märkida vasakäärise stiile.

 red_dot.gif Paremäärise stiilid
Selles näites demonstreeritakse, kuidas märkida paremäärise stiile.

 red_dot.gif Ääriste paksus
Selles näites demonstreeritakse, kuidas märkida ääriste paksust ühes deklaratsioonis.

 red_dot.gif Ülaäärise paksus
Selles näites demonstreeritakse, kuidas märkida üääriste paksust.

 red_dot.gif Alaäärise paksus
Selles näites demonstreeritakse, kuidas märkida alaääriste paksust.

 red_dot.gif Vasakäärise paksus
Selles näites demonstreeritakse, kuidas märkida vasakääriste paksust.

 red_dot.gif Paremäärise paksus
Selles näites demonstreeritakse, kuidas märkida paremääriste paksust.

 red_dot.gif Nelja äärise värvid
Selles näites demonstreeritakse, kuidas märkida nelja värvilise äärise omadused.

 red_dot.gif Ülaäärise värv
Selles näites demonstreeritakse, kuidas märkida ülaäärise värvi omadused.

 red_dot.gif Alaäärise värv
Selles näites demonstreeritakse, kuidas märkida alaäärise värvi omadused.

 red_dot.gif Vasakäärise värv
Selles näites demonstreeritakse, kuidas märkida vasakäärise värvi omadused.

 red_dot.gif Paremäärise värv
Selles näites demonstreeritakse, kuidas märkida paremäärise värvi omadused.

CSS Margin

 red_dot.gif  "Margin" omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas märkida kõik "margin" omadused ühte deklaratsiooni.

 red_dot.gif "Top-margin"
Selles näites demonstreeritakse, kuidas teksti kohale luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Top-margin-2"
Selles näites demonstreeritakse, kuidas teksti kohale luua tühikut, kasutades protsent väärtust.

 red_dot.gif "Bottom-margin"
Selles näites demonstreeritakse, kuidas teksti alla luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Bottom-margin-2"
Selles näites demonstreeritakse, kuidas teksti alla luua tühikut, kasutades protsent väärtust.

 red_dot.gif "Left-margin"
Selles näites demonstreeritakse, kuidas tekstist vasakule luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Left-margin-2"
Selles näites demonstreeritakse, kuidas tekstist vasakule luua tühikut, kasutades protsent väärtust.

 red_dot.gif "Right-margin"
Selles näites demonstreeritakse, kuidas tekstist paremale luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Right-margin-2"
Selles näites demonstreeritakse, kuidas tekstist vasakule luua tühikut, kasutades protsent väärtust.

CSS Padding

 red_dot.gif  "Padding" omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas märkida kõik "padding" omadused ühte deklaratsiooni.

 red_dot.gif "Top-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi kohale luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Top-padding-2"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi kohale luua tühikut, kasutades protsent väärtust.

 red_dot.gif "Bottom-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi alla luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Bottom-padding-2"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi alla luua tühikut, kasutades protsent väärtust.

 red_dot.gif "Left-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi vasakule küljele luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Left-padding-2"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi vasakule küljele luua tühikut, kasutades protsent väärtust.

 red_dot.gif "Right-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi paremale küljele luua tühikut, kasutades cm. väärtust.

 red_dot.gif "Right-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi paremale küljele luua tühikut, kasutades protsent väärtust.

CSS Nimekiri

 red_dot.gif Erinevad korrastamata nimekirjad.
Selles näites demonstreeritakse, kuidas luua erinevaid korrastamata nimekirju.

 red_dot.gif Erinevad korrastatud nimekirjad.
Selles näites demonstreeritakse, kuidas luua erinevaid korrastatud nimekirju.

 red_dot.gif Erinevad nimekirja stiilid.
Selles näites demonstreeritakse, kuidas luua css'i abil erinevaid nimekirjade stiile.

 red_dot.gif Pildid nimekirjas.
Selles näites demonstreeritakse, kuidas kasutada pilte nimekirja kujundamisel.

 red_dot.gif Nimekirja omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas kirjutada kõik nimekirja omadused ühte deklaratsiooni.

CSS Tabel

 red_dot.gif Tabeli välimus.
Selles näites demonstreeritakse, kuidas kujundada tabeli välimust.

 red_dot.gif Tühjad lahtrid.
Selles näites demonstreeritakse, kuidas kujutada tühje lahtreid tabelis.

 red_dot.gif Distants tabelis.
Selles näites demonstreeritakse, kuidas distantseerida tabeli lahtreid.

 red_dot.gif Tabeli pealkirja positsioneerimine.
Selles näites demonstreeritakse, kuidas positsioneerimisega, muudetakse tabeli pealkirja asendit.

CSS Dimensioon

 red_dot.gif Pildi kõrgus.
Selles näites demonstreeritakse, kuidas muuta pildi kõrgust, kasutades piksel väärtust.

 red_dot.gif Pildi kõrgus-2.
Selles näites demonstreeritakse, kuidas muuta pildi kõrgust, kasutades protsent väärtust.

 red_dot.gif Pildi laius.
Selles näites demonstreeritakse, kuidas muuta pildi laiust, kasutades piksel väärtust.

 red_dot.gif Pildi laius-2.
Selles näites demonstreeritakse, kuidas muuta pildi laiust, kasutades protsent väärtust.

 red_dot.gif Elemendi kõrgus.
Selles näites demonstreeritakse, kuidas määrata elemendi kõrgust.

 red_dot.gif Elemendi laius.
Selles näites demonstreeritakse, kuidas muuta elemendi laiust, kasutades piksel väärtust.

 red_dot.gif Rea vahed.
Selles näites demonstreeritakse, kuidas muuta paragrahvi rea vahesid, kasutades protsent väärtust.

 red_dot.gif Rea vahed-2.
Selles näites demonstreeritakse, kuidas muuta paragrahvi rea vahesid, kasutades piksel väärtust.

 red_dot.gif Rea vahed-3.
Selles näites demonstreeritakse, kuidas muuta paragrahvi rea vahesid, kasutades number väärtust.

CSS Kvalifikatsioon

 red_dot.gif Inline element.
Selles näites demonstreeritakse, kuidas kuvada elementi "inline" elemendina.

 red_dot.gif Blokeeritud element.
Selles näites demonstreeritakse, kuidas kuvada elementi, blokeeritud elemendina.

 red_dot.gif Float omadus.
Selles näites demonstreeritakse, kuidas liigutada pilti paragrahvist paremale.

 red_dot.gif Float omadus-2.
Selles näites demonstreeritakse, kuidas liigutada pilti paragrahvist paremale, lisades pildile raami ja margin atribuudid.

 red_dot.gif Nihutatud pilt alapealkirjaga.
Selles näites demonstreeritakse, kuidas lisada pildile alapealkiri ja nihutada paragrahvist paremale.

 red_dot.gif Esimene täht.
Selles näites demonstreeritakse, kuidas muuta paragrahvi esimese tähe stiili ja nihutada see vasakule.

 red_dot.gif Horisontaal menüü.
Selles näites demonstreeritakse, kuidas nihutada hüperlinke nii, et saadakse horisontaalne menüü.

 red_dot.gif Tabeliteta veebileht.
Selles näites demonstreeritakse, kuidas luua veebileht ilma tabeleid kasutamata.

 red_dot.gif Positsioon: relative.
Selles näites demonstreeritakse, kuidas nihutatakse elementi tema normaalsest positsioonist kõrvale.

 red_dot.gif Positsioon: absolute.
Selles näites demonstreeritakse, kuidas nihutatakse elementi kasutades "absolute" väärtust.

 red_dot.gif Nähtamatu element.
Selles näites demonstreeritakse, kuidas muuta elementi nähtamatuks v. nähtavaks.

 red_dot.gif Nähtamatu tabeli element.
Selles näites demonstreeritakse, kuidas muuta tabeli elementi nähtamatuks v. nähtavaks.

 red_dot.gif Kursori stiil.
Selles näites demonstreeritakse, kuidas muuta kursori välimust.

CSS Positsioneerimine

 red_dot.gif Positsioon: relative.
Selles näites demonstreeritakse, kuidas nihutatakse elementi tema normaalsest positsioonist kõrvale.

 red_dot.gif Positsioon: absolute.
Selles näites demonstreeritakse, kuidas nihutatakse elementi kasutades "absolute" väärtust.

 red_dot.gif Positsioon: fixed.
Selles näites demonstreeritakse, kuidas nihutatakse elementi vastavuses brauseri aknale.

 red_dot.gif Elemendi kuju.
Selles näites demonstreeritakse, kuidas määrata elemendi kuju. Element on kärbitud ning seejärel kuvatud.

 red_dot.gif Overflow element koos kerimisribaga.
Selles näites demonstreeritakse, kuidas määrata overflow (paisunud, üleujutatud) omadust nii, et tekkiks kerimisriba sest element on liiga suur mahtumaks määratud alale.

 red_dot.gif Overflow elemendi peitmine.
Selles näites demonstreeritakse, kuidas määrata overflow (paisunud, üleujutatud) omadust nii, et elemendi see osa peidetakse mis ei mahu määratud alale.

 red_dot.gif Overflow brauseri automaat valikuga.
Selles näites demonstreeritakse, kuidas määrata overflow (paisunud, üleujutatud) omadust nii, et brauser valib ise automaatselt overflow omaduse.

 red_dot.gif Pildi vertikaalne paigutus.
Selles näites demonstreeritakse, kuidas määrata pildi vertikaalset paigutust teksti suhtes.

 red_dot.gif Z-index.
Z-indeksit kasutatakse selleks, et paigutada üks element teise "taha".

 red_dot.gif Z-index-2.
Ülalpool oleva näite Z-indeks on muudetud.

 red_dot.gif Pildi ülemine serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi ülemise serva paigutust, kasutades piksel väärtust.

 red_dot.gif Pildi ülemine serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi ülemise serva paigutust, kasutades protsent väärtust.

 red_dot.gif Pildi alumine serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi alumise serva paigutust, kasutades piksel väärtust.

 red_dot.gif Pildi alumine serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi alumise serva paigutust, kasutades protsent väärtust.

 red_dot.gif Pildi vasak serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi vasaku serva paigutust, kasutades piksel väärtust.

 red_dot.gif Pildi vasak serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi vasaku serva paigutust, kasutades protsent väärtust.

 red_dot.gif Pildi parem serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi parema serva paigutust, kasutades piksel väärtust.

 red_dot.gif Pildi parem serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi parema serva paigutust, kasutades protsent väärtust.

CSS Pseudo-class

 red_dot.gif Hüperlink
Selles näites demonstreeritakse, kuidas lisada hüperlingile erinevaid värve.

 red_dot.gif Hüperlink.
Selles näites demonstreeritakse, kuidas muuta hüperlingi stiili.

 red_dot.gif Hüperlink: focus.
Selles näites demonstreeritakse, kuidas kasutada :focus pseudo-class elementi hüperlingis.
(Ei tööta IE's).

 red_dot.gif :first-child.
Selles näites demonstreeritakse, kuidas "first-child" muudab <p> elemendi paksuks.
(IE's peab <DOCTYPE> olema määratud)

 red_dot.gif :first-child-2.
Selles näites demonstreeritakse, kuidas "first-child" muudab kõik <p> elemendid paksuks.
(IE's peab <DOCTYPE> olema määratud)

 red_dot.gif :first-child-3.
Selles näites demonstreeritakse, kuidas "first-child" muudab <p> elemendi "first-child'i" paksuks.
(IE's peab <DOCTYPE> olema määratud).

 red_dot.gif :lang.
Selles näites demonstreeritakse, kuidas kasutada ":lang pseudo-class'i".
(Ei tööta IE's).

CSS Pseudo-element

 red_dot.gif Esimene täht
Selles näites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele tähele.

 red_dot.gif Esimene rida.
Selles näites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele reale.

 red_dot.gif Esimene täht ja rida.
Selles näites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele tähele ja reale.

 red_dot.gif :before.
Selles näites demonstreeritakse, kuidas kasutada :before pseudo-elementi nii, et lisatud pilt jääb elemendi ette.
(Ei tööta IE's).

 red_dot.gif :after.
Selles näites demonstreeritakse, kuidas kasutada :after pseudo-elementi nii, et lisatud pilt jääb elemendi järele.
(Ei tööta IE's).

CSS3 Pildi-galerii

 red_dot.gif Pildi-galerii

 red_dot.gif Pildi-galerii-2

 red_dot.gif Pildi-galerii-3

 red_dot.gif Pildi-galerii-4

CSS3 Pildi läbipaistvus

 red_dot.gif Mouseover efekt

 red_dot.gif Läbipaistev pilt