Pozdrav, dragi čitaoci blog stranice! Danas ćemo nastaviti sa učenjem o kaskadnim stilovima ili CSS-u. U prethodnim člancima koje smo već pogledali generalni nacrt blok izgled stranice. Kao rezultat toga, počeli smo da imamo prilično profesionalne web stranice, ali im je nešto nedostajalo. Ali najvjerovatnije im nedostaju udubljenja i okviri. Danas ćemo pogledati pravila stila margina, paddinga i obruba, koja vam omogućavaju da postavite uvlake i okvire za html elemente.
CSS Padding Options
Uz pomoć kaskadnih stilskih tablica moguće je postaviti dvije vrste uvlaka.
1.Udubljenje je udaljenost od imaginarne granice elementa do njegovog sadržaja. Vrijednost udaljenosti je specificirana pomoću parametra padding. Ovo udubljenje pripada samom elementu i nalazi se unutar njega.
2. Margina— udaljenost između granice trenutnog elementa web stranice i granica susjednih elemenata, ili roditeljski element. Veličina udaljenosti je kontrolirana od strane imovine margina. Ovo udubljenje se nalazi izvan elementa.
Radi jasnoće slika:
Na primjer, uzmite u obzir ćeliju ispunjenu tekstom. Tada je padding udaljenost između imaginarne granice ćelije i teksta koji sadrži. A vanjska margina je udaljenost između granica susjednih ćelija. Počnimo sa paddingom.
Padding u CSS-u koristeći padding (gore, dolje, lijevo, desno)
Svojstva stilova padding-left, padding-top, padding-right i padding-bottom vam omogućavaju da postavite vrijednosti paddinga, redom, na lijevoj, vrhu, desno i dnu elementa web stranice:
padding-top | padding-right | padding-bottom | padding-left: vrijednost | interes | nasljediti
Količina uvlačenja može se odrediti u pikselima (px), procentima (%) ili drugim jedinicama prihvatljivim za CSS. Prilikom specificiranja postotaka, vrijednost se izračunava iz širine elementa. Značenje nasledstva označava da je naslijeđen od roditelja.
Na primjer, za trenutni pasus, primijenio sam pravilo stila koje postavlja lijevi padding na 20 piksela, gornji padding na 5 piksela, desni padding na 35 piksela, a donji padding na 10 piksela. Unos pravila će izgledati ovako:
p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}
Pravilo kompozitnog dopuna omogućava vam da navedete uvlake na svim stranama elementa web stranice odjednom:
padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
IN kolektivna vladavina Možete koristiti jednu, dvije, tri ili četiri vrijednosti, odvajajući ih razmakom. U ovom slučaju, učinak ovisi o broju vrijednosti:
- ako navedete jednu vrijednost, ona će postaviti količinu uvlačenja na svim stranama elementa stranice;
- ako navedete dvije vrijednosti, prva će postaviti količinu uvlačenja na vrhu i dnu, a druga - lijevo i desno;
- ako navedete tri vrijednosti, tada će prva odrediti količinu udubljenja na vrhu, druga - lijevo i desno, a treća - na dnu;
- ako su navedene četiri vrijednosti, prva će postaviti količinu uvlačenja na vrhu, druga na desno, treća na dnu, a četvrta na lijevo.
Stoga se CSS pravilo iznad može skratiti što je više moguće i napisati na sljedeći način:
p.test( padding:5px 35px 10px 20px)
Svojstvo margine ili margine u CSS-u
Atributi stila margin-left, margin-top, margin-right i margin-bottom vam omogućavaju da postavite vrijednosti margine, odnosno lijevo, gore, desno i dolje:
margin-top | margin-desno | margin-bottom | margin-left:<значение>|auto|naslijediti
Kao što je gore spomenuto, margina je udaljenost od granice trenutnog elementa do granice susjednog elementa, ili, ako nema susjednih elemenata, do unutrašnje granice roditeljskog kontejnera.
Količina uvlačenja može se odrediti u pikselima (px), postocima (%) ili drugim jedinicama dozvoljenim za CSS:
p(
margin-left: 20px;
}
h1(
margin-right:15%;
}
Vrijednost auto znači da će pretraživač automatski izračunati veličinu uvlake. Ako koristite procentualni zapis, udubljenja se izračunavaju ovisno o širina roditeljskog kontejnera. Štaviše, ovo se odnosi ne samo na marginu-lijevu i marginu-desnu, već i za marginu-vrh i marginu-dolje, procentualne margine će se izračunati ovisno o širini, a ne visini, kontejnera.
Dozvoljeno je koristiti kao vrijednosti vanjskih uvlaka negativne vrijednosti:
p(
margin-left:-20px;
}
Ako se, sa pozitivnim vrijednostima uvlake, susjedni elementi pomaknu, onda sa negativnu vrijednost susjedni blok će se sudariti s elementom za koji smo postavili takav negativan pomak.
Također možemo odrediti padding koristeći atribut style margina. Postavlja vrijednosti uvlačenja istovremeno na svim stranama elementa web stranice:
margina:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Kada specificirate jednu, dvije, tri ili četiri vrijednosti dopuna, ovo svojstvo poštuje iste zakone kao i pravilo dopunjavanja.
Opcije ivice pomoću svojstva Border
Prilikom postavljanja okvira postoje tri vrste parametara:
- border-width — debljina granice;
- border-color — boja ivice;
- border-style — vrsta linije kojom će okvir biti nacrtan.
Počnimo s parametrom debljine okvira:
border-width: [vrijednost | tanak | srednje | debljina] (1,4) | nasljediti
Debljina okvira može se specificirati u pikselima ili drugim jedinicama dostupnim u CSS-u. Tanke, srednje i debele varijable postavljaju debljinu granice na 2, 4 i 6 piksela, redom:
border-width:medium;
Kao i kod svojstava paddinga i margine, parametar border-width dozvoljava jednu, dvije, tri ili četiri vrijednosti, čime se postavlja širina ivice za sve strane odjednom ili za svaku stranu posebno:
granica širine: 5px 3px 5px 3px
Za trenutni pasus, napravite debljinu gornjeg ruba 1px, desnog 2px, donjeg 3px i lijevog 4px koristeći pravilo (širina ivice: 1px 2px 3px 4px;)
Koristeći atribute stila border-left-width, border-top-width, border-right-width i border-bottom-width, možete postaviti debljinu lijeve, gornje, desne i donje strane ivice, respektivno:
granica-lijevo-širina|border-top-width|border-right-width|border-bottom-width: tanka|srednja|debela|<толщина>|naslijediti
Sljedeći parametar je boja granica s kojom možete kontrolirati boja okvira:
border-color: [boja | transparentan] (1,4) | nasljediti
Svojstvo vam omogućava da postavite boju ivice za sve strane elementa odjednom ili samo za navedene. Kao vrijednost, možete koristiti metode za određivanje boja prihvaćenih u HTML-u: heksadecimalni kod, ključne riječi, itd.:
p (širina ivice: 2px; boja ivice: crvena)
Transparentne vrijednosti postavljaju transparentne boje okvir, a inherit nasljeđuje vrijednost roditelja. Prema zadanim postavkama, ako boja obruba nije navedena, koristit će se ona koja se koristi za font unutar elementa.
Koristeći atribute stila border-left-color, border-top-color, border-right-color i border-bottom-color, možete postaviti boju lijeve, gornje, desne i donje strane ivice, redom:
Border-left-color|border-top-color|border-right-color|border-bottom-color: transparentan|<цвет>|naslijediti
I posljednji parametar Border-style specificira tip okvira:
obrubni stil: (1,4) | nasljediti
Tip okvira se može specificirati za sve strane elementa odjednom ili samo za one navedene. Može se koristiti nekoliko vrijednosti ključne riječi. Izgled će zavisiti od pretraživača koji se koristi i debljine okvira. Značenje nijedan se koristi po defaultu i ne prikazuje okvir i njegova debljina je postavljena na nulu. Skrivena vrijednost ima isti efekat. Rezultirajući okvir za ostale vrijednosti, ovisno o debljini, prikazan je u donjoj tabeli:
Atributi stila border-left-style, border-top-style, border-right-style i border-bottom-style specificiraju stil linija koje će biti nacrtane na lijevoj, gornjoj, desnoj i donjoj strani ivice, odnosno:
Border-left-style|border-top-style|border-right-style|border-bottom-style: nijedna|skrivena|tačkasta|isprekidana|puna|dvostruka|žljeb|grebena|umetnuta
Kao i kod opcija dopuna i dopuna, postoje univerzalni granično vlasništvo . Omogućava vam da istovremeno postavite debljinu, stil i boju ivice oko elementa:
granica: | nasljediti
Vrijednosti mogu biti bilo kojim redoslijedom, odvojene razmacima:
td (rub: 1px puna žuta)
Da biste postavili obrub samo na određenim stranama elementa, postoje svojstva border-top, border-bottom, border-left, border-right, koja vam omogućavaju postavljanje parametara za vrh, dno, lijevo i desna strana okvir
Ostaje samo da rezimiramo:
- za zadatak padding koristimo imovinu padding;
- za podešavanja margine postoji pravilo margina;
- parametri okvira specificiraju se pomoću atributa granica.
Napominjem da sva ova CSS svojstva povećavaju veličinu elementa web stranice. Stoga, ako promijenimo debljinu obruba ili veličinu dopuna blok-kontejnera koji čine dizajn web stranice, morat ćemo u skladu s tim promijeniti veličinu ovih kontejnera, inače se mogu pomjeriti i dizajn će biti slomljena.
To je sve, vidimo se sledeći put!
Blok raspored se često koristi prilikom kreiranja web stranice ili bloga. Kao posljedica toga, često je potrebno uvlačiti blokove. Iz tog razloga, oko kako uvući u CSS detaljno opisano u ovu lekciju. Za pretraživač, svaka oznaka je kontejner koji ima sadržaj, padding, vanjske margine i ivicu. U ovoj lekciji ćemo naučiti kako napraviti unutrašnje i margine, razmotrimo njihove glavne parametre.
Na slici ispod jasno su prikazani parametri uvlačenja bloka:
Kao što vidite, uvlake se mogu napraviti u četiri smjera: gornja uvlaka (gore), donja uvlaka (dolje), uvlaka lijevo (lijevo) i desna uvlaka (desno). Jedinice mjerenja mogu biti pikseli, procenti i druge. CSS jedinice— više o njima. Ovaj vodič koristi piksele.
Block padding
Svojstvo odgovorno za padding u CSS-u je padding. Dakle, pogledajmo primjer postavljanja internog paddinga za blok:
padding-top: 5px; /*gornji padding*/ padding-left: 8px; /*lijevo padding*/ padding-desno: 8px; /*desni padding*/ padding-bottom: 5px; /*donji padding*/
IN u ovom primjeru Unutrašnji padding se postavlja zasebno za svaku stranu bloka. Osim toga, postoji nekoliko načina za postavljanje uvlačenja u CSS-u:
margina: 5px 8px 5px 8px; /*gornja, desna, donja, lijeva margina*/ margina: 5px 8px 5px; /*opisuje gornju, lijevu, desnu, donju marginu*/ margin: 5px 8px; /*opisuje gornju i donju, desnu i lijevu marginu*/ margin: 7px; /*opisuje sve unutrašnje margine od 7px*/
Lakše je zapamtiti prvu i poslednji putevi. U prvom slučaju, uvlake se postavljaju u smjeru kazaljke na satu (gore, desno, dolje, lijevo) - možemo odrediti bilo koju količinu uvlačenja; u drugom slučaju, uvlake na svim stranama će biti iste.
Blokirajte margine
Svojstvo odgovorno za margine u CSS-u je margina. Primjeri margina u CSS-u:
margin-top: 5px; /*gornja margina*/ margin-left: 10px; /*lijeva margina*/ margin-desna: 10px; /*desna margina*/ margin-bottom: 5px; /*donja margina*/
padding: 5px 10px 5px 10px; /*gornja, desna, donja, lijeva margina*/ padding: 5px 10px 5px; /*opisuje gornji, levi i desni, donji padding*/ padding: 5px 10px; /*opisuje gornji i donji, desni i levi padding*/ padding: 7px; /*opisuje sve margine od 7px*/
dakle, kako uvući u CSS- pitanje nije teško, ali veoma relevantno. Da biste bolje razumjeli gore opisane informacije, trebate zapamtiti da postoje dva svojstva: padding - unutrašnje uvlake i margina - vanjske uvlake. Također, kao što već znate, postoji nekoliko načina za postavljanje uvlaka, možete ih koristiti.
Dobrodošli na moj blog. Css (Cascading Style Sheets) pruža mnogo opcija prilagođavanja izgled web stranice. Danas bih želio ukratko pokazati kako u CSS-u definirati padding na vrhu ili na bilo kojoj drugoj strani za bilo koji element.
Margina
Marža se postavlja pomoću svojstva margine. Uz njegovu pomoć možete postaviti margine na sve četiri strane odjednom ili koristiti druga svojstva: margin-top, margin-left, margin-right, margin-bottom, koja vam omogućavaju da ga napravite samo na jednoj strani.
Margina određuje udaljenost na kojoj će odabrana ivica elementa biti pomaknuta od ostalih elemenata na stranici. Na primjer, unos:
P, div( Margin-top: 20px; )
To znači da će svi blokovi i paragrafi biti uvučeni pri vrhu za 20 piksela, odnosno da će njihova gornja ivica biti odmaknuta od elemenata koji su im susjedni za ovu udaljenost.
Margine se mogu napisati na svakoj strani koristeći samo jedno svojstvo margine, na koje su upisane 4 vrijednosti u redu:
Div( Margina: 20px 10px 20px 10px; )
Podešavanje će biti dato sa gornje, desne, donje i lijeve ivice respektivno. Pošto su u ovom slučaju jednake na suprotnim stranama, mogli bismo to napisati i ovako:
Div( Margina: 20px 10px; )
Prva vrijednost je margina na vrhu i dnu, a druga je margina sa strane.
Udubljenje
Unutrašnji padding radi drugačije - ne pomera blok od drugih elemenata, već dodaje taj prostor unutar elementa, pomerajući sadržaj bloka dalje od njegovih ivica. To je udobno. Gdje ste vidjeli web stranicu na kojoj tekst počinje u samom gornjem lijevom dijelu prozora?
Ovo nisam vidio, jer web programeri uvijek koriste eksterna i interna uvlaka kako bi tekst učinili što lakšim za čitanje. Interni padding je specificiran pomoću svojstva padding, u kojem se 4 vrijednosti mogu navesti odjednom, odvojene razmakom, za sve rubove, respektivno.
Također, slično margini, možete dodati naziv strane i postaviti udaljenost samo za nju. Na primjer, gornja uvlaka se može pisati sa koristeći padding-top. Općenito, svojstvo padding funkcionira potpuno isto kao svojstvo margine.
Na primjer, možete dati ovaj dio koda:
Blok (Širina: 200px; Padding: 20px; )
Šta mislite kolika će biti stvarna širina našeg elementa? Ovdje možete vidjeti da je to 200 piksela, ali dodaci dodaju još 20 sa svake strane, za ukupno 240 piksela. Uzmite to u obzir prilikom dizajniranja.
Također bih želio napomenuti da se padding obično daje samo blok elementima; bolje je ne dati ga inline elementima. Margina dobro funkcionira sa svim elementima.
CSS raspored je oduvek bio pravougaoni. Sve glatke linije su u nadležnosti programera. Pravila stila pružaju dovoljno opcija da stranici daju glatki oblik unutar granica rezolucije ekrana. Ali svaki element rasporeda je uvijek pravougaonik u kojem je raspored informacija vođen CSS pravilima.
Pading sa svih strana je važan za svaki element stranice kada je apsolutno pozicioniran, a CSS gornji padding je posebno definisan jer je važan za razni elementi, posebno malim slovima.
Osnovna pravila pozicioniranja
Blok element ima pravilo margine, pravilo dopuna za elemente unutar njega i širinu ivice koja se također može koristiti.
Udubljenje na vrhu je od posebnog značaja. CSS unutar bloka povezuje pravila dopuna s pravilima za apsolutno i relativno pozicionirane elemente unutar tog bloka.
Uobičajena praksa za CSS pravila: možete specificirati isti padding na svim stranama, u parovima gore/dolje i desno/lijevo, ili za svaku stranu posebno. Na primjer,
- margina: 10px;
- padding: 10px20px;
- padding: 10px20px30px40px.
U prvom slučaju postavlja se uvlačenje elementa sa strana vanjskog spremnika u kojem se nalazi. U drugom slučaju, margine na vrhu i dnu su 10px, na lijevoj i desnoj - 20px. U trećem slučaju, veličina udubljenja je naznačena sa svih strana: gore, desno, dolje i lijevo.
U svim ovim slučajevima, udubljenje gornji CSS je 10 px.
Pravila koja mijenjaju položaj elemenata
Ako element izgleda nije pozicioniran apsolutno, on se postavlja unutra opšta procedura formiranje stranice.
Ako definišemo padding na vrhu CSS u elementu scCurrInfo, cilj će biti postignut, ali ako na nivou li neće.
U ovom primjeru, korištenjem pravila paddinga: 40px; zahtijeva adekvatno smanjenje pravila širine i visine za 80px. Inače će veličina scCurrInfo bloka premašiti granice vanjskog bloka.
Ako uklonimo pravilo paddinga iz opisa scCurrInfo, ali ga dodamo sa vrijednošću od 20px opisu stila stavke liste, dobićemo samo top indent. CSS neće primijeniti ovu vrijednost na druge strane.
Naravno, ova upotreba pravila uvlačenja primjenjuje se na svaki li element.
Opće prakse formatiranja sadržaja
Neki programeri postižu savršenstvo postavljanjem stranica blok elementi. Očigledno je klasična praksa da počnete sa stolovima i završite sa svojim obrazovni proces na blokovima.
Sloboda inherentna blok raspored, je fascinantno, a mašta programera možda nije ograničena strogim pravilima tablice: samo redovi, samo ćelije, spajanje samo horizontalno i okomito. Ništa neobično za relacijske ideje.
U međuvremenu, stolovi, pored očiglednih nedostataka, imaju mnoge kvalitativne prednosti. Kada kreirate padding na vrhu, CSS uzima u obzir padding sa leve, desne strane (dole je poseban trenutak). Pravila ćelija tabele vam omogućavaju da kontrolišete i vertikalno i horizontalno poravnanje. Koristeći stilove redova i kombinirajući ih sa stilovima ćelija, možete kreirati složene prikaze sadržaja.
Uobičajeno predstavljanje stranice u obliku pravougaonika uopće ne sprječava da se prikaže u obliku tabele. To su također pravokutnici, ali su i ćelije tabele, odnosno imaju svoja pravila koja dopunjuju pravila blokova.
Apsolutno pozicioniranje
Blokirajte pravilom POSITION: absolute ; će se nalaziti na lokaciji određenoj svojim koordinatama u odnosu na blok u kojem se nalazi.
Karakteristična karakteristika CSS pravila je "vježbanje - najbolji kriterijum istina" u većini slučajeva, posebno kada je potrebna kompatibilnost među pretraživačima i raspored se radi ručno, bolje je proučavati punopravne priručnike na kaskadnim stilskim listovima.
Korištenje tablica često dovodi do problema sa pomjeranjem 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 paddinga nije uvijek trivijalno rješenje za CSS.
U nekim slučajevima, kada morate rasporediti elemente stranice u dubini nekih popularan sistem upravljanje sadržajem web stranice, ipak je potrebno obratiti pažnju ne samo na eksperimentalnu praksu, već i na iskustva kolega.
Dobar dan! Postavljanje uvlaka za tekst i slike glavna je tema današnje publikacije. Pogledajmo bliže koji pristupi se mogu primijeniti u praksi.
Prilikom izrade web stranice, webmaster se bavi tekstualni blokovi i fraze objavljene na stranicama projekta. Rješavanje pojedinačnih problema uključuje korištenje HTML oznake, dodano uredniku. Postoji nekoliko tipova atributa koji vam omogućavaju premještanje fraza ili promjenu lokacije fragmenata elektronska stranica.
Postavljanje uvlaka umetanjem razmaka
Pogledajmo kako uvući tekst u HTML koristeći posebna oznaka, osiguravajući stvaranje praznine. Potrebno je ubaciti kod potreban broj puta kako bi se postiglo željeno odstupanje od ivice stranice.
Gore navedeni kod mogu obraditi sve vrste pretraživača, a webmaster će dobiti zajamčeni rezultat. Nedostatak ove metode su njene ograničene mogućnosti, jer je za povećanje udaljenosti potrebno dodati velika količina oznake, a to zatrpava dokument.
Primjena oznake citata
Proučavajući detaljno kako uvući tekst u HTML kodu, možete naići alternativna metoda, davanje više mogućnosti.
Ovdje ćete morati koristiti blok citata, koji vam omogućava da pomjerite fragment lijevo i desno za oko 40 px. Dovoljno je napisati kod identičan navedenom primjeru:
Metoda vam omogućava da manipulišete frazama unutar fiksne vrijednosti od 40 px. Također je vrijedno napomenuti da u ovu oznaku obično završavaju citatom.
Alternativne opcije
Ako planirate da se pomerite na nestandardnu udaljenost, moraćete da koristite parametar uvlačenja teksta, koji se odnosi na stil CSS tabela. Metoda koja se razmatra osigurava stvaranje devijacije prvog reda za potrebna udaljenost. Potrebno je izvršiti sljedeće promjene u uređivaču:
Kada je potrebno izmjeriti potreban broj piksela sa slike, preferiraju se jednostavni ali efikasni kodovi.
U prvom slučaju postavljaju se samo vrijednosti pomaka od ivica slike. U drugom, položaj slike je postavljen na lijevu ivicu s tekstom koji teče udesno, au trećem - obrnuto.
Informacijama je došao kraj. Recite mi, jeste li pronašli informacije koje ste tražili? Odgovor možete napisati u komentarima.
Na kraju, spomenut ću da je Workip blog prvenstveno posvećen monetarnim opcijama za zarađivanje novca na internetu. Znate li koje metode su zaista finansijski obećavajuće? Opisi nekih od njih su već objavljeni.
Objavljivanje materijala se nastavlja. Pretplatite se na email za ažuriranja projekta. Vidimo se kasnije.
