Padding, Margin and Border - postavljamo unutrašnje i eksterne paddinge u CSS-u, kao i okvire za sve strane (gore, dolje, lijevo, desno). CSS granica: radijus, boja, stil i druga css svojstva

CSS okvir Element je jedna ili više linija koje okružuju sadržaj elementa i njegove dopune. Granica se postavlja korištenjem kratke granice svojstva. Stil okvira se postavlja pomoću tri svojstva: stil, boja I širina.

Dekoracija ivica i ivica HTML elemenata pomoću CSS svojstava

1. Border-stil

Podrazumevano, ivice se uvek crtaju na vrhu pozadine elementa, a pozadina se proteže do spoljne ivice elementa. Stil okvira određuje njegov prikaz, bez toga svojstva okvira uopće neće biti vidljiva. Za element, možete postaviti obrub za sve strane u isto vrijeme pomoću svojstva border-style, ili za svaku stranu zasebno koristeći kvalifikaciona svojstva u stilu obruba, itd. Nije naslijeđen.

obrubni stil (obrub-vrh-stil, obrub-desno-stil, obrub-dono-stil, obrub-lijevo-stil)
vrijednosti:
nijedan	Zadana vrijednost znači da nema okvira. Također uklanja granicu elementa iz grupe elemenata sa vrijednošću ovog skupa svojstava.
skriveno	Ekvivalentno ničemu.
tačkasta	tačkasta
isprekidano	isprekidano
solidan	solidan
duplo	duplo
groove	groove
greben	greben
umetnuti	umetnuti
početak	početak
{1,4}	Nabrojite četiri različita stila za granice elementa odjednom, samo za svojstvo border-style: (stil obruba: puna tačkasta nijedna tačkasta;)
početni
nasljediti

Sintaksa

P (stil ivice: čvrst;) p (stil ivice vrha: čvrst;)

2. Boja ivice Boja ivice

Svojstvo postavlja boju okvira sa svih strana u isto vrijeme. Možete koristiti svojstva preciziranja da postavite prilagođenu boju za ivicu svake strane elementa. Ako nije navedena boja obruba, bit će ista kao i boja teksta elementa. Ako element nema tekst, tada će boja ivice biti ista kao i boja teksta roditeljskog elementa. Nije naslijeđen.

boja ivice (obrub-gore-boja, ivica-desna-boja, ivica-donja-boja, obrub-lijeva-boja)
vrijednosti:
transparentan	Postavlja prozirnu boju za okvir. U tom slučaju ostaje širina okvira. Može se koristiti za promjenu boje ivice kada se mišem pređe preko elementa kako bi se izbjeglo pomicanje elementa.
boja	Boja okvira se postavlja pomoću vrijednosti svojstava. (border-color: #cacd58;)
{1,4}	Nabrojite četiri različite boje za ivice elementa u isto vrijeme, samo za svojstvo border-color: (Boja obruba: #cacd58 #5faf8a #b9cea5 #aab238;)
početni	Postavlja vrijednost svojstva na njegovu zadanu vrijednost.
nasljediti	Nasljeđuje vrijednost svojstva od roditeljskog elementa.

Sintaksa

P (boja obruba: #cacd58;)

3. Širina ivice

Širina okvira je određena pomoću jedinica dužine ili ključnih riječi. Ako je svojstvo border-style postavljeno na ništa i ivica elementa je postavljena na neku širinu, tada je širina ivice postavljena na nulu u ovom slučaju. Nije naslijeđen.

Sintaksa

P (širina ivice: 2px;)

4. Postavljanje okvira sa jednim svojstvom

Svojstvo granice vam omogućava da kombinujete sljedeća svojstva: border-width, border-style, border-color, na primjer:

Div ( širina: 100px; visina: 100px; ivica: 2px čvrsto siva; )

U ovom slučaju, navedena svojstva će se primijeniti na sve ivice elementa istovremeno. Ako bilo koja vrijednost nije specificirana, zadana vrijednost će zauzeti njeno mjesto.

5. Postavljanje okvira za jednu ivicu elementa

U slučaju kada trebate postaviti drugačiji stil ivica elementa, možete koristiti kratku notaciju za odgovarajuću ivicu.
Dolje navedena svojstva kombinuju sljedeća svojstva u jednu deklaraciju: border-width, border-style i border-color. Lista svojstava je navedena u datom redoslijedu, dok se jedna ili dvije vrijednosti mogu izostaviti, u kom slučaju će njihove vrijednosti poprimiti zadane vrijednosti.

Stil gornje ivice je postavljen pomoću svojstva border-top, donja granica je border-bottom, lijeva granica je border-left, a desna granica je border-right.

Sintaksa

P (bord-top: 2px puna siva;)

6. Kontura

Svojstvo postavlja vanjsku granicu oko elemenata (tj. izvan normalne granice). Glavna svrha ovog svojstva je da istakne element. Za razliku od svojstva granice, primjena ovog svojstva ne utječe na veličinu ili poziciju elementa, kao obris se prikazuje na vrhu okvira elementa, što zauzvrat može uzrokovati preklapanje margina elementa i susjednih područja.

Također, vanjski obris, za razliku od ivice elementa, okružuje element sa svih strana, uokvirujući ga u potpunosti.

Vanjski obris je uvijek pravougaonog oblika i ne prati ivicu okvira koji je postavljen na radijus granica.

Svojstvo outline vam omogućava da kombinujete sljedeća svojstva: boja-koture, stil-oblik, širina-koture. Ako bilo koja vrijednost nije specificirana, zadana vrijednost će zauzeti njeno mjesto.

Div (širina: 100px; visina: 100px; obris: #cacd58 solid 2px; )

6.1. Outline stil outline-style

Izgled linije vanjske konture postavljen je na isti način kao i stil okvira elementa. Nije naslijeđen.

Sintaksa

P (stil obrisa: greben;)

6.2. Boja obrisa boja konture

Boja vanjskog obrisa može se podesiti samo kada je postavljen stil obrisa. Nije naslijeđen.

Sintaksa

P (stil konture: greben; boja konture: srebrna; )

6.3. Širina vanjskog obrisa širina obrisa

Debljina linije vanjske konture postavlja se na isti način kao i debljina okvira elementa. Nije naslijeđen.

Sintaksa

P (stil obrisa: tačkasta; širina obrisa: 5px; )

Svojstvo CSS granice prilagođava se da kreira ivicu objekta, odnosno debljinu ivice, njegovu boju i stil. Ovo svojstvo se široko koristi u HTML-u. Možete kreirati različite efekte za bolju percepciju sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje stranice, meni itd.

1. CSS granična sintaksa

granica : granica-širina border-style boja granice | nasljediti;

• border-width - širina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanak, srednji, debeli (razlikuju se samo u širini piksela)
• border-style - stil prikazanog okvira. Može uzeti sljedeće vrijednosti
  • ništa ili skriveno - poništava granicu
  • tačkasti - tačkasti okvir
  • isprekidani - okvir crtice
  • puna - jednostavna linija (najčešće se koristi)
  • duplo - dupli okvir
  • žljeb - žljebljena 3D ivica
  • greben, umetak, početak - različiti 3D efekti okvira
  • naslijediti - primjenjuje se vrijednost roditeljskog elementa
• border-color - boja ivice. Može se navesti korištenjem određenog naziva boje ili u RGB formatu (pogledajte html nazive boja za stranicu)

Bilješka

Vrijednosti u svojstvu CSS granice mogu se postaviti bilo kojim redoslijedom. Najčešće korištena sekvenca je "boja u stilu debljine".

2. Primjeri s različitim CSS granicama

2.1. Primjer. Različiti stilovi obruba u stilu obruba

u stilu granice: isprekidano

u stilu granice: isprekidano

rubni stil: čvrst

obrubni stil: dupli

rubni stil: žljeb

rubni stil: greben

Border-style: umetnuti

obrubni stil: početak

Četiri različita okvira

u stilu obruba: tačkasta

u stilu granice: isprekidano

rubni stil: čvrst

obrubni stil: dupli

rubni stil: žljeb

rubni stil: greben

Border-style: umetnuti

obrubni stil: početak

Četiri različita okvira

2.2. Primjer. Promjena boje ivice pri lebdenju

Ovaj primjer je vrlo jednostavan, ali zanimljiv. Pokazuje kako možete koristiti :hover pseudo-klasu i CSS granicu za kreiranje jednostavnih efekata (poput menija).

Kada pređete mišem preko bloka, boja okvira će se promijeniti.

Evo kako to izgleda na stranici:

2.3. Primjer. Kako napraviti transparentnu granicu

Okvir se može učiniti providnim. Ovaj efekat je rijedak, ali ponekad može biti vrlo koristan za web dizajnere. Za postavljanje prozirnosti potrebno je koristiti postavku boje u obliku RGBA (R, G, B, P) , gdje je posljednji parametar prozirnost (stvarni broj od 0.0 do 1.0)

Evo kako to izgleda na stranici:

3. Debljina ivice: svojstvo širine granice

Postavlja debljinu linije. Prethodno smo ga postavili u opis jedne granice.

CSS sintaksa

granica-širina: tanki | srednje | debelo | značenje;

• tanka - debljina tanke linije
• srednja - prosečna debljina linije
• debljina - debljina debljine linije

Ispod je nekoliko primjera. Najneobičnija stvar će biti različita debljina obruba sa svake strane.

granica širine: tanka

granica širine: srednja

granica širine: debela

Različite debljine na ivicama

Evo kako to izgleda na stranici:

granica širine: tanka

granica širine: srednja

granica širine: debela

Različite debljine na ivicama

4. Kako napraviti okvir okvira sa samo jednom ivicom (borderom)

Svojstvo CSS granice ima izvedena svojstva za postavljanje jednostranih granica na elementu:

• border-top - za postavljanje gornje granice (gornje granice)
• border-bottom - za postavljanje donje granice (donje granice)
• border-right - za postavljanje granice na desnoj strani (desna granica)
• border-left - za postavljanje granice na lijevoj (lijevoj ivici)

Ove granice se mogu kombinovati, tj. napišite okvir za svaki smjer. Sintaksa je potpuno ista kao i za obrub.

Tu su i nekretnine

• border-top-color - postavite boju gornjeg ruba
• border-top-style - postaviti stil gornje granice
• border-top-width - postavite širinu gornje ivice
• itd. za svaki pravac

Po mom mišljenju, lakše je napisati sve u red nego proizvesti dodatni tekst u stilovima. Na primjer, sljedeća svojstva će biti ista

/* Opis dva identična stila: */

4.1. Primjer. Prekrasan okvir za isticanje citata

Primjer okvira citata

Evo kako to izgleda na stranici:

Primjer okvira citata

Bilješka
Možete postaviti zasebnu granicu za svaku stranu.

5. Kako napraviti više ivica na html elementu

Ponekad morate napraviti više ivica. Dajemo primjer

5.1. Prva opcija s više ivica

Evo kako to izgleda na stranici:

Postoji drugi put kroz preklapanje senki.

5.2. Preklapanje senki za kreiranje više ivica

Evo kako to izgleda na stranici:

6. Zaokruživanje uglova na granicama (granica-radijus)

Da biste kreirali prelepe ivice, koristite svojstvo CSS border-radius (dostupno samo u CSS3). Pomoću njega možete napraviti zaobljene uglove, što stvara potpuno drugačiji izgled. Na primjer

7. CSS uvučena linija

Reljefne linije mogu izgledati spektakularno na tamnoj pozadini, što nije prikladno za svaku lokaciju.

---

Evo kako to izgleda na stranici:

Da biste pristupili granici iz JavaScripta, morate napisati sljedeću konstrukciju:

document.getElementById("elementID").style.border="VRIJEDNOST "(!LANG:

Siguran sam da ste već upoznati sa svojstvom css granice. Hoćete li naučiti nešto novo što prije niste znali o css granicama? Pa, ne samo da ćete naučiti, već ćete vidjeti i neke nove stvari koje nikada prije niste znali!

Ne samo da se CSS3 može koristiti za zaokruživanje uglova, već se i čisti CSS kod može koristiti za kreiranje složenih oblika. Ranije ste mogli koristiti pozadinsku sliku da biste ostavili utisak zaobljenih uglova. Zahvaljujući novim tehnikama granica, to možemo učiniti u čistom CSS-u.

Osnove korištenja css granica

Vjerovatno ste već upoznati sa standardnom upotrebom graničnog svojstva:

Ivica: 1px puna crna;

Kod iznad će prikazati ivicu od 1px koja će biti crna. Jednostavno i lako. Također možete malo proširiti sintaksu:

granica širine: debela; obrubni stil: čvrst boja ivice: crna

Kao dodatak, možete koristiti određene vrijednosti za svojstvo širine granice, tri ključne riječi: tanko, srednje, debelo.

Ali korištenje proširene sintakse nije uvijek praktično. Pogledajmo primjer gdje želite promijeniti boju ivice bloka kada pređete mišem preko njega. U tom slučaju, korištenje sintakse stenografije je mnogo lakše:

Box ( granica: 1px puna crvena; ) .box:hover (obrub: 1px puna zelena; )

Elegantnije i jednostavnije se može uraditi ovako:

Kutija ( granica: 1px puna crvena; ) .box:hover (boja obruba: zelena; )

Kao što vidite, napredna tehnika je korisna i kada mijenjamo samo neka svojstva: širinu, stil, boju i druge.

granica-radijus

granica-radijus je "zlatno" svojstvo CSS3 - prvo, najčešće svojstvo koje je postalo praktično i korisno. Osim IE8 i nižeg, svi pretraživači prikazuju zaobljene uglove sa ovim.

Ipak, potrebno je koristiti posebne prefikse za Webkit i Mozilla da bi stil bio ispravan.

webkit-border-radius: 10px; -moz-border-radius: 10px; radijus granice: 10px

Danas možemo ukloniti posebne prefikse i koristiti standardni oblik radijusa granice.

Još jedna prednost je da možemo koristiti posebne vrijednosti za svaku stranu bloka:

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

U kodu iznad, postavljanjem radijusa granice-gore-desno i radijusa granice-dolje-lijevo na "nulu", mogu se postići zadivljujući oblici. Iako element može naslijediti neka svojstva koja će morati biti poništena.

Kao margina i padding, možemo sažimati sintaksu:

/* gore lijevo, gore desno, dolje desno, dolje lijevo */ border-radius: 20px 0 30px 0;

Kao primjer, koristeći svojstvo border-radius, pokazat ću vam "limun" koji dizajneri često koriste kada postavljaju web stranice:

Limun ( širina: 200px; visina: 200px; pozadina: #F5F240; granica: 1px čvrsta #F0D900; radijus granice: 10px 150px 30px 150px; )

Ići dalje od osnova

Kod mnogih dizajnera, svo znanje, u oblasti css granice svojstva, završava se ovdje. Ali postoje neke druge super stvari koje možete koristiti za stvaranje nevjerovatnih stvari!

Složene css granične strukture

Postoji mnogo tehnika za projektovanje složenih graničnih struktura. Na primjer, razmotrite sljedeće...

u stilu granice

Uvijek koristimo najpoznatije pune, isprekidane i tačkaste osobine. Ali postoji nekoliko drugih svojstava u stilu granice: žlijeb i greben.

Bord: 20px utor #e3e3e3;

Ili u proširenoj sintaksi:

border-color: #e3e3e3; granica širine: 20px rubni stil: žljeb;

Iako su ova svojstva korisna, ona nisu osnova za kreiranje složenih okvira.

nacrt

Najpopularnija tehnika dvostruke granice je korištenje svojstva outline.

Kutija (obrub: 5px čvrsta #292929; obris: 5px čvrsta #e3e3e3; )

Ova metoda odlično funkcionira, iako nas ograničava na samo dva okvira. Ponekad je potrebno da napravite ivicu gradijenta koja se sastoji od mnogo slojeva... kako onda?

Pseudo elementi

Kada tehnika obrisa nije dovoljna, alternativni lijek je korištenje pseudo elemenata :prije i :poslije. Pomoću kojih elementu možete dodati dodatne ivice:

Kutija ( širina: 200px; visina: 200px; pozadina: #e3e3e3; pozicija: relativna; granica: 10px puna zelena; ) /* Kreirajte dva okvira sa istom širinom kontejnera */ .box:after, .box:before ( sadržaj: ""; pozicija: apsolutna; gore: 0; lijevo: 0; dolje: 0; desno: 0; ) .box: poslije ( granica: 5px puna crvena; obris: 5px puna žuta; ) .box:prije ( granica : 10px puna plava; )

Ne izgleda baš elegantno, ali barem funkcionira. Malo je problematično nositi se sa redoslijedom boja unutar ... ali možete razumjeti.

Box Shadow

Zanimljiv "djetinjast" način za stvaranje ovog efekta je korištenje svojstva CSS3 box-shadow:

Kutija ( granica: 5px puna crvena; sjena okvira: 0 0 0 5px zelena, 0 0 0 10px žuta, 0 0 0 15px narandžasta; )

U ovom slučaju, bili smo pametniji, koristeći namjensko svojstvo box-shadow. Promjenom parametara x, y, zamućenja na nulu, možemo koristiti različite boje za kreiranje više okvira.

Ali postoji problem, u starijim pretraživačima koji ne razumiju svojstvo box-shadow, bit će vidljiv samo jedan crveni okvir od 5px.

“Zapamti! Dizajn sajta treba da izgleda unakrsno, odnosno isti u svim pretraživačima. Uključujući starije verzije.

Promjena uglova

Pored jednostavnog graničnog radijusa koji se koristi, možemo navesti dva odvojena - odvajajući ih sa / odredićemo horizontalni i vertikalni radijus.

Na primjer:

Granični radijus: 50px / 100px /* horizontalni radijus, vertikalni radijus */

... ovo je ekvivalentno:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Ova tehnika je prikladna za stvaranje jedinstvenih oblika blokova. Na primjer, evo kako stvoriti efekt umotanog papira:

Kutija (širina: 200px; visina: 200px; pozadina: #666; granica-gore-lijevo-radijus: 15em 1em; granica-dolje desno-radijus: 15em 1em; )

CSS oblici koji koriste obrub

Ova tehnika pokazuje kako možete kreirati css forme koristeći elemente sa nultim dimenzijama visine i širine. Iznenađen? Pogledajmo primjer...

Za sljedećih nekoliko primjera koristit ćemo sljedeće oznake:

…i sljedeći osnovni stil:

Kutija (širina: 200px; visina: 200px; pozadina: crna; )

Najčešća upotreba CSS oblika je kreiranje zaobilazne strelice. Tajna ove strelice leži u stvaranju obruba s različitim bojama za svaku od strana. Zatim postavite atribute širine i visine na 0.

Dodijelimo klasu strelice div bloku:

Strelica ( širina: 0; visina: 0; ivica-gore: 100px puna crvena; obrub-desno: 100px puna zelena; obrub-dno: 100px puna plava; obrub-lijevo: 100px puna žuta; )

Da bismo demonstrirali, prvo koristimo proširenu sintaksu. Zatim možemo ukloniti dodatni kod koristeći skraćenu sintaksu:

Strelica (širina: 0; visina: 0; ivica: 100px puna; boja ivice: crvena zelena plava žuta; )

Zanimljivo, zar ne? Sada ćemo postaviti transparentne boje na sve strane osim plave strane.

Strelica ( širina: 0; visina: 0; ivica: 100px puna; boja donje granice: plava; )

Odlično je ispalo! Ali ovo je u suprotnosti semantički raspored, kreirajte .arrow div, samo da dodate strelicu na stranicu. U tu svrhu možemo koristiti pseudoelemente, što ćemo sada učiniti.

Kreirajte govorni balon

Da bismo kreirali oblačić govora, potreban nam je mali komad čistog CSS koda i jedan div blok.

Oblačić govora (pozicija: relativna; boja pozadine: #292929; širina: 200px; visina: 150px; visina linije: 150px; /* okomito u sredini */ boja: bijela; poravnanje teksta: centar; )

Oblačić: poslije ( sadržaj: ""; )

U ovom trenutku ćemo kreirati strelicu koju smo radili ranije, dodati je elementu, a sve što je preostalo je da je pozicioniramo:

Govorni oblačić:nakon (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 10px puna; boja obruba: crvena zelena plava žuta; )

Ako želimo da strelica pokazuje dolje, morat ćemo postaviti sve ivice na transparentne osim gornje.

Govorni oblačić:nakon (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 10px čvrsta; ivica-top-boja: crvena; )

Kada kreiramo ovaj CSS oblik, ne možemo posebno odrediti veličinu strelice. Umjesto toga, možemo postaviti svojstvo border-width, koje će postaviti veličinu strelice. Također ćemo postaviti poziciju strelice na donju sredinu. U skladu s tim, za to koristimo gornju i lijevu vrijednost.

Govorni oblačić:nakon (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 15px čvrsta; ivica-top-boja: crvena; vrh: 100%; lijevo: 50%; )

Osim toga, ostaje nam da damo boju istu kao i blok. Zapamtite, prilikom pozicioniranja morate uzeti u obzir veličinu drugih okvira koji su nevidljivi (15px). Također ćemo dati bloku zaokruživanje na uglovima.

Speech-bubble ( /* ... ostali stilovi */ border-radius: 10px; ) .speech-bubble:after (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; granica: 15px čvrsta; ivica -top -color: #292929; vrh: 100%; lijevo: 50%; margin-left: -15px; /* podešavanje širine ivice */ )

Nije loše, ha? Koristeći nekoliko css klasa i border trikova, možete stvoriti takvu stvar.

/* Upotreba oblačića govora: Primijenite klasu .speech-bubble i .speech-bubble-DIRECTION kao što je prikazano ispod

*/ .speech-bubble ( pozicija: relativna; boja pozadine: #292929; širina: 200px; visina: 150px; visina linije: 150px; /* okomito središte */ boja: bijela; poravnanje teksta: centar; granica- radijus: 10px; font-family: sans-serif; ) .speech-bubble:after (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; granica: 15px čvrsta; ) /* Postavite strelicu */ .speech-bubble-top:after ( border-bottom-color: #292929; lijevo: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after ( border-left-color : #292929; lijevo: 100%; gore: 50%; margin-top: -15px; ) .speech-bubble-bottom:after ( border-top-color: #292929; vrh: 100%; lijevo: 50%; margin-left: -15px; ) .speech-bubble-left:after ( border-right-color: #292929; vrh: 50%; desno: 100%; margin-top: -15px; )

Bonus! Vertikalno centriranje unutar bloka

Za jedan red teksta može se koristiti visina reda. Ali ako imate dva ili više reda teksta... Najbolje rješenje je postaviti svojstvo prikaza na tablicu i sav tekst staviti u pasus. Evo kako to izgleda u html oznaci: