CSS linije su više od granice
Osobina CSS- a je konfuzna svojina. Kada prvi put saznate o tome, teško je shvatiti kako se čak i daleko razlikuje od imovine granice. W3C ga objašnjava kao sledeće razlike:
- Izvodi ne zauzimaju prostor.
- Izvodi mogu biti neregularni.
Izvodi ne uzimaju prostor
Ova izjava, sam po sebi, zbunjuje. Kako objekat na vašoj web stranici ne može da iskoristi prostor na Web stranici? Međutim, ako razmislite o vašoj web stranici kao luk, svaka stavka na stranici može biti slojevita na vrhu druge stavke. Obilje svojstva ne zauzima prostor jer se uvek nalazi na vrhu kutije elementa.
Kada je okvir postavljen oko elementa, on nema nikakav uticaj na to kako je taj element postavljen na stranici. Ne menja veličinu ili položaj elementa. Ako stavite okvir na element, zauzimaće istu količinu prostora kao da niste imali pregled tog elementa. Ovo nije tačno za granicu. Granica na elementu dodaje se spoljnoj širini i visini elementa. Dakle, ako ste imali sliku širine 50 piksela, sa graničnikom od 2 piksela, biće potrebno 54 piksela (2 piksela za svaku bočnu granicu). Ta ista slika sa 2-pikselskom linijom bi trebala imati samo 50 piksela širine na vašoj stranici, a prikaz bi se prikazao preko vanjske ivice slike.
Izvodi mogu biti neregularni
Pre nego što počnete da razmišljate "cool, sada mogu da nacrtam krugove!" Razmisli ponovo. Ova izjava ima drugačije značenje nego što mislite. Kada postavite granicu na element, pretraživač tumači element kao da je to ogromna pravougaona kutija. Ako se kutija razdvaja na više linija, pretraživač ostavlja otvorene ivice samo zato što kutija nije zatvorena. To je kao da pregledač vidi granicu sa beskrajno širokim ekranom - dovoljno širok da je ta granica jedan kontinualni pravougaonik.
Za razliku od toga, obeležje svojstava uzima u obzir ivice. Ako izneseni element obuhvata nekoliko linija, obris se zatvara na kraju linije i ponovo se otvara na sledećoj liniji. Ako je moguće, orjent će ostati u potpunosti povezan, stvarajući ne-pravougaoni oblik.
Upotreba konture imovine
Jedna od najboljih upotreba stanja objekta je isticanje pojmova za pretragu. Mnoge stranice to rade sa bojom pozadine, ali takođe možete koristiti svojstvo outline i ne brinite za dodavanje dodatnih razmaka na vašim stranicama.
Osobina obojene boje prihvata izraz "invert" što čini boju u obliku inverznom od trenutne pozadine. Ovo vam omogućava da istaknete elemente na dinamičkim Web stranicama bez potrebe da znate koje boje koriste .
Možete takođe koristiti i svojstvo outline da uklonite tačku linije oko aktivnih veza. Ovaj članak iz CSS-Tricksa pokazuje kako ukloniti tačkast plan.