Čvrsta ivica css. CSS Box Model

Proučili smo svojstva za dizajn teksta i fonta, sada je red da pređemo na druge elemente. U ovoj lekciji ćemo pogledati kreiranje okvira pomoću css. Ova nekretnina se koristi dosta često, pa je vrijedno posvetiti mu malo više pažnje.

I tako, pretpostavimo da je potrebno napraviti okvir oko nekog elementa. Na primjer, kreirajte zaglavlje i napravite okvir oko njega.

Parametri koji karakterišu okvir: 1) Debljina okvira, 2) Stil okvira i 3) Boja okvira. I krenimo redom:

• 1. Debljina okvira: širina granice: 2px;
• 2. stil okvira: stil obruba: solidan;
• 3. Boja okvira: boja obruba: #ff0000;

U čemu su stilovi okvira css? Ispod su svi dostupni stilovi okvira:

• tačkasta - Ovo je tačkasti okvir.
• isprekidano - Ovo je tačkasti okvir
• solidan - To je čvrst okvir
• duplo - Ovo je dupli okvir
• groove - 3D prikaz
• greben - 3D prikaz
• umetnuti - 3D prikaz
• početak - 3D prikaz

Sada imamo sve da napravimo ivicu oko naslova.

HTML

Napravite obrub oko naslova.

I stil za okvir.

H2( širina ivice: 2px; stil ivice: čvrsta; boja ivice: #FF0000; )

Kao rezultat toga, čvrst crveni okvir debljine od 2px.

Okvir je formiran sa četiri strane: Gornji, U redu, Niže I lijevo i pošto imamo imovinu granica , tada podrazumevani pretraživač crta sve četiri strane okvira. Dakle, ako želite da postavite okvir samo na jednoj strani, tada se koriste prefiksi koji označavaju stranu na kojoj treba kreirati okvir.

• top - Top.
• u pravu - Dobro
• dnu - Na dnu
• lijevo - Lijevo

Dakle, ako želimo da napravimo okvir samo od dna pasusa, odnosno da ga podvučemo, onda svakom svojstvu granica dodati prefiks dnu . Rezultat je sljedeća struktura koda.

H2 (obrub-dno-širina: 2px; obrub-dno-stil: dvostruko; boja-boje dna: #FF0000; )

Korišćenje ovih stilova za pretraživač će značiti da morate da kreirate okvir samo odozdo, tj. podvlačeći naslov. Na isti način možete i duplicirati dati kod, postavljanje okvira s druge strane, na primjer, gornje.

H2( border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: # FF0000; )

Naslov će sada imati crveni obrub na vrhu i dnu. Isto se može učiniti i za druge strane.

Kao što ste vjerovatno već primijetili, ispostavilo se da je zapis prilično velik, pa postoji skraćeni oblik zapisa koji se često koristi u praksi.

Slika iznad prikazuje strukturu skraćene notacije, gdje je svojstvo naznačeno granica a kao vrijednosti, odvojene razmakom, naznačena je širina okvira - granica širine , stil okvira - obrubni stil i boju okvira #ff0000 .

To jest, pretraživač, koji vidi tako skraćeni unos granica: 2px solid #ff0000; , također će stvoriti obrub na sve četiri strane zaglavlja. Ova kratka notacija je ekvivalentna notaciji koju smo koristili gore (gdje su primijenjena tri svojstva).

Ako koristite kratku notaciju potrebno je da navedete okvir samo na jednoj strani, tada svojstvu dodajemo prostačkicu koja označava stranu sa kojom se kreira okvir.

H2( border-top:2px solid #ff0000; )

Dakle, uz pomoć kratkog unosa, napravljen je okvir odozgo, gdje je također naznačena debljina, stil i boja okvira.

Ovako se koristi nekretnina granica oko bilo kojeg elementa se pravi okvir. Okvir takođe stvara podvučenu liniju za veze kada je potrebna drugačija boja podvlačenja. Pa, to je sve sa okvirima, idemo na sljedeće važna lekcija, gdje ćemo razmotriti

U ovom poglavlju:

Model okvira je način prikaza elemenata od strane pretraživača koji sve oznake tretiraju kao male blokove, za njih je svaka oznaka kontejner sa sadržajem: tekstom, slikama, drugim oznakama itd.

• margina(margina) - bijeli prostor (margina) koji odvaja jedan element od drugog. Najjednostavniji primjer uvlačenja je razmak između uzastopnih pasusa. Oblast margine je prozirna i ne može imati prilagođenu boju ili druge efekte stila.
• Granica(granica elementa) - granica sa obje strane elementa. Okvir se može ugraditi kako na sve strane elementa, tako i na jednu stranu. Korištenje obruba može jednostavno lijepo ukrasiti element ili vizualno odvojiti sadržaj trenutnog elementa od ostalih elemenata na stranici.
• Padding(padding) - prazan prostor između sadržaja elementa i njegove granice. Područje za popunjavanje je prozirno i ne može imati prilagođenu boju ili druge stilske efekte.
• Većina elemenata ima područje sadržaja koje sadrži sve sadržaja element (tekst, umetnute slike ili drugi elementi).

Okvir

Ivica je jednostavna linija koja se prikazuje oko elementa koji se stilizuje. Ali nije potrebno primijeniti okvir koji okružuje element sa svih strana. Možete ga dodati samo sa potrebne strane elementa. Na primjer, ako dodate obrub samo od dna elementa bloka, to će imati isti učinak kao i element.

---

(horizontalna linija), koji služi kao graničnik.

Svaki okvir ima tri svojstva koja možemo kontrolirati pomoću CSS-a: širinu, stil i boju, pogledajmo koja svojstva možemo koristiti da ih postavimo i promijenimo:

Umjesto da navedete sva tri svojstva, možete specificirati samo jedno - svojstvo obruba, koje vam omogućava da odredite širinu, stil i boju ivice u isto vrijeme:

Prvi paragraf.

Drugi paragraf.

Treći paragraf.

Za upravljanje okvirom zasebno sa svake strane elementa, koriste se odgovarajuća svojstva:

• border-top - gornja granica
• border-left - lijeva granica
• border-right - desna granica
• border-bottom - donja granica

Ova svojstva rade na potpuno isti način kao i svojstvo obruba, s izuzetkom što kontroliraju ivicu samo na jednoj strani elementa koji se stilizira.

Vanjske i unutrašnje margine

Indent- prazan prostor između sadržaja elementa i njegove granice (ako je postavljen). Svojstvo paddinga se koristi za dodavanje i kontrolu širine dopuna na sve četiri strane elementa.

Margina je razmak koji odvaja element od drugih elemenata ili ivica prozora pretraživača. Svojstvo margina se koristi za dodavanje i kontrolu širine margina na sve četiri strane elementa.

Svojstva paddinga i margine mogu imati jednu do četiri vrijednosti:

Gdje su vrijednosti postavljene u smjeru kazaljke na satu, počevši od vrha:

Ako navedete samo jednu vrijednost za svojstva, tada će uvlake na svim stranama biti iste širine.

Na prvi pogled, vidljivi efekat pri korišćenju ovih svojstava izgleda isto, da biste uočili vizuelnu razliku između njih, možete, na primer, postaviti okvir za element ili set pozadinu:

Redovni paragraf.

Za uvlake, kao i za okvire, postoje svojstva koja vam omogućavaju da kontrolišete veličinu uvlačenja na svakoj strani posebno. Uvlake upravljaju svojstva: padding-top , padding-right , padding-bottom i padding-left . Margine se kontroliraju svojstvima: margin-top , margin-right , margin-bottom i margin-left .

Napomena: vrijednosti padding svojstva a margine se ne nasljeđuju podređeni elementi, tako da morate posebno specificirati širinu dopuna za svaki element koji ih treba.

Širina i visina elementa

Zadano za blok elementi koristi se autowidth. To znači da će element biti rastegnut tačno onoliko koliko jeste. slobodan prostor. Visina blok elemenata se automatski postavlja po defaultu, tj. pretraživač proteže područje sadržaja na vertikalni pravac tako da je sav sadržaj prikazan. Da biste postavili prilagođene veličine za područje sadržaja elementa, možete koristiti svojstva širine i visina.

Vlad Merzhevich

Sa CSS-om možete dodati ivicu elementu na nekoliko načina. U osnovi, naravno, koristi se svojstvo granice, kao najsvestranije, kao i obris i, iznenađujuće, box-shadow, čiji je glavni zadatak stvaranje sjene. Pogledajmo ove metode i njihove razlike.

outline property

Najjednostavnije svojstvo za kreiranje okvira. Ima iste parametre kao i border, ali se značajno razlikuje od njega u nekim detaljima:

• oko elementa se crta obris (ivica unutra);
• outline ne utiče na veličinu elementa (ivica se dodaje širini i visini elementa);
• obris se može postaviti samo oko cijelog elementa, a ne na pojedinačnim stranama (obrub se može koristiti na bilo kojoj strani ili odjednom);
• na konturu ne utiče radijus zaokruživanja specificiran svojstvom border-radius (to utiče na granicu).

Postavlja se pitanje - u kojim slučajevima je potreban okvir, kada njegovu ulogu, uprkos navedenim razlikama, u potpunosti preuzima granica? Nema toliko situacija, ali se dešavaju:

• stvaranje složenih raznobojnih okvira;
• dodavanje okvira elementu kada se kursorom miša pređe preko njega;
• Sakrivanje okvira koji je automatski dodao pretraživač za neke elemente kada dobije fokus;
• za outline, možete postaviti udaljenost od ruba elementa do granice koristeći svojstvo outline-offset, da biste kreirali .

Raznobojni okviri

Mora se shvatiti da obris ni na koji način ne zamjenjuje granicu i može postojati s njom, kao što je prikazano u primjeru 1.

Primjer 1: Kreirajte okvir

U ovom primjeru, oko elementa je dodat crni okvir, koji je od pozadine odvojen bijelim okvirom (slika 1).

Rice. 1. Ivica oko elementa

Okvir kada koristite:hover

Dodavanje obruba preko ivice povećava širinu elementa, što je prilično uočljivo kada se kombiniraju ivica i :hover pseudoklasa. Postoje dva načina kako "pobijediti". Najjednostavnije je zamijeniti ivicu s outlineom, za koji znamo da nema utjecaja na veličinu elementa (primjer 2).

Primjer 2: Okvir pri lebdenju

obris nije uvijek prikladan, makar samo zato što na njega ne utiču zaobljeni uglovi. Ovdje je prikladna druga metoda - dodajte nevidljivu ivicu ili ivicu koja odgovara boji pozadine, a zatim promijenite njene parametre pri lebdenju (primjer 3). Tada neće doći do pomaka elementa, jer je okvir u početku već tu. Ali uvijek imajte na umu da je širina elementa zbir vrijednosti širine, granice s lijeve strane i granice s desne strane. Isto je i sa visinom.

Primjer 3: Okvir pri lebdenju

Ivica oko polja obrasca

Neki pretraživači (Chrome, Safari, najnovije verzije Opera) prikazuje malu ikonu oko polja obrasca kada dobiju fokus. okvir u boji(Sl. 2). Da biste ga uklonili, dovoljno je dodati vrijednost none svojstvu outline u stilovima, kao što je prikazano u primjeru 4.

Rice. 2. Okvir oko polja

Primjer 4. Uklonite okvir

Okviri preko box-shadow

Iako je svojstvo box-shadow namijenjeno za dodavanje sjene oko elementa, može se koristiti i za kreiranje ivica, i to onih koje se ne mogu učiniti s border ili outlineom. To je zbog činjenice da broj sjenki može biti neograničen, čiji su parametri navedeni odvojeni zarezima.

Da biste dobili okvir, prva tri parametra treba postaviti na nulu, oni su odgovorni za položaj sjene i njeno zamućenje. Četvrta opcija u ovaj slučaj je odgovoran za debljinu ivice, a peti postavlja boju ivice. Za drugi okvir, četvrti parametar je jednak zbiru debljina dva okvira.

Primjer 4 pokazuje kako dodati dva okvira i jednu ivicu desno koristeći jedno svojstvo sjene okvira.

Primjer 4: Korištenje box-shadow

Rezultat ovaj primjer prikazano na sl. 3.

Rice. 3. Okviri kreirani svojstvom box-shadow

Za kontrolu granice elementa koristite generičko svojstvo granica. Ovo svojstvo vam omogućava da postavite širinu, stil i boju ivice elementa u jednoj deklaraciji.

Ova tri svojstva (širina, stil i boja ivice) mogu se postaviti u jednoj deklaraciji. Evo primjera:

Stil ivice možete odrediti samo na jednoj strani elementa. Da biste to učinili, koristite svojstva border-top (gornja granica), border-right (desna ivica), border-bottom (donja ivica), border-left (lijeva ivica).

U ovom primjeru, svaka strana bloka ima svoju debljinu ivice, stil i boju.

Razmislite o tome kako CSS pomoć možete kreirati ovakav oblik:

Vrijednosti obruba - debljina, stil i boja - mogu se zasebno postaviti pomoću posebnih svojstava.

• border-style - stil ivice.
• border-width - širina ivice.
• border-color - boja ivice.

Razmotrimo svaku od vrijednosti zasebno.

Nekretnina u stilu granice. Border style.

granično vlasništvo-style postavlja stil ivice. U CSS-u, u HTML razlike, ivica elementa može biti bilo što osim čvrste. Važeće vrijednosti za stil obruba su:

1. nema - nema granice (podrazumevano).
2. čvrsta - čvrsta ivica.
3. duplo - duplo rub.
4. isprekidana - tačkasta granica.
5. tačkasta - granica sačinjena od niza tačaka.
6. greben - "greben" granica.
7. žlijeb - rubni "žlijeb".
8. umetnuti - umetnuti rub.
9. početak - ekstrudirana granica.

Primjeri kako izgledaju.

bez granice (nema)

čvrsta ivica (puna)

dvostruki obrub (dvostruki)

tačkasta granica (tačkasta)

tačkasta granica (isprekidana)

ivica utora (žlijeb)

granica grebena

uvučena granica (umetnuti)

ekstrudirani obrub (početak)

Usput, ako boju ivice postavite na crnu za okvir grebena, dobit ćete sljedeći rezultat.

Div blok sa crnim rubom i stilom grebena.

Ivica izgleda kao čvrsta, ali to je zato što je stil grebena kreiran dodavanjem efekta crne sjene, a crni efekat na crnoj ivici nije vidljiv.

Uz pomoć svojstva border-style, stil ivice se može postaviti ne samo za sve strane bloka. Moguće je postaviti više vrijednosti za isto svojstvo border-style, ovisno o broju vrijednosti, stil ivice će biti dodijeljen različitom broju strana bloka. Možete postaviti jednu, dvije, tri ili četiri vrijednosti. Pogledajmo primjere za svaki slučaj.

Jedna vrijednost (puna) - stil ivice je postavljen za sve strane bloka.

Dvije vrijednosti (puna dupla) - prva vrijednost postavlja stil za gornju i donju stranu, druga za stranu.

Tri vrijednosti (puna dvostruka tačka) - prva vrijednost za gornju stranu, druga za strane, treća za donju.

Četiri vrijednosti (puna dvostruka isprekidana tačka) - svaka vrijednost za jednu stranu u smjeru kazaljke na satu počevši od vrha.

Svojstvo širine granice. Debljina ivice.

Svojstvo border-width se koristi za postavljanje širine ivice elementa. Debljina ivice se može specificirati u bilo kojoj apsolutnoj jedinici mjere, kao što su pikseli.

Kao i svojstvo u stilu granice, svojstvo se također može postaviti na jednu do četiri vrijednosti. Razmotrite primjere za svaki slučaj.

Primjer koda:

U obrascu postoje i vrijednosti za svojstvo širine granice ključne riječi. Ukupno ih ima tri:

• tanka - tanka ivica;
• srednje - srednje debljine;
• debela - debela ivica;

Debljina ivice: tanka.

Debljina ivice: srednja.

Debljina ivice: debela.

Svojstvo boje granice. Boja ivice.

Mogućnost boje granice se koristi za kontrolu boje ivice. Boje za ovo svojstvo mogu se postaviti bilo kojim od metoda opisanih u članku " Boje u CSS-u“, odnosno:

• Heksadecimalni zapis (#ff00aa) boje.
• RGB format- rgb(255,12,110) . RGBA format za CSS3.
• HSL formati i HSLA za CSS3.
• Naziv boje, na primjer crna (crna). Cijela lista navedeni su nazivi boja css tabela imena boja.

Svojstvo boje granice također može imati jednu do četiri vrijednosti i tretira ih slično prethodnim svojstvima.

Jedna vrijednost (crvena).

Dvije vrijednosti (crveno crna).

Tri vrijednosti (crveno crno žuto).

Četiri vrijednosti (crvena crna žuta plava).

Sada se vratimo na gore navedeni zadatak i nacrtajmo figuru:

Evo koda koji crta takav oblik, samo veći:

Zasebno podešavanje vrijednosti za strane

Kao što je gore spomenuto, možete specificirati vrijednosti svojstva granice samo za jednu stranu bloka. Za ove namjene postoje svojstva:

• granica-vrh (gornja granica)
• granica desno (desna granica)
• border-bottom (donja granica)
• granica-lijevo (lijeva granica)

Da vas podsjetim da su za sva svojstva navedene tri vrijednosti (debljina, stil i boja) bilo kojim redoslijedom. Ali postoje svojstva koja vam omogućavaju da postavite debljinu, boju i stil za svaku stranu zasebno. Pisanje ovih svojstava je izvedeno iz gore navedenog.

Opcije gornjeg ruba (border-top ).

• border-top-color - postavlja boju gornjeg ruba elementa.
• border-top-width - postavlja širinu gornje ivice elementa.
• border-top-style - postavlja stil gornje ivice elementa.

Opcije desne granice (border-desno).

• border-right-color - postavlja boju desne ivice elementa.
• border-right-width - postavlja širinu desne ivice elementa.
• border-right-style - postavlja stil desne ivice elementa.

Opcije donjeg ruba (border-bottom).

• border-bottom-color - postavlja boju donjeg ruba elementa.
• border-bottom-width - postavlja širinu donje ivice elementa.
• border-bottom-style - postavlja stil donje granice elementa.

Opcije lijevog ruba (border-lijevo).

• border-left-color - postavlja boju lijevog ruba elementa.
• border-left-width - postavlja širinu lijeve ivice elementa.
• border-left-style - postavlja stil lijeve ivice elementa.

Primjer korištenja ovih svojstava:

Svojstvo radijusa granice. Zaokruživanje uglova granice.

Svojstvo border-radius služi za zaokruživanje uglova granica elementa. Ovo svojstvo se pojavilo u CSS3 i radi ispravno u svim moderni pretraživači, sa izuzetkom Internet Explorer 8 (i starije verzije).

Vrijednosti mogu biti bilo koji broj koji se koristi u CSS-u.

radijus granice svojstva: 15px.

Ako okvir bloka nije postavljen, dolazi do zaokruživanja s pozadinom. Evo primjera zaokruživanja bloka bez obruba, ali s bojom pozadine:

radijus granice svojstva: 15px.

Postoje svojstva za zaokruživanje svakog pojedinačnog ugla elementa. Ovaj primjer koristi sve njih:

border-top-left-radius: 15px; granica-gore-desno-radijus: 0; border-bottom-right-radius: 15px; granica-dolje-lijevo-radijus: 0;

radijus granice svojstva: 15px.

Iako se ovaj kod može napisati u jednoj deklaraciji: border-radius : 15px 0 15px 0 . Poenta je da za svojstva radijusa granice Možete postaviti od jedne do četiri vrijednosti. Tabela ispod rezimira pravila koja regulišu takve deklaracije.

Pažljivim proučavanjem ove tabele, možete shvatiti da će najkraći unos za željeni stil biti: border-radius : 15px 0 . Postoje samo dvije vrijednosti.

Malo vežbe

Nacrtaj limun koristeći CSS.

Evo koda za takav blok:

Margina: 0 auto; /* Centrirajte blok */ širina: 200px; visina: 200px; pozadina: #F5F240; granica: 1px čvrsta #F0D900; border-radius: 10px 150px 30px 150px;

Već smo nacrtali figuru:

Sada ostavimo trougao od njega:

Kod trougla je:

Margina: 0 auto; /* Centrirajte blok */ padding: 0px; širina: 0px visina: 0; ivica: 30px puna bijela; boja donje granice: crvena;