Granice se koriste na HTML stranicama za razgraničenje i isticanje sadržaja. Kad na stranici ima puno podataka i želite skrenuti pažnju korisnika na određene dijelove, tada upotrijebite obrube oko tog sadržaja. U ovom članku o Granicama u CSS-u razgovarat ću o sljedećim temama:
- Kada koristiti Borders
- Granice u CSS-u
- Atributi CSS granice
- Zadane vrijednosti za atribute obruba
- Definirajte granice skraćeno
- Bilješke koje treba imati na umu prilikom dizajniranja granica u CSS-u
Kada koristiti Borders
Standardna praksa je korištenje CSS oznaka obruba za definiranje granica na HTML stranicama za:
- Oko važnih naslova
- Da bi se istaknuli postscript ili važne bilješke
- Da biste priložili slike, ilustracije, citate ljudi, videozapise
- Da biste skrenuli pozornost na cijene, rokove ili tako važne informacije
Možda biste željeli pročitati članak prije nego što nastavite s učenjem o CSS granicama.
Za cjelovit CSS vodič, posjetite Edureka CSS Vodič za početnike . Dobit ćete izvrsnu informaciju o načinu na koji će se CSS koristiti za povećanje HTML web dizajna.
imenski prostori u c ++
Granice u CSS-u
CSS granice mogu se dodijeliti različitim odjeljcima HTML stranice, bilo da se radi o zaglavljima ili odlomcima. Počnimo s primjerom. Ovdje definiramo granicu oko naslova i drugu granicu oko teksta odlomka.
tijelo {background-color: lightblue} h1 {align-text: center-style-border: solid} p {font-family: verdana-font size: 20px border-style: dotted}Granica i oko odlomka!
Atributi CSS granice
CSS granice imaju 3 glavna atributa
- stil:Thestilatribut definira uzorak obruba.
- boja: Boja može biti bilo koja iz skupa definirana CSS bojama.
- širina: Širina se koristi za promjenu debljine obruba kako bi ga učinili istaknutijim.
U gornjem primjeru vidjeli smo da je definiran samo jedan atribut obruba, to je njegov stil. Ostali atributi kad nisu definirani poprimaju zadane vrijednosti. Postoji još jedan atribut koji se naziva radijus i koji se rjeđe koristi. Koristi se za zaobljenje rubova obruba.
- u granicama atribut
| Stil | Opis |
| obrub: čvrst | |
| obrub: dvostruko | |
| obrub: žlijeb | |
| obrub: greben | |
| obrub: uložak | |
| obrub: početak | |
| obrub: nema | |
| obrub: skriveno | |
| obrub: točkasto | |
| obrub: isprekidano |
Primijetili biste da postoji i opcija 'bez granice' i 'skrivena granica'. Programer može jednostavno izbjeći definiranje granice, zašto je izričito definirati kao 'skrivenu granicu'? To se radi radi korištenja prostora i poravnanja s ostalim elementima na stranici.
Stilovi obruba mogu se miješati i unutar elementa. U tu svrhu mogu se zasebno definirati 4 pojedinačne bočne stranice različitim stilovima. To se može učiniti na 2 načina. Ili definirajte sve 4 strane u jednoj oznaci. U ovom slučaju, brojanje započinje od gornjeg retka, a zatim se kreće u smjeru kazaljke na satu. Alternativno, svaka od 4 granične linije također se može definirati u pojedinačnim oznakama. Oba su slučaja prikazana u sljedećem primjeru.
| Stil | Opis |
| obrub: točkasta isprekidana puna dvostruka stil obruba: točkasto rub-desno-stil: isprekidano stil obruba-dna: čvrst obrub-lijevo: dvostruko |
- obrub-boja atribut
Atribut boje za obrub može se postaviti na više načina. Ovo je slično postavljanju boje za ostale elemente. Boje se mogu postaviti na jedan od sljedećih načina:
- Ime - navedite naziv boje, poput 'plava'. Također možete isprobati neke otmjene opcije boja poput 'BlanchedAlmond'!
- Hex - navedite hex vrijednost, poput '# ff0000'
- RGB - postavite RGB kod. Na primjer, rgb (255,255,0) znači žuta.
- postavljanje - poput 'prozirnog' ili 'neprozirnog'
- širina obruba atribut:
Svojstvo width, kako i samo ime govori, definira debljinu 4 bočne stranice. Ako je definirana jedna vrijednost, ona je za sve strane, inače se također mogu postaviti pojedinačne vrijednosti širine.
Širina se može odrediti u bilo kojoj standardnoj jedinici, poput piksela ('px'), točaka ('pt') ili u centimetrima ('cm'). Širinu možete odrediti i pomoću unaprijed definiranih vrijednosti 'debeo', 'tanak' i 'srednji'.
| Stil | Opis |
| širina obruba: 10 piksela | |
| širina obruba: 0,1 cm | |
| širina obruba: srednja |
- granica-radijus atribut
Svrha definiranja radijusa je dobiti zaobljene kutove za obrub. Faktor radijusa definira opseg zaobljenosti. Što su vrijednosti veće, uglovi postaju zakrivljeniji. Kao standardna praksa, vrijednosti radijusa drže se između 1-3 puta veće širine obruba.
Sljedeći će kôd generirati:
širina obruba: 10 piksela
radijus obruba: 30 piksela
Zadane vrijednosti za atribute obruba
Jedini obvezni atribut je stil . Ako nedostaje stil, obrub se neće pojaviti.
Ako boja nije navedena, boja iz osnovnog elementa uzima se kao zadana vrijednost. Na primjer, ako je boja teksta odlomka definirana kao ‘plava’, tada bi zadana boja obruba također bila plava. U slučaju da čak i za element ne postoji definicija boje, tada je zadana boja 'crna'.
Zadana vrijednost za širinu je 'srednja'.
Definirajte granice skraćeno
Neki programeri radije definiraju atribute obruba u sažetoj oznaci u jednom retku. Ovaj skraćeni format pomaže u smanjivanju redova koda, a stručnjaci programeri preferiraju ovaj format. Korištenje stenografskog formata preporučuje se kada je definicija granice jednostavna i prilično standardizirana. Međutim, ako trebate istaknuti svaku stranu obruba u drugačijem stilu, tada se morate držati formata definiranja pojedinih oznaka.
Koristi se sljedeći kod:
obrub: isprekidano
boja obruba: zelena
širina obruba: 5 piksela
obrub: isprekidana zelena 5 piksela
Bilješke koje treba imati na umu prilikom dizajniranja granica u CSS-u
Nemojte koristiti previše obruba na stranici, to može odvlačiti pažnju i otežati korisniku fokusiranje.
Važno je održavati dosljednost u obrubu i bojama. Elementi na istoj razini hijerarhije na stranici moraju imati sličan stil obruba i širinu radi ujednačenosti. Na primjer, ako stavak definiran je čvrstim obrubom i širinom od 5 piksela, održavajte ovaj format u svim ostalim stavak elementi tijekom dizajna web stranica.
Pridržavajte se jednog stila definicija oznaka. Neki su programeri zadovoljni definicijama prečaca sa svim vrijednostima dodijeljenim jednom granica označiti. Neki drugi preferiraju eksplicitni popis svih oznaka zbog širine, boje i stila. Konvencija glasi da su pojedinačne oznake kad su na stranici potrebni složeni ukrasi obruba posebno navedene. To pomaže tijekom ispravljanja pogrešaka takvih prilagođenih definicija granica. Za uobičajene slučajeve bila bi dovoljna samo definicija prečaca.
pretvoriti niz u niz php
Nadam se da ste pronašli tražene podatke na CSS granicama i wtime smo došli do kraja ovog članka Granice u CSS-u.
Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.
Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare bloga 'Granica u CSS-u', a mi ćemo vam se javiti.