Kako uvesti različne meje v CSS?

Meje se uporabljajo na straneh HTML za razmejitev in poudarjanje vsebine. Ko je na strani veliko informacij in želite uporabnika opozoriti na določene dele, uporabite obrobe okoli te vsebine. V tem članku o Mejah v CSS bom obravnaval naslednje teme:

• Kdaj uporabiti obrobe
• Meje v CSS
• Atributi meje CSS
• Privzete vrednosti za atribute meje
• Določite meje v okrajšavah
• Točke, ki jih je treba upoštevati pri oblikovanju meja v CSS

Kdaj uporabiti obrobe

Običajna praksa je, da za določanje meja na straneh HTML uporabite meje CSS za:

• Okoli pomembnih naslovov
• Za poudarjanje postscripta ali pomembnih opomb
• Priložiti slike, ilustracije, citate ljudi, video posnetke
• Da bi opozorili na cene, roke ali tako pomembne informacije

Morda boste želeli prebrati na preden se naučite o mejah CSS.

Za izčrpno vadnico CSS obiščite Edureka CSS Vadnica za začetnike . Dobili boste odlične informacije o tem, kako naj se CSS uporablja za povečanje spletnega oblikovanja HTML.

Meje v CSS

Meje CSS je mogoče dodeliti različnim odsekom strani HTML, ne glede na to, ali bodo vključeni naslovi ali odstavki. Začnimo s primerom. Tu določimo obrobo okoli naslova in drugo obrobo okoli besedila odstavka.

mimo reference v javi

body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana velikost pisave: 20px border-style: pikčasto}
Obrobite tudi odstavek!
 

Atributi meje CSS

Meje CSS imajo 3 glavne lastnosti

• slog:Theslogatribut definira vzorec obrobe.
• barva: Barva je lahko katera koli iz nabora, ki ga določajo barve CSS.
• premer: Širina se uporablja za spreminjanje debeline obrobe, da postane vidnejša.

V zgornjem primeru smo videli, da je definiran samo en atribut obrobe, to je njegov slog. Drugi atributi, če niso definirani, prevzamejo privzete vrednosti. Obstaja še en atribut, imenovan radij, ki se redkeje uporablja. Uporablja se za zaokrožitev robov obrobe.

• mejni slog atribut

Opazili boste, da obstajata tudi možnost 'brez meje' in 'skrita meja'. Razvijalec se lahko preprosto izogne ​​definiranju meje, zakaj bi jo izrecno opredelil kot 'skrito mejo'? To se naredi zaradi uporabe prostora in poravnave z drugimi elementi na strani.

Sloge obrobe je mogoče mešati tudi znotraj elementa. V ta namen lahko ločeno definiramo 4 posamezne obrobe z različnimi slogi. To lahko storite na dva načina. Ali definirajte vse 4 strani v eni sami oznaki. V tem primeru se štetje začne od zgornje vrstice in nato premakne v smeri urnega kazalca. Vsako od 4 mej lahko določite tudi v posameznih oznakah. Oba primera sta prikazana v naslednjem primeru.

• obroba-barva atribut

Atribut barve za obrobo lahko nastavite na več načinov. To je podobno nastavitvi barve za druge elemente. Barve lahko nastavite na enega od naslednjih načinov:

• ime - določite ime barve, na primer “modra”. Preizkusite lahko tudi nekaj modnih barvnih možnosti, kot je “BlanchedAlmond”!
• Hex - navedite šestnajstiško vrednost, na primer “# ff0000”
• RGB - nastavite kodo RGB. Na primer, rgb (255,255,0) pomeni rumeno.
• nastavitev - na primer 'prozorna' ali 'neprozorna'

• meja-širina atribut:

Lastnost width, kot že ime pove, določa debelino 4 robnih strani. Če je določena ena vrednost, je to za vse strani, sicer lahko nastavite tudi posamezne vrednosti širine.

Širino lahko določite v kateri koli standardni enoti, na primer v slikovnih pikah (‘px’), točkah (‘pt’) ali v centimetrih (‘cm’). Širino lahko določite tudi z vnaprej določenimi vrednostmi „debel“, „tanek“ in „srednji“.

• meja-polmer atribut

Namen določanja polmera je dobiti zaobljene vogale za obrobo. Faktor polmera določa obseg zaobljenosti. Večja kot je vrednost, bolj ukrivljeni vogali postanejo. Običajno se vrednosti polmera ohranjajo med 1-3 kratno širino obrobe.

vrste funkcij v sql

Ustvarila se bo naslednja koda:

širina obrobe: 10 slikovnih pik
rob polmera: 30 slikovnih pik

Privzete vrednosti za atribute meje

• Edini obvezni atribut je slog . Če slog manjka, meja ne bo prikazana.

• Če barva ni podana, se za privzeto vrednost vzame barva osnovnega elementa. Če je na primer barva besedila odstavka definirana kot 'modra', bi bila tudi privzeta barva obrobe modra. V primeru, da niti za element ni definicije barve, je privzeta barva 'črna'.

• Privzeta vrednost za širino je 'srednja'.

Določite meje v okrajšavah

Nekateri razvijalci raje definirajo atribute obrobe v jedrnati enovrstični oznaki. Ta okrajšana oblika pomaga pri zmanjševanju vrstic kode in strokovni razvijalci imajo raje to obliko. Uporaba kratkega zapisa je priporočljiva, kadar je opredelitev meje preprosta in dokaj standardizirana. Če pa morate vsako stran obrobe označiti v drugačnem slogu, se morate držati oblike določanja posameznih oznak.

Uporablja se naslednja koda:

mejni slog: črtkano
barva obrobe: zelena
širina obrobe: 5 slikovnih pik
obroba: črtkano zeleno 5 slikovnih pik

Točke, ki jih je treba upoštevati pri oblikovanju meja v CSS

• Na strani ne uporabljajte preveč robov, saj lahko moti in uporabniku oteži fokus.

  oznaka c ++ goto

• Pomembno je ohraniti doslednost mejnega sloga in barv. Elementi na isti ravni hierarhije na strani morajo imeti podoben slog obrobe in širino zaradi enakomernosti. Na primer, če odstavek je definirana s trdno obrobo in širino 5 slikovnih pik, ohranite to obliko v vseh drugih odstavek elementi med oblikovanjem spletnih strani.

• Držite se enega sloga definicij oznak. Nekaterim razvijalcem ustrezajo definicije bližnjic z vsemi vrednostmi, dodeljenimi enemu meja oznaka. Nekateri raje izrecno navedejo vse oznake glede na širino, barvo in slog. Dogovor je, da se posamezne oznake, kadar so na strani potrebne podrobne okrasne obrobe, navedejo ločeno. To pomaga med razhroščevanjem takšnih prilagojenih definicij meja. V običajnih primerih bi ustrezala samo definicija bližnjice.

Upam, da ste informacije, ki ste jih iskali, našli na mejah CSS in ws tem smo prišli do konca tega članka o mejah v CSS.

Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega projekta. To usposabljanje vam omogoča, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.

Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje bloga 'Border in CSS' in se vam bomo javili.