![]() | 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:
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART6C?action=download&upname=cssborders.png)
Pildi allikas: w3.org
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART6C?action=download&upname=punktidepiir2.png)
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.
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART6C?action=download&upname=borders2.png)
Piiri parameeter border-width
määrab piiri laiuse. Piiri laiust saab seada järgmiste väärtustega:
thin
- õhuke piirmedium
- keskmine piiri paksusthick
- 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.
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART6C?action=download&upname=piiripaksus.png)
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.
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART6C?action=download&upname=piiriv%C3%A4rv.png)
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 |