Padding i ivice u CSS-u pomoću parametara margina, padding i border. CSS: granica

(zadano:
srednje, bez, bez boje)

širina okvira može biti srednje, tanko ili debelo, ili specificirano u jedinicama.
frame_style može biti nikakav ili čvrst

Argument boja koristi se za definiranje boje ispune za pozadinu elementa dok se učitava, kao i iza prozirnih dijelova elementa. Ako umjesto toga prosledite adresu slike, obrazac će se ponoviti, ispunjavajući obris okvira.

#org
{
širina: 80%;
margin-top:2em;
margin-left: auto;
margin-right: auto;
radijus granice: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px 20px 15px 80px;
margina: 0px 0px 0px 0px;
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
/*IE min-height hack*/
min-visina:40px;
visina:auto !važno;
visina:40px;
overflow:visible;

Pozicija:relativna;
bottom:6px;
desno: 6px;
granica: 1px čvrsta #7e5a25;
/*Podesite poziciju pozadinska slika*/
background-position: 20px 50%;
background-repeat: bez ponavljanja;
text-align: justify;
veličina fonta: 0.9em;

Boja pozadine: #e8e3d4;
background-image: url(baba.gif);
}

• table--> bgcolor=#000000 style="border:2px solid #a3852f"
• td--> style="padding: 5px"

Primjer 4: Upotreba nevidljive granice u tabeli

IN u ovom primjeru Boja pozadine web stranice se unosi kroz svojstvo pozadine dodato selektoru BODY. Iako je bijela zadana boja, ponekad je poželjno da je postavite kako biste spriječili korisnika da odredi svoju boju pozadine kroz postavke pretraživača. Linije tabele takođe treba da imaju istu boju; u ovom slučaju, one nisu jasno vidljive i samo dele ćelije jedna na drugu.

Rezultat 4. primjera prikazan je u nastavku.

Rice. 3. Izgled ivica koje odgovaraju boji pozadine

Pogledajmo neki dokument. Na njemu se formiraju HTML elementi (prikazuju se na ekranu u pretraživaču). Formiraju se na osnovu oznaka. Postavljate oznake, obrađuje ih html parser (dostupan u bilo kojem pretraživaču) i gradi html elemente. A kako će ti elementi izgledati određuje CSS.

Svi html elementi imaju 4 područja: područje za popunjavanje, ivicu, padding i sadržaj elementa. Za šta su oni potrebni?

• Margine su potrebne da bi se regulirala interakcija ovog elementa s granicama drugih elemenata.
• Padding je udaljenost od okvira do sadržaja datog elementa.
• Sadržaj samog elementa. Ovdje je jasno. Ako postoje ugniježđeni elementi, onda se oni nalaze u ovom području.
• Okvir (ivica). Ocrtava granice elementa. Šematski, 4 oblasti se mogu predstaviti na sledeći način:

Treba shvatiti da svaki element leži unutar nekog područja. Ovo područje za element koji se nalazi unutar njega naziva se kontejner. One. kontejner je područje sadržaja roditeljski element. Ovo područje određuje prostor za izgradnju unutrašnjeg elementa. To znači da će se unutrašnji element prilagoditi veličini ovog područja.

Margine

To je kada naš element stupa u interakciju s granicama kontejnera i s granicama susjednih elemenata (onih koji se nalaze pored njega u kodu). Osnovna pravila:

• margin-top: auto|magnitude|% - gornja margina.
• margin-desno: auto|veličina|% - desna margina.
• margin-bottom: auto|magnitude|% - donja margina.
• margin-left: auto|veličina|% - lijeva margina.
• margina: margina-gornja margina-desna margina-donja margina-lijevo – montažno pravilo.

Vrijednost “auto” znači da će pretraživač samostalno analizirati ove vrijednosti. Veličina uvlake može se navesti u sljedećim vrijednostima: em, ex, px. Procenti (%) se izračunavaju iz širine kontejnera (iz oblasti sadržaja roditeljskog elementa). Ako navedete negativnu vrijednost, granice elemenata unutar roditeljskog kontejnera će se sudarati jedna s drugom.

Pravilo „margine“ je složeno; ovdje su naznačene vrijednosti sve 4 margine (počevši od vrha u smjeru kazaljke na satu). primjeri:

Margina: 10px 20px 20px 30px; margina: 10px 20px 30px; - margina s lijeva na desno je ista margina: 10px 20px; - margina od vrha do dna i lijevo-desno je ista margina: 10px; - sve uvlake su iste

Padding

Ovdje ne može biti negativnih vrijednosti, jer Nemoguće je premjestiti sadržaj izvan okvira elementa. Procenti se izračunavaju na osnovu širine kontejnera.

• padding-top: vrijednost|%.
• padding-right: vrijednost|%.
• padding-bottom: vrijednost|%.
• padding-left: vrijednost|%.
• padding: padding-top padding-desno padding-bottom padding-left - prefabricirano pravilo. Slično "marži".

Granice u CSS-u

Svi okviri imaju sljedeće karakteristike:

• Debljina - širina granice: vrijednost (tanak|srednji|debeo). Podrazumevano je srednje.
• Boja - boja ivice: boja. Podrazumevana je boja fonta u ovom elementu.
• Tip - u stilu obruba: bez|tačkastog|isprekidanog|punog|dvostrukog|utora|sljemena|umetka|na početku. Vrste: bez okvira | tačke | točkasto | čvrsta | duplo | imitacija reljefa.

Sama pravila okvira:

• border-top-(širina|boja|stil).
• border-right-(širina|boja|stil).
• border-bottom- (širina|boja|stil).
• granica-lijevo- (širina|boja|stil).
• granica: granica širine border-style border-color. Timsko pravilo.

Informacije okružene okvirom omogućavaju vam da odvojite jedan materijal na web stranici od drugog i privučete pažnju čitaoca.
Osim toga, okvir dodaje eleganciju dizajnu stranice.
Za kreiranje okvira koristi se nekoliko metoda, od kojih većina koristi svojstva tabela. Stilovi dopunjuju mogućnosti stolova i omogućavaju vam da kreirate različite vrste okvira jednostavnim sredstvima. Ispod su uobičajene tehnike za dobijanje okvira koji se mogu naći svuda na različitim lokacijama.

Parametar granica

Najjednostavniji način za kreiranje ivice je korištenje parametara tablice border, koji određuje debljinu ivice, i bordercolor, koji određuje njegovu boju. Ovako kreirani okviri se razlikuju po izgledu u različitim pretraživačima (slika 3.1).

Rice. 3.1. Okvir dobiven korištenjem parametra granice

Netscape simulira trodimenzionalnost okvira, Opera pretraživač općenito ostavlja svoju boju nepromijenjenom, i Internet Explorerčini okvir čvrstim.

Primjer 3.1. Korištenje parametra granice

Parametar granice definira debljinu okvira, bordercolor – njegovu boju, cellpadding specificira udaljenost od okvira do sadržaja tabele.

Ugniježđene tablice

Još jedan jednostavan univerzalna metoda izgradnja okvira, koji radi isto u različitim pretraživačima, zasniva se na preklapanju dve tabele jednu na drugu. Ako uzmemo pravougaonik od, na primjer, crvenog papira i stavimo drugi pravougaonik na njega bijela, malo manja veličina, tada ćemo vidjeti crveni okvir. Samo umjesto lista papira koristimo oznaku TABLE, a boju tabele postavljamo parametrom bgcolor.

Primjer 3.2. Korištenje ugniježđenih tabela

U gornjoj tabeli pomoću parametra postavite širinu i visinu tabele po želji bgcolor postavite boju okvira, cellpacing dodijeli ga nuli i cellpadding kontroliše debljinu ivice. Što je ovaj parametar veći, okvir će biti deblji.
Za internu tabelu potrebno je podesiti njenu boju, različitu od spoljašnje, da odgovara boji pozadine web stranice; u primeru, na primer, postavljena je bijela. Parametar cellpacing ili cellpadding(V u ovom slučaju bez obzira koji koristiti) određuje udaljenost od granice okvira do sadržaja tabele.
Širina i visina unutrašnjeg stola moraju odgovarati širini i visini vanjskog stola.
komentar: Prelomi reda u HTML kodu automatski dodaju razmak. Ako okvir na nekim mjestima ispadne deblji od predviđenog, treba ga ukloniti dodatni prostori između oznaka i time smanjiti broj redova.

Popunjavanje ćelija tabele bojom

Korištenje boje pozadine ćelija tablice jedan je od univerzalnih i uobičajenih načina za kreiranje obruba. Napravite tabelu (slika 3.2) i popunite spoljne ćelije u pravoj boji(Sl. 3.3).

Rice. 3.2. Rice. 3.3

Debljina okvira određena je širinom i visinom ćelija. Obavezno postavite odstojnik unutar ovih ćelija tabele - transparentan crtež Veličina 1 sa 1 piksel (u primeru se zove spacer.gif), inače ovaj metod neće raditi u Netscape pretraživaču.

Primjer 3.3. Kreiranje okvira popunjavanjem ćelija tabele bojom

		visina="2">
visina="2">	Sadržaj	visina="2">
visina="2">		visina="2">

U ovom primjeru napravljen je crveni okvir debljine 2 piksela, koji izgleda najelegantnije. Opcije tabele cellpacing I cellpadding jednake su nuli tako da okvir ostaje željene debljine i bez praznina. Ako stavite tekst unutar takve tabele, on će čvrsto pristajati uz okvir, što je ružno i teško čitljivo. Da biste dodali uvlake, možete kreirati dodatne ćelije za ovu svrhu, koristiti ugniježđenu tablicu ili koristiti stilove.

komentar: Gornja metoda je osjetljiva na različiti parametri, stoga, u slučaju pogrešnog crtanja okvira, provjerite sljedeće:

• ako je veličina tabele navedena u pikselima, morate navesti fiksne veličine sve ćelije;
• kada je širina tabele navedena kao procenat, potrebno je da stavite tekst unutar okvira koji „proširuje“ unutrašnju ćeliju do željene širine; ako unutar tabele sa okvirom nema teksta ili drugog sadržaja, njegova širina će biti mnogo šira od željene;
• U ćelijama gde ide granica ne bi trebalo da postoje razmaci koji se ne mogu odvojiti (& nbsp;), ono što neki urednici web stranica vole da dodaju automatski;
• prelomi reda automatski dodaju razmak u tekst, dakle između otvaranja i zatvaranja oznaka