Arvutiteaduse instituut
  1. Esileht
  2. Noored Koodi
EN
Logi sisse

Noored Koodi

Veebilehed

<< Kõik kursused

  • Kursusest
    • 0. Sissejuhatus veebimaailma

HTML

  • 1. Mis on HTML?
  • 2. Tekst ja viidad
  • 3. Loendid. Tabelid
  • 4. Pildid. Audio. Video

CSS

  • 5. Mis on CSS?
  • 6. Tabelid, loendid, piirid

6.1 Tabelid 6.2 Loendid 6.3 Piirid

  • 7. Pseudoelemendid ja positsioneerimine
  • 8. Kursorid, taustad, pildid
Peatüki sisukord

6.3 Piirid

Selles peatükis arutletakse, kuidas CSS-i abil tekitada piire, mida saab kasutada erinevate elementide ümbritsemiseks. Selle ülesande võtab enda peale atribuut nimetusega border, millel on palju erinevaid omadusi ning kasutamisvõimalusi.

Piiri välimust saab valida järgmistest erinevatest stiilidest:

  • none - ei ole piiri (vaikimisi);
  • dotted - punktide piir;
  • dashed - katkendlik piir;
  • solid - paks piir;
  • double - topelt piir;
  • groove - "soon" piir;
  • ridge - "kraavi" piir;
  • inset - "alla surutud" piir;
  • outset - "välja tõmmatud" piir.

Näide:

Pildi allikas: w3.org

Piiri stiili saab määrata elemendi kõikidele külgedele kui ka eraldi igale küljele. Tulemus sõltub sellest, kui palju väärtusi on piiritüübi omadusele määratud. Väärtusi saab olla kokku neli - igale elemendi küljele üks.

Piiri parameeter border-width määrab piiri laiuse. Piiri laiust saab seada järgmiste väärtustega:

  • thin - õhuke piir
  • medium - keskmine piiri paksus
  • thick - paks piir
  • samuti pikslites või muudes CSS-i poolt vastuvõetud mõõtühikutes (cm, mm, px, pt, %).

Sarnaselt stiiliga võib piiride paksusel olla üks kuni neli väärtust.

Piiri või selle külgede värv sõltub border-color parameetrist. Värvidena saab kasutada järgmisi argumente:

  • värvi kuueteistkümnend väärtus - näiteks #ff0000
  • värvi nime väärtus - näiteks red
  • värvi RGB väärtus - näiteks (255,0,0)
  • läbipaistv piir transparent

Nagu ka paksuse ja stiili juhtudel, võib ka piiri värvi korral olla üks kuni neli väärtust.

Iseseisev ülesanne:

Võtke lause: "Oskan nüüd CSS-is piiride teemat!", ning lisage sellele vabal valikul piiri stiil, piiri paksus ning värv (kasutage vähemalt kahte värvi).

Peatüki sisukord
  • Arvutiteaduse instituut
  • Loodus- ja täppisteaduste valdkond
  • Tartu Ülikool
Tehniliste probleemide või küsimuste korral kirjuta:

Kursuse sisu ja korralduslike küsimustega pöörduge kursuse korraldajate poole.
Õppematerjalide varalised autoriõigused kuuluvad Tartu Ülikoolile. Õppematerjalide kasutamine on lubatud autoriõiguse seaduses ettenähtud teose vaba kasutamise eesmärkidel ja tingimustel. Õppematerjalide kasutamisel on kasutaja kohustatud viitama õppematerjalide autorile.
Õppematerjalide kasutamine muudel eesmärkidel on lubatud ainult Tartu Ülikooli eelneval kirjalikul nõusolekul.
Courses’i keskkonna kasutustingimused