Ispuna i obrubi u CSS-u pomoću parametara margine, dopune i obruba. CSS: granica

(zadano:
srednje, ništa, bez boje)

širina okvira može biti srednje, tanko ili debelo ili navedeno u jedinicama.
okvir_stil 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 proslijedite adresu slike, uzorak će se ponoviti, ispunjavajući obrise okvira.

#org
{
širina: 80%;
margin-top:2em;
margin-lijevo: auto;
margin-desno: automatski;
rubni radijus: 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 hack min-height*/
min-visina:40px;
visina:auto !važno;
visina:40px;
preljev: vidljiv;

Položaj: rođak;
dolje:6px;
desno: 6px;
rub: 1px puni #7e5a25;
/*Postavite položaj pozadinska slika*/
položaj pozadine: 20px 50%;
pozadinsko ponavljanje: bez ponavljanja;
poravnanje teksta: poravnanje;
veličina fonta: 0,9em;

Boja pozadine: #e8e3d4;
pozadinska slika: url(baba.gif);
}

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

Primjer 4: Upotreba nevidljive granice u stolu

U u ovom primjeru Boja pozadine web-stranice unosi se kroz svojstvo pozadine dodano selektoru BODY. Iako je bijela zadana boja, ponekad ju je poželjno postaviti kako bi se spriječilo da korisnik odredi boju pozadine putem postavki preglednika. Linije tablice također bi trebale biti iste boje; u ovom slučaju nisu jasno vidljive i samo dijele ćelije među sobom.

Rezultat primjera 4 prikazan je u nastavku.

Riža. 3. Izgled obruba koji odgovaraju boji pozadine

Pogledajmo neki dokument. Na njemu se formiraju HTML elementi (prikazuju se na ekranu u pregledniku). Formiraju se na temelju oznaka. Vi postavljate oznake, njih obrađuje html parser (dostupan u bilo kojem pregledniku) i gradi html elemente. A kako će ti elementi izgledati određuje CSS.

Svi html elementi imaju 4 područja: područje ispune, granice, ispune i sadržaj elementa. Za što su oni potrebni?

• Margine su potrebne za reguliranje interakcije ovog elementa s granicama drugih elemenata.
• Padding je udaljenost od okvira do sadržaja danog elementa.
• Sadržaj samog elementa. Ovdje je jasno. Ako postoje ugniježđeni elementi, oni se nalaze u ovom području.
• Okvir (obrub). Ocrtava granice elementa. Shematski se 4 područja mogu prikazati na sljedeći način:

Treba razumjeti da svaki element leži unutar nekog područja. Ovo područje za element koji se nalazi unutar njega naziva se spremnik. Oni. spremnik je područje sadržaja nadređeni element. Ovo područje određuje prostor za izgradnju unutarnjeg elementa. To znači da će se unutarnji element prilagoditi veličini ovog područja.

Margine

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

• margin-top: auto|magnitude|% - gornja margina.
• margin-desno: auto|magnituda|% - desna margina.
• margin-bottom: auto|magnitude|% - donja margina.
• margin-left: auto|magnitude|% - lijeva margina.
• margina: margina-gornja margina-desna margina-donja margina-lijevo – prefabricirano pravilo.

Vrijednost "auto" znači da će preglednik samostalno analizirati te vrijednosti. Veličina uvlake može se odrediti u sljedećim vrijednostima: em, ex, px. Postoci (%) izračunavaju se iz širine spremnika (iz područja sadržaja nadređenog elementa). Ako navedete negativnu vrijednost, granice elemenata unutar nadređenog spremnika će se sudarati jedna s drugom.

Pravilo "margina" je složeno; ovdje su navedene vrijednosti sve 4 margine (počevši od vrha i u smjeru kazaljke na satu). Primjeri:

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

Padding

Ovdje ne mogu biti negativne vrijednosti, jer Nemoguće je premjestiti sadržaj izvan okvira elementa. Postoci se izračunavaju na temelju širine spremnika.

• padding-top: vrijednost|%.
• padding-desno: vrijednost|%.
• padding-bottom: vrijednost|%.
• padding-left: vrijednost|%.
• padding: padding-top padding-desno padding-bottom padding-left - prefabricirano pravilo. Slično "margini".

Granice u CSS-u

Svi okviri imaju sljedeće karakteristike:

• Debljina - širina granice: vrijednost (tanak|srednji|debeo). Zadano je srednje.
• Boja - boja obruba: boja. Zadana je boja fonta u ovom elementu.
• Vrsta - stil obruba: nema|točkasto|isprekidano|puno|dvostruki|utor|greben|umetnuti|ispad. Vrste: bez okvira | točkice | točkasto | čvrst | dvostruko | imitacija reljefa.

Sama pravila okvira:

• border-top-(širina|boja|stil).
• granica-desno-(širina|boja|stil).
• border-bottom- (širina|boja|stil).
• border-left- (širina|boja|stil).
• rub: border-width border-style rubna boja. Timsko pravilo.

Informacije okružene okvirom omogućuju vam da odvojite jedan materijal na web stranici od drugog i privučete pozornost čitatelja.
Osim toga, okvir dodaje eleganciju dizajnu stranice.
Za izradu okvira koristi se nekoliko metoda, od kojih većina koristi svojstva tablica. Stilovi nadopunjuju mogućnosti stolova i omogućuju stvaranje različitih vrsta okvira jednostavnim sredstvima. Ispod su uobičajene tehnike za dobivanje okvira koje se mogu naći posvuda na različitim stranicama.

Parametar granica

Najjednostavniji način za izradu obruba je korištenje parametara tablice border, koji određuju debljinu obruba, i bordercolor, koji određuje njegovu boju. Ovako stvoreni okviri razlikuju se po izgledu u različitim preglednicima (slika 3.1).

Riža. 3.1. Okvir dobiven korištenjem rubnog parametra

Netscape simulira trodimenzionalnost okvira, Preglednik Opera uglavnom ostavlja nepromijenjenu boju i Internet Explorerčini okvir čvrstim.

Primjer 3.1. Korištenje graničnog parametra

Parametar border definira debljinu okvira, bordercolor – njegovu boju, cellpadding određuje udaljenost od okvira do sadržaja tablice.

Ugniježđene tablice

Još jedan jednostavan univerzalna metoda izgradnja okvira, koji radi isto u različitim preglednicima, temelji se na preklapanju dvije tablice jedne na drugu. Ako uzmemo pravokutnik od npr. crvenog papira i na njega stavimo drugi pravokutnik bijela, malo manje veličine, tada ćemo vidjeti crveni okvir. Samo umjesto lista papira koristimo oznaku TABLE, a boju tablice postavljamo parametrom bgcolor.

Primjer 3.2. Korištenje ugniježđenih tablica

U gornjoj tablici pomoću parametra postavite željenu širinu i visinu tablice bgcolor postavite boju okvira, razmak stanica dodijeliti ga nuli i cellpadding kontrolira debljinu obruba. Što je veći ovaj parametar, to će okvir biti deblji.
Za unutarnju tablicu potrebno je podesiti njezinu boju, različitu od vanjske, koja odgovara boji pozadine web stranice, u primjeru je, primjerice, postavljena bijela. Parametar razmak stanica ili cellpadding(V u ovom slučaju bez obzira koju koristiti) određuje udaljenost od granice okvira do sadržaja tablice.
Širina i visina unutarnjeg stola mora odgovarati širini i visini vanjskog stola.
Komentar: Prijelomi redaka u HTML kodu automatski dodaju razmak. Ako okvir na nekim mjestima ispadne deblji od predviđenog, trebali biste ga ukloniti dodatni prostori između oznaka i time smanjiti broj redaka.

Popunjavanje ćelija tablice bojom

Korištenje pozadinske boje ćelija tablice jedan je od univerzalnih i uobičajenih načina za stvaranje obruba. Napravite tablicu (slika 3.2) i popunite vanjske ćelije u pravoj boji(Slika 3.3).

Riža. 3.2. Riža. 3.3

Debljina okvira određena je širinom i visinom ćelija. Obavezno stavite razmaknicu unutar ovih ćelija tablice - prozirni crtež Veličina 1 x 1 piksel (u primjeru se zove spacer.gif), inače ova metoda neće raditi u pregledniku Netscape.

Primjer 3.3. Stvaranje okvira ispunjavanjem ćelija tablice bojom

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

U ovom primjeru napravljen je crveni okvir debljine 2 piksela, izgleda najelegantnije. Mogućnosti tablice razmak stanica I cellpadding su jednaki nuli tako da okvir ostane željene debljine i bez razmaka. Ako stavite tekst unutar takve tablice, on će tijesno pristajati uz okvir, što je ružno i teško čitljivo. Da biste dodali uvlake, možete stvoriti dodatne ćelije u tu svrhu, koristiti ugniježđenu tablicu ili koristiti stilove.

Komentar: Gore navedena metoda je osjetljiva na različite parametre, stoga, u slučaju neispravnog crteža okvira, trebate provjeriti sljedeće:

• ako je veličina tablice navedena u pikselima, morate navesti fiksne veličine sve stanice;
• kada je širina tablice određena kao postotak, trebate staviti tekst unutar okvira koji "proširuje" unutarnju ćeliju na željenu širinu; ako unutar tablice s okvirom nema teksta ili drugog sadržaja, njezina će širina biti puno veća od željene;
• U ćelijama u kojima ide obrub ne bi smjelo biti znakova razmaka koji se ne mogu odvojiti (& nbsp;),što neki urednici web stranica vole automatski dodavati;
• prijelomi redaka automatski dodaju razmak u tekst, dakle između početnih i završnih oznaka