Dobrodošli na moj blog. Css (Cascading Style Sheets) pruža puno mogućnosti prilagodbe izgled Internet stranice. Danas bih želio ukratko pokazati kako u CSS-u definirati ispunu na vrhu ili na bilo kojoj drugoj strani za bilo koji element.
Margina
Margina se postavlja pomoću svojstva margine. S njim možete postaviti margine na sve četiri strane odjednom ili koristiti druga svojstva: margin-top, margin-left, margin-desno, margin-bottom, koja vam omogućuju stvaranje samo na jednoj strani.
Margina određuje udaljenost na kojoj će odabrani rub elementa biti pomaknut od ostalih elemenata na stranici. Na primjer, unos:
P,div(
Gornja margina: 20 px;
}
To znači da će svi blokovi i odlomci biti uvučeni na vrhu za 20 piksela, odnosno njihov će gornji rub biti odmaknut od susjednih elemenata za tu udaljenost.
Margine se mogu pisati sa svake strane koristeći samo jedno svojstvo margine, na koje se u nizu pišu 4 vrijednosti:
Div(
Margina: 20px 10px 20px 10px;
}
Ispuna će biti dana s gornjeg, desnog, donjeg i lijevog ruba. Budući da su u ovom slučaju jednaki na suprotnim stranama, mogli bismo to napisati i ovako:
Div(
Margina: 20px 10px;
}
Prva vrijednost je gornja i donja margina, a druga je margina sa strane.
Uvlačenje
Unutarnje popunjavanje radi drugačije - ne odmiče blok od drugih elemenata, već dodaje taj prostor unutar elementa, pomičući sadržaj bloka od njegovih rubova. Udobno je. Gdje ste vidjeli web stranicu na kojoj tekst počinje u gornjem lijevom kutu prozora?
Nisam ovo vidio jer web programeri uvijek koriste vanjski i podstava kako bi se tekst mogao što zgodnije čitati. Unutarnje popunjavanje navedeno je korištenjem svojstva popunjavanja, u kojem se mogu navesti 4 vrijednosti odjednom, odvojene razmakom, za sve rubove.
Također, slično margini, možete dodati naziv stranice i postaviti udaljenost samo za nju. Na primjer, top padding se može napisati pomoću padding-top. Općenito, svojstvo padding funkcionira potpuno isto kao i svojstvo margine.
Na primjer, možete dati ovaj dio koda:
Blok(
Širina: 200 px;
Padding: 20px;
}
Što mislite, kolika će biti stvarna širina našeg elementa? Ovdje možete vidjeti da ima 200 piksela, ali obloge dodaju još 20 sa svake strane, za ukupno 240 piksela. Uzmite to u obzir prilikom projektiranja.
Također bih želio napomenuti da se ispuna obično daje samo blok elementima; bolje je ne davati je ugrađenim elementima. Margina dobro funkcionira sa svim elementima.
CSS izgled uvijek je bio pravokutan. Sve glatke linije su nadležnost programera. Pravila stila pružaju dovoljno opcija da stranici daju gladak oblik unutar granica rezolucije zaslona. Ali bilo koji element izgleda uvijek je pravokutnik u kojem je raspored informacija reguliran CSS pravilima.
Ispuna sa svih strana važna je za svaki element stranice kada je apsolutno pozicioniran, a CSS gornja ispuna je posebno definirana jer je važna za različite elemente, posebno one u liniji.
Osnovna pravila pozicioniranja
Blok element ima pravilo margine, pravilo ispune za elemente unutar njega i širinu ruba koja se također može koristiti.
Udubljenje na vrhu je od posebne važnosti. CSS unutar bloka povezuje pravila za popunjavanje s pravilima za apsolutno i relativno pozicionirane elemente unutar tog bloka.
Uobičajena praksa za CSS pravila: možete navesti isti ispun na svim stranama, u parovima gore/dolje i desno/lijevo, ili za svaku stranu zasebno. Na primjer,
- margina: 10px;
- ispuna: 10px20px;
- ispuna: 10px20px30px40px.
U prvom slučaju postavlja se uvlačenje elementa od stranica vanjskog spremnika u kojem se nalazi. U drugom slučaju, margine na vrhu i dnu su 10px, lijevo i desno - 20px. U trećem slučaju, veličina uvlaka je naznačena sa svih strana: gore, desno, dolje i lijevo.
U svim tim slučajevima uvlačenje gornji CSS je 10 px.
Pravila koja mijenjaju položaj elemenata
Ako element izgleda nije pozicioniran apsolutno, pozicioniran je prema općem redoslijedu formiranja stranice.
Ako definiramo padding on the top CSS u scCurrInfo elementu, cilj će biti postignut, ali ako na razini li neće.
U ovom primjeru, korištenjem pravila za padding: 40px; zahtijeva odgovarajuće smanjenje pravila širine i visine za 80 px. Inače će veličina bloka scCurrInfo premašiti granice vanjskog bloka.
Ako uklonimo pravilo za padding iz opisa scCurrInfo, ali ga dodamo s vrijednošću od 20px u opis stila stavke popisa, dobit ćemo samo gornja uvlaka. CSS neće primijeniti ovu vrijednost na druge strane.
Naravno, ova uporaba pravila uvlačenja primjenjuje se na svaki li element.
Opće prakse oblikovanja sadržaja
Neki programeri postižu savršenstvo postavljanjem stranica pomoću blok elemenata. Navodno je riječ o klasičnoj praksi - započeti s tablicama, a vlastiti obrazovni proces završiti blokovima.
Sloboda svojstvena rasporedu blokova je fascinantna, a mašta programera možda nije ograničena strogim pravilima tablice: samo redovi, samo ćelije, spajanje samo vodoravno i okomito. Ništa neobično za relacijske ideje.
U međuvremenu, stolovi, pored očitih nedostataka, imaju mnoge kvalitativne prednosti. Prilikom kreiranja ispune na vrhu, CSS uzima u obzir ispune lijevo, desno (dno je posebna točka). Pravila ćelija tablice omogućuju vam kontrolu okomitog i vodoravnog poravnanja. Korištenjem stilova redaka i njihovim kombiniranjem sa stilovima ćelija možete stvoriti složene prikaze sadržaja.
Uobičajeni prikaz stranice u obliku pravokutnika uopće ne sprječava da se ona prikaže u obliku tablice. To su također pravokutnici, ali su i ćelije tablice, odnosno imaju svoja pravila koja nadopunjuju pravila blokova.
Apsolutno pozicioniranje
Blokiraj pravilom POLOŽAJ: apsolutno ; bit će smješten na mjestu određenom njegovim koordinatama u odnosu na blok u kojem se nalazi.
Karakteristično CSS pravila- "vježbati - najbolji kriterij istina" u većini slučajeva, posebno kada je potrebna kompatibilnost s više preglednika i kada se raspored radi ručno, bolje je nego proučavati potpune priručnike na kaskadnim listovima stilova.
Korištenje tablica često dovodi do problema s pomicanjem sadržaja ćelije. Sličan pomak unutar bloka ne utječe uvijek na sve elemente. Eksperimentiranjem možete postići željeni rezultat. Trivijalan zadatak: kako uklanjanje gornjeg ispuna nije uvijek trivijalno rješenje za CSS.
U nekim slučajevima, kada morate rasporediti elemente stranice u utrobi nekog popularnog sustava za upravljanje sadržajem web stranice, još uvijek morate obratiti pažnju ne samo na eksperimentalnu praksu, već i na iskustvo svojih kolega.
Opis
Postavlja količinu uvlačenja od desnog ruba elementa. Ispuna je udaljenost od vanjskog ruba desnog ruba trenutnog elementa do unutarnjeg ruba njegovog nadređenog elementa (slika 1).
Sintaksa
margin-desno: vrijednost | auto | naslijediti
Vrijednosti
Količina desnog ispuna može se odrediti u pikselima (px), postotku (%) ili drugim jedinicama prihvatljivim za CSS. Vrijednost može biti pozitivan ili negativan broj.
Auto Određuje da će preglednik automatski izračunati količinu uvlake. inherit Nasljeđuje vrijednost roditelja.
HTML5 CSS2.1 IE Cr Op Sa Fx
Rezultat ovog primjera prikazan je na sl. 2.
Riža. 2. Primjena svojstva margin-right
Objektni model
document.getElementById("elementID ").style.marginRight
Preglednici
preglednik Internet Explorer 6 udvostručuje lijevu ili desnu vrijednost ispune za plutajuće elemente ugniježđene unutar nadređenih elemenata. Margina koja je uz matičnu stranu je udvostručena. Problem se obično rješava dodavanjem display: inline plutajućem elementu.
Inačice Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.
Opis
CSS svojstvo margin-top postavlja marginu na vrh elementa. Ispuna je udaljenost od vanjskog ruba gornjeg ruba trenutnog elementa do unutarnjeg ruba njegovog roditeljskog elementa ili do ruba elementa iznad njega. Imajte na umu da umetnuti elementi (display : inline;) mogu imati samo lijevu i desnu marginu.
Veličina vanjskog gornjeg ispuna može se odrediti u pikselima (px), postocima (%) ili drugim CSS jedinicama. Vrijednost može biti pozitivna ili negativna.
Napomena: donja ili gornja margina element djeteta može utjecati na ukupnu visinu nadređenog elementa osim ako nema fiksnu veličinu visine.
Spajanje polja
- Polja sestrinskih elemenata smještena jedno ispod drugog i smještena u toku dokumenta spajaju se u jedno zajedničko. Visina dobivenog polja jednaka je visini većeg od dva polja, na primjer: polje gornji element(margin-bottom) je 10px, a donji element (margin-top) je 20px, pojedinačna margina u ovom će slučaju biti visoka 20px.
- Spajanje margina nadređenog i podređenog elementa koji su u toku dokumenta događa se ako nadređeni element nema ništa što odvaja njegovu marginu od margine podređenog elementa (rub, ispuna ili ugrađeni sadržaj). Također, spajanje polja neće se dogoditi ako nadređeni element ima svojstvo preljeva postavljeno na skriveno ili auto. Prednost ove metode je da se veličina nadređenog elementa ne povećava.
Blok raspored se često koristi pri izradi web stranice ili bloga. Kao posljedica toga, često je potrebno uvući blokove. Iz tog razloga, oko kako uvući u CSS detaljno opisano u ovoj lekciji. Za preglednik je svaka oznaka spremnik koji ima sadržaj, ispunu, vanjske margine i obrub. U ovoj lekciji naučit ćemo kako napraviti unutarnje i vanjske uvlake i razmotriti njihove glavne parametre.
Slika u nastavku jasno prikazuje parametre uvlake bloka:
Kao što vidite, uvlake se mogu napraviti u četiri smjera: gornja uvlaka (vrh), donja uvlaka (dolje), lijeva uvlaka (lijevo) i desna uvlaka (desno). Mjerne jedinice mogu biti pikseli, postoci i druge CSS jedinice - saznajte više o njima. Ovaj vodič koristi piksele.
Ispuna blokova
Vlasništvo odgovorno za padding u CSS-u je podstava. Dakle, pogledajmo primjer postavljanja unutarnjeg ispuna za blok:
padding-top: 5px; /*gornje ispuna*/ padding-left: 8px; /*lijevo ispunjavanje*/ padding-desno: 8px; /*desno ispuna*/ padding-bottom: 5px; /*donja podloga*/
U ovom primjeru ispuna se postavlja zasebno za svaku stranu bloka. Osim toga, postoji nekoliko načina za postavljanje uvlake u CSS-u:
margina: 5px 8px 5px 8px; /*gornja, desna, donja, lijeva margina*/ margina: 5px 8px 5px; /*opisuje gornju, lijevu, desnu, donju marginu*/ margina: 5px 8px; /*opisuje gornju i donju, desnu i lijevu marginu*/ margina: 7px; /*opisuje sva unutarnja ispuna od 7px*/
Lakše je zapamtiti prvu i posljednju metodu. U prvom slučaju, uvlake se postavljaju u smjeru kazaljke na satu (gore, desno, dolje, lijevo) - možemo odrediti bilo koju količinu uvlake; u drugom slučaju, uvlake na svim stranama bit će iste.
Margine bloka
Vlasništvo odgovorno za margine u CSS-u je margina. Primjeri margina u CSS-u:
margin-top: 5px; /*gornja margina*/ margin-left: 10px; /*lijeva margina*/ margin-desno: 10px; /*desna margina*/ margin-bottom: 5px; /*donja margina*/
padding: 5px 10px 5px 10px; /*gornja, desna, donja, lijeva margina*/ padding: 5px 10px 5px; /*opisuje gornje, lijevo i desno, donje ispune*/ padding: 5px 10px; /*opisuje gornji i donji, desni i lijevi ispun*/ padding: 7px; /*opisuje sve margine od 7px*/
Tako, kako uvući u CSS- pitanje nije teško, ali vrlo relevantno. Da biste bolje razumjeli gore opisane informacije, trebali biste upamtiti da postoje dva svojstva: padding - unutarnje uvlake i margina - vanjske uvlake. Također, kao što već znate, postoji nekoliko načina za postavljanje uvlaka, možete ih koristiti.
