Slušaj robot čitača
O border-ima u HTML-u
Zašto border prvo?
Border je prvo CSS svojstvo koje ja svojevremeno naučih, i u tim ranim jadima ga koristih non-stop. Kada se na neki HTML element stavi border, posebno neki "glup" border, taj element je vrlo lako uočiti na ekranu. To je vrlo korisno kad tek počinjemo da učimo, jer ćemo brzo i lako videti šta je koji HTML element, ili šta koji CSS selektor gađa. U pitanju je lak i brz način da se orjentišemo na stranici koju posmatramo.
Ne zaboravite da na skoro bilo kojoj stranici možete pritiskom F12 ili Ctrl+Shift+I videti HTML/CSS te stranice. Vrlo retko, neki sajt može da pokuša da "zabrani" pristup dev-alatima, u kom slučaju otvorite novi tab, u novom, praznom tabu kliknite na F12, i onda u "address bar" prekopirajte url problematičnog sajta. Dev-alati će ostati otvoreni, i vi ćete moći da vidite šta vas zanima.
Pokušaj zabrane otvaranja dev-alata se radi Javascript-om, koji sprečava podrazumevano ponašanje svih kombinacija tastera koji otvaraju bilo koji oblik dev-alata. Ovo ne deluje ako dev-alate otvorite pre nego što se Javascript učita. Ovo je inače jako retka pojava, kad naletim na takav sajt, staviću link.
U odeljku "uvod u CSS" smo videli kako ubaciti CSS kôd u HTML. Ja ću vama prepustiti da odaberete koji metod uvođenja CSS-a ćete koristiti, a ja ću primere pisati, kao da su u ekstrernom CSS fajlu.
Kako dodati okvir na HTML element? border
* {
border: 1px solid black;
}
body {
border: 3px dotted red;
}
body * {
border: 5px dashed green;
}
Za border definišemo tri vrednosti, debljinu bordera, 1px, 3px, 5px, njegovu boju (crna, crvena, zelena), i njegov stil (puna linija, tačkasta, crtičasta linija)
Ono što čini razliku između vidljivog i nevidljivg bordera, je stil. Ako zadamo samo stil bordera, on će se odmah pojaviti, sa podrazumevanom debljinom od 3px (medium), i bojom koju imaju slova u tom elementu. Podrazumevana vrednost stila je none, pa promenom te vrednosti, i border postaje vidljiv.
Mislim da je podrazumevana vrednost debljine 3px zato što većina stilova izgleda kao "solid" stil za debljinu od 1px (npr ridge ili groove), dok double nastavlja da izgleda kao solid čak i na 2px debljine. Ne garantujem da je ovo razlog zašto je vrednost od 3px izabrana, to je samo nešto što je meni logično, da se ja pitam isto bi bilo 3px, iz tog razloga.
CSS će biti primenjen na onaj HTML element koji je zadovoljen selektorom. Pošto mi još nismo obradili CSS selektore, ovde koristimo samo najbanalnije primere. U ovom slučaju su navedena tri selektora, *, body, i body *.
- body - bilo koji html element se može pogoditi navođenjem imena elementa. Takav stil će se onda primeniti na sve elemente tog tipa, osim što u našem slučaju, postoji samo jedan <body> element.
- * znači da će stil naveden u {} biti primenjen na ceo HTML dokument (osim ako neki specifičniji selektor kasnije, ne uvede drugačiji stil, kao u našem primeru).
- body * - stilovi će se primeniti na svu decu body elementa.
Ako ovaj kôd sačuvate, i u browser-u otvorite korespondirajući .html fajl, videćete da je sveukupna sadržina stranice uokvirena crnim ramom, pune linije, debljine 1px. Ako ne bismo imali druga dva selektora (oba specifičnija od * {}), svaki element na strani bi bio uokviren istim ramom.
Ako privremeno obrišemo druga dva selektora, i ostavimo samo * {}, videćemo da svaki element na strani dobija crni okvir. Videćemo u sledećoj lekciji i kako da "zakomentarišemo" deo kôda, da ga ne bismo brisali svaki čas.
Sam body {} selektor dakle gađa body tag. Ako obrišemo/zakomentarišemo druga dva selektora, videćemo da će samo body dobiti crveni border. Ako odkomentarišemo i *, videćemo da samo body ima crveni border, a svi ostali elementi na strani crn.
Da li će se pravilo definisano na roditelju, primeniti i na decu, pod normalnim okolnostima zavisi od toga da li je to CSS svojstvo nasledno ili ne. Recimo, ako navedete da body treba da koristi neki specifičan font videli biste da bi i sva "deca" body elementa odmah počela da koriste taj zadati font. Međutim, ako navedemo da body treba da ima border, onda ni jedan drugi element unutar body taga neće poprimiti border kakav body ima.
Ne bi imalo smisla da ako želimo da zadamo border na body, da onda moramo posebno da ga skidamo sa unutrašnjih elemenata, isto kao što ne bismo hteli da svakom elementu ponaosob definišemo tip slova, jer generalno želimo ista slova na celom sajtu, ili vrlo malo varijabilnosti. Naslednost CSS svojstava je tako definisana da to ima najviše smisla.
Kada je u pitanju *, nije da važe druga pravila o nasleđivanju, * nije neki master roditelj svim elementima, on jeste svi elementi. Nazivamo ga wildcard selektorom. Tako da ako definišete neko svojstvo u * {}, to je isto kao da ste svakom mogućem elementu dali to svojstvo. To onda znači da bi to svojstvo pregazilo i sva nasleđivanja tog svojtva kroz HTML dokument, jer sva deca imaju u sebi svojstvo iz * {}.
Dakle, ako u * {} definišemo jedan font, a u body {} neki drugi, sva deca body elementa će i dalje imati font zadat u * {}, jer smo pomoću * {} svakom elementu ponaosob zadali taj prvi font. Dakle, iako bi se pod normalnim okolnostima font nasledio od roditelja, od body elementa, to će ovde biti pregaženo, iliti ponovo zadato na svakom elementu, detetu body-ja.
Tim znanjem sad možemo proširiti naše shvatanje o nasleđivanju. Zamislite situaciju da web ne postoji, i mi treba da ga napravimo. Kreiramo džoker selektor, i u njemu definišemo border: none;, odnosno, da ni jedan element sam po sebi, nema border. To znači da ako sada na neki selektor stavimo svojstvo border: 1px solid red;, samo taj element će dobiti crveni border, dok će sva njegova deca imati svojstvo border: none;. Dakle, možemo o tome misliti kao da osobine koje nisu po defaultu (po user agent stylesheet-u) definisane kroz *{}, su nasledne.
Dalje, ovakva CSS deklaracija znači da će body element imati crveni tačkasti okvir, debljine 3px.
U okviru body * selektora (svi elementi, unutar body elementa), smo definisali zeleni crtičasti okvir, debljine 5px.
Kako dodati border samo s nekih strana HTML elementa?
U nekim situacijama, možemo poželeti da dodamo okvir samo s jedne strane elementa. Recimo, lako je podvući tekst, ali šta ako hoćemo da linija koja podvlači tekst bude malo šira od samog teksta? Šta ako želimo da element ima border, ali da s jedne strane bude druge debljine? Šta ako hoćemo da nacrtamo trougao?
Da bismo gađali samo jednu stranu našeg elementa, koristimo sledeća 4 svojstva:
Sada možemo definisati okvir samo sa jedne strane, na potpuno isti način kako smo to malopre uradili sa sve 4 strane. Definisanjem željene debljine, vrste, i boje okvira s te jedne strane:
p {
: 4px dotted firebrick;
}
primer
Možemo kombinovati i nekoliko strana ako nam se prohte, ili ako sa tri strane hoćemo jedan border, a sa četvrte neki drugi, možemo prvo definisati svojstvo za sve 4 strane, pa onda i svojstvo za jednu stranu koja je drugačija. Zbog kaskadne prirode CSS-a, drugo svojstvo će pregaziti prvo, pa će se ta jedna strana razlikovati:
p {
width: 0;
height: 0;
border: 6rem solid transparent;
border-bottom: 6rem solid firebrick;
}
Šta smo ovde tačno uradili?
Svojstva width i height definišu širinu, odnosno visinu našeg p taga. Mi smo im dali vrednosti 0, i to je ona tačka na vrhu trougla.
Zatim smo definisali da p element treba da ima providan border debljine 100px. To znači da naš p tag sada ima visinu i širinu od 200px, ako računamo i ovaj debeli border, ali se ništa od toga ne bi videlo na ekranu.
Konačno smo pragazili pravilo za donji border, i zadali da on treba da bude boje opeke, i da ima iste dimenzije kao i druga tri.
Napravite sada sami pravougaoni trougao, zelene boje, visine 1rem
Debljina bordera HTML elementa border-width
Ako naprosto hoćemo da promenimo debljinu okvira možemo samo povećati ili smanjiti broj px u prethodnoj definiciji. Ali šta ako hoćemo da napravimo da element ima 4 različite debljine ivice sa 4 različite strane?
border-width: vrednost; je CSS svojstvo kojim se definiše debljina okvira nekog elementa. Postoje 3 ključne reči za definisanje debljine okvira, i to:
| Vrednost | Opis |
|---|---|
| "thin" | tanka (1px) |
| "medium" | srednja, podrazumevana vrednost ako se svojstvo ne navede (3px) |
| "thick" | debela (5px) |
| brojna vrednost | širina zadata u px, rem, em ili sl |
p {
border-width: ;
}
Primer
Zapazite kako se tekst unutar elementa pomera, kako menjamo debljinu bordera. U opštem slučaju, debljina bordera se dodaje na dimenzije elementa, pa se element sa ovim "novim" dimenzijama ucrtava na web stranicu.
U mračnom dobu web developmenta, ovo je moglo dovesti do poremećaja u izgledu strane na kojoj dva elementa treba da stoje jedan pored drugog, jer bi debljina bordera činila da elementi budu širi od širine strane, za 2px, koliko border dodaje jednom od elemenata. U takvim situacijama bi onda jedan element sleteo ispod drugog. Nemate pojma koliko je to bilo zabavno, ljudi koji su naučili web development nakon pojave grid-a/flexbox-a, njima ne možete ni da objasnite da elementi mogu da sklizavaju jedan ispod drugog. Tako da ako u nekom "nasleđenom" kôdu, vidite neke besmislene, zakucane dimenzije elemenata, znajte da je taj neko morao da radi aritmetiku da našteluje te brojeve. Tada nije postojao responsivan dizajn, jer su mobilni telefoni imali majušan monohromatski ekran, pa su se sajtovi pravili sa zakucanim veličinama.
U svakom slučaju, danas imamo i box-sizing CSS pravilo, kojim možemo da promenimo da li se border i padinzi, računaju u dimenzije elementa, ili ne.
Dakle, ako navedemo samo jednu vrednost, ona se odnosi na sve 4 ivice. Ako navedemo dve vrednosti, prva vrednost uvek predstavlja gornju i donju vrednost, a druga, levu i desnu.
p {
border-width: thick thin;
}
Primer
Ovako definisan border-width znači da će gornji i donji border biti debeli, a levi i desni tanki.
Dalje, ako navedemo 3 vrednosti:
p {
border-width: thick medium thin;
}
Primer
Prva se odnosi na gornji border, koji će u ovom primeru biti debeo, druga vrednost, medium, se odnosi i na levi i desni border, koji će u ovom slučaju biti srednje debljine, a treća vrednost, thin, se odnosi na donji border, koji će biti tanak.
Konačno, ako navedemo sve četiri vrednosti;
p {
border-width: 20px 10px 5px 0;
}
Primer
Tada se vrednosti odnose na strane u smeru kazaljke na satu, počev odozgo, dakle: gornja (20px), desna (10px), donja (5px), leva (0).
Zapazite da se vrednosti u svim slučajevima odvajaju praznim mestom, i da ako je vrednost 0, ne pišemo jedinice (px, rem,...). Jedinice kada se pišu, pišu se bez razmaka posle brojne vrednosti. Bilo koja omaška u formatu, rezultiraće time da se border ne pojavi na elementu. Dok je HTML vrlo fleksibilan sa greškama, CSS je izuzetno sitničav, jedan izostavljen ; i sve stade, on nema pojma šta smo mi mislili, on samo zna šta smo napisali.
Ova pravila o redosledu primene 1-4 vrednosti, ne važe samo za bordere, već generalno za sva CSS svojstva koja se navode za ivice (margine, padding i sl), uz mala odstupanja kod pravila koja se umesto na strane, primenjuju na ćoškove (border-radius)
Dakle, jedna vrednost se odnosi na sve četiri strane, od dve zadate vrednosti prva se uvek odnosi na gore i dole, a druga na levo i desno.
Od tri zadate vrenosti, prva se odnosti na gojnu stranu, treća na donju, a sredja vrednost, na levu i desnu stranu elementa.
I konačno kad zadamo sve 4 vrednosti, one se primenjuju u smeru kazaljke na satu, počev od gornje stranice.
Takođe, moguće je navesti širinu samo jedne strane rama, u kom slučaju će ostale tri strane zadržati predefinisanu širinu. To radimo na sledeći način izborom jedne željene od 4 navedene linije kôda:
border-top-width: 20px;
border-right-width: 10px;
border-bottom-width: 5px;
border-left-width: 0;
border-block-start-width: 20px;
border-inline-end-width: 10px;
border-block-end-width: 5px;
border-inline-start-width: 0;
Boja bordera HMTL elementa border-color
I u ovom slučaju se može navesti od jedne do 4 vrednosti, na isti način kao u prethodnom slučaju.
p {
border-color: red green blue yellow;
}
Ili se mogu gađati pojedine strane elementa:
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
ili
border-block-start-color: red;
border-inline-end-color: green;
border-block-end-color: blue;
border-inline-start-color: yellow;
primer
Boja može da se definiše na sve načine koji su uobičajeni pri definisanju boja, o čemu će više reči biti kasnije, u poglavlju "boje"
Kako promeniti izgled okvira elementa na web stranici? border-style
Stil bordera je razlika između prisustva i odsustva bordera. Podrazumevana vrednost je none, dok je podrazumevana vrednost za border-width: 3px (medium) i za border-color: boja slova u datom elementu. Dakle, dovoljno je zadati samo stil bordera, da bi se on pojavio.
Stil bordera se takođe može definisati sa 1 - 4 vrednosti, kao i u prethodnim slučajevima. Te vrednosti mogu biti:
| Svojstvo | Opis |
|---|---|
| none | podrazumevana vrednost, nema okvira |
| hidden | takođe nema bordera, a koristi se kad imamo konflikt u definiciji bordera kod tabela |
| dotted | tačkasti okvir |
| dashed | crtičasti okvir |
| solid | okvir je puna linija |
| double | dupla linija. Ima smisla samo kad je border-width > 3px. |
| groove | definiše 3d žljeb čiji efekat zavisi od boje okvira - mi definišemo samo jednu boju, brauzer izračunava drugu. Ima smisla samo kad je border-width > 2px. |
| ridge | definiše 3d greben čiji efekat zavisi od boje okvira, obrnuto od groove. Ima smisla samo kad je border-width > 2px. |
| inset | definiše 3d uleglunće čiji efekat zavisi od boje okvira. Ima smisla samo kad je border-width > 2px. |
| outset | definiše 3d ispupčenje čiji efekat zavisi od boje okvira, obrnuto od inset. Ima smisla samo kad je border-width > 2px. |
| initial | podešava vrednost na početnu |
| inherit | naslediće okvir od elementa u kome se nalazi |
p {
border-style: ;
border-color: firebrick;
border-width: 20px
}
primer
Vredi napomenuti da su neke od ovih vrednosti neuočljive za debljinu bordera od 1px. Ne moraju da budu debeli baš 20px, 3px je dovoljno, ali da bi se bolje videlo...
videti još
Članak prvi put objavljen: 21.1.2022.
Poslednje izmene: 3.2.2022.
Autor: k.