Web resurs korisnici ocjenjuju zbog njegove vizualne privlačnosti. Stoga, čak i informativne koristan tekst možda neće biti pročitana zbog činjenice da je loše dizajnirana. Zaključak - morate pažljivo i pažljivo pristupiti ne samo semantičkom sadržaju stranica web-mjesta, već i njegovom vizuelna prezentacija... Pojava CSS tehnologije proširili su mogućnosti kreiranja atraktivnih članaka. Jedno od svojstava dizajniranih da olakšaju čitanje je uvlačenje. CSS tekst.
Margine i padding: u čemu je razlika?
Prije nego počnete s formatiranjem teksta, trebali biste razumjeti što su margine i uvlake. Unatoč činjenici da ovi elementi označavanja u nekim slučajevima izgledaju isto za korisnika, postoje fundamentalne razlike između njih:
- polje je postavljeno svojstvom padding, uvlačenje - margina;
- margina je određena razmakom između sadržaja i ivice bloka, uvlačenje je između granica susjednih blokova;
- margine se mogu uzeti u obzir u dimenzijama elementa (širina i visina), ili ne.
Margin property
Dakle, da postavite horizontalno ili vertikalno uvlačenje CSS teksta, koristite konstrukciju margina... Ovo svojstvo se odnosi na oznaku dokumenta koji definiše paragraf. U samom jednostavan slučaj napisano je kao:
margina: 12px.
Takva linija znači da će se oko bloka teksta (ili bilo kojeg drugog bloka) napraviti uvlačenje od 12 piksela sa svih strana. Za povećanje intervala, na primjer, tri puta, dovoljno je zapisati:
margina: 36px.
Ali šta ako bi razmak između blokova trebao biti različit na svakoj strani? Web programeri koriste nekoliko oblika pisanja:
- margina: 11px 22px.
- margina: 11px 22px 33px.
- margina: 11px 22px 33px 44px.
U prvom primjeru, uvlake od 11 piksela će biti napravljene od donje i gornje granice bloka, a od 22 piksela od strana bloka. Prema drugom obliku pisanja, biće 11 piksela između gornje ivice bloka i sadržaja, 33 piksela između donje ivice i po 22 piksela sa strane. U trećem slučaju, padding će biti 11 piksela od vrha, 22 piksela sa desne strane, 33 piksela od dna i 44 piksela sa leve strane.
Također je moguće snimiti udaljenost do granice bloka samo s jedne strane: margin-top, margin-bottom, margin-left, margin-right... Nakon što smo preveli nazive nekretnina na ruski, lako je pogoditi njihovu svrhu. Na primjer, sljedeći unos kaže da će uvlačenje na desnoj strani biti 22 piksela:
margin-desno: 22px.
Za ostale strane, udaljenosti oko bloka se pretpostavljaju jednake vrijednosti roditeljskog elementa.
Nekretnina margina ima jednu osobinu koju programer mora imati na umu kada koristi vertikalni padding CSS teksta. Intervali susjedni elementi nisu sažimane, već se naslanjaju jedna na drugu. Na primjer, neka ima jedan od blokova margin-bottom: 15px, i blok uz njega odozdo margin-top: 35px... Školska aritmetika i zdrav razum nalažu da ukupan razmak između njih bude 50 piksela. U praksi to nije slučaj. Blokiraj sa velika vrijednost svojstva margina"Progutaće" svog komšiju. Kao rezultat, razmak između elemenata će biti 35 piksela.
"Crvena linija
Izrada dokumenta u uređivač teksta, korisnici radije pitaju svaki novi stav koristeći "crvenu" liniju. WITH koristeći CSS lako je uvući tekst ulijevo - koristi se konstrukcija uvlaka teksta... Napisano je ovako:
uvlaka teksta: 11px.
Odnosno, prvi red pasusa bit će pomjeren u odnosu na lijevu ivicu za 11 piksela. Da bi tekst na web stranici više ličio na dokument u uređivaču, potrebno je dodatno instalirati, odnosno napisati:
uvlaka teksta: 11px;
text-align: justify.
Osim piksela, pri opisivanju oznake, dozvoljeno je koristiti i druge jedinice - inče, bodove, postotke. Neka blok ima dopunu CSS teksta od 10%. Sa širinom bloka od 500 piksela, crvena linija će biti 50 piksela (10% od 500).
Za ove imovine vrijednost se može podesiti nasljediti... Takav unos kaže da blok koristi slično svojstvo roditeljskog bloka.
uvlaka teksta: naslijediti.
Iznenađujuće, može potrajati i negativne vrijednosti! U ovom slučaju se formiraju takozvane izbočine, odnosno glavni tekst ostaje na mjestu, a prvi red se pomiče ulijevo za 22 piksela:
uvlaka teksta: -22px.
Da slova ne prelaze lijeva granica pretraživač, pored uvlaka teksta trebate koristiti konstrukciju za postavljanje polja:
padding-left: 22px.
Glavni CSS svojstva za recenzirano. Praksa će vam pomoći da ih konsolidujete. Evo nekoliko konačnih savjeta o tome kako primijeniti ovaj materijal na razvoj vaše web stranice:
- crvena linija i uvlaka teksta su različiti koncepti, a različita svojstva se koriste za njihovo označavanje;
- za vertikalni padding pravila matematike ne vrijede - intervali se preklapaju, element s velikom vrijednošću "pobjeđuje";
- negativan uvlaka stava koriste se za označavanje prvog reda pasusa pomoću slike.
Margine i padding su veoma važni stilovi pri izradi HTML stranice. Omogućuju vam preciznije pozicioniranje elemenata, stvaranje okvira s potrebnim prazninama itd. Oba stila su vrlo slična i obavljaju slične funkcije. Ali i dalje postoje razlike.
Elementi mogu biti ugniježđeni, mogu biti susjedni jedan uz drugi. Pogledajmo sljedeći primjer:
Imamo dva stola, limun i plava koji se nalaze jedan ispod drugog. Tabele se sastoje od jedne ćelije. U ćeliji prve tablice nalazi se crveni blok. U ovom primjeru, pogledajmo kako funkcioniraju margine i padding.
Polja su postavljena stilom padding... Ovaj stil je primjenjiv samo na elemente kontejnera koji mogu sadržavati druge elemente. Stil vam omogućava da postavite vrijednost margina između rubova elementa i njegovog sadržaja. Stil margina omogućava vam da postavite padding od elementa do najbližih granica drugog elementa. Granice drugog elementa mogu biti ivice roditeljskog kontejnera, kao i ivice same stranice.
Postoji nekoliko načina za definiranje ovih stilova. Na primjer, možete direktno odrediti veličinu svih margina ili zaliha s jednim argumentom u nekoj mjernoj jedinici (px, ex, em, pt, cm itd.):
padding: 3px; margina: 3px;U ovom slučaju, margine i margine će biti iste na sve četiri strane. Kada navedete dva argumenta odvojena razmakom:
padding: 3px 5px; margina: 3px 5px;prvi će odrediti količinu margina / paddinga na vrhu i dnu, drugi - s lijeve i desne strane. Kada se daju tri argumenta:
padding: 3px 5px 2px; margina: 3px 5px 2px;prvi je margina/podstava na vrhu, drugi je istovremeno lijevo i desno, treći je na dnu. Sa četiri argumenta:
padding: 3px 5px 2px 6px; margina: 3px 5px 2px 6px;prva je margina/podstava na vrhu, druga je na desnoj strani, treća je na dnu, a četvrta je na lijevoj strani. Lako je zapamtiti: prvi je odozgo, a zatim u smjeru kazaljke na satu. Osim toga, možete zasebno postaviti margine i margine za određenu ivicu, koristeći odgovarajuće stilove: padding-top, padding-desno, padding-bottom, padding-left, margin-top, margin-desno, margin-bottom, margin-left... Vrijednost ovih stilova može biti samo jedan argument, koji specificira količinu margine / dopuna za datu stranu.
Na slici je crveni blok unutar ćelije tabele i uz njene granice, odnosno ćelija nema margine. Postavimo polja na ćeliju koristeći stil:
padding: 5px;Kao rezultat, stranica će se promijeniti u sljedeće:
Pogledajmo sada udubljenje. Dvije tabele su jedna uz drugu, ako želimo da ih malo razmaknemo, možemo primijeniti uvlake. Ovdje postoje dvije opcije: ili postavite donji padding prve tabele, ili gornji padding druge tabele. Koristimo drugu:
margin-top: 5px;Imajte na umu da uvlačenje postavljamo na tabelu, a ne na ćeliju tabele, kao što je slučaj sa poljima. Evo rezultata:
Inače, u prvom slučaju (razmak između crvenog okvira i ivica roditeljske ćelije) isti efekat bi se mogao postići postavljanjem margina okvira. Općenito, ako nešto nije jasno, otkazujemo pretplatu u komentarima.
HTML kod testne stranice:
<html> <glava> <naslov> Test</ naslov> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8"> </ glava> <tijelo> <stil> tabela (širina: 200px; visina: 150px; granica: 1px čvrsta # 555; border-collapse: kolaps) td (vertical-align: top; padding: 0px) div (širina: 100px; visina: 100px; pozadina: crvena)</ stil> <table style = "pozadina: kreč"> <tr> <td style = "padding: 5px"> <div style = "margin: 0px"></ div> </ td> </ tr> </ stol> <stil stola = "pozadina: nebeskoplava; margin-top: 5px"> <tr> <td></ td> </ tr> </ stol> </ tijelo> </ html>HTML uvlačenje tekst- u procesu kreiranja web stranice, moramo puno raditi sa tekstualnim blokovima, odnosno tekstualnim frazama. Jednom sam trebao dodati tekstualnu frazu, tako da je prije ove tekstualne fraze bilo nešto uvuci tekst iz html rubovi
blok u koji je dodan dati tekst.
dakle, html uvlačenje teksta, prva metoda je najprirodnija i najjednostavnija. Da biste uvukli ispred teksta, dodajte prije html tekst prostorni kod - Dodaj html kod razmaci se mogu koristiti u bilo kojem html uređivaču.
Evo primjera radnog koda za postavljanje uvlačenja za tekst, koristeći razmaknicu:
<html> <glava> <naslov>HTML uvlačenje tekstanaslov> glava> <tijelo> <p> Html uvuci tekst na lijevo, koristite prostorni kodp> tijelo> html>
V ovaj primjer, prije teksta koji smo odabrali, razmak je -
& nbsp; dodano četiri puta, kao rezultat, dobijamo uvlaku koja nam je potrebna.Znamo da kodom za razmak rukuje svaki pretraživač. Stoga, dodavanjem potrebnog broja razmaka ispred teksta, možete dobiti potrebno uvlačenje za tekst.
Dobra stvar u vezi sa ovom metodom je to što je zagarantovano da će raditi u bilo kom pretraživaču.
Ali imati ovu metodu tu je značajan nedostatak... Da bi uvlačenje teksta bilo dovoljno veliko, u html kodu, prije teksta, morat ćete dodati veliki broj svemirski likovi, koji možda ne izgledaju lijepo, glomazni i neprofesionalni.
Jedna od opcija za rješavanje ovog problema je sljedeći način postaviti udubljenje.
Uvlačenje HTML teksta, drugi metod - ovaj metod se zasniva na svojstvima oznake blok citata. Ova oznaka postavlja uvlačenje od približno 40 piksela lijevo i desno za tekst koji se nalazi u njoj. Osim toga, podstava je postavljena na vrhu i na dnu. Html primjer kod za korištenje ove metode je dat u nastavku:
<p><blockquote> HTML uvlačenje teksta na lijevoj strani, koristite oznaku blok citatblockquote>p>
Kao što vidite, ovaj način postavljanja uvlačenja teksta je vrlo jednostavan za korištenje, ali ima i značajan nedostatak. Uvlačenje koje postavlja oznaka blok citat, je fiksna i uvijek je ista vrijednost - 40px.
Za popravku situacije i prilikom dodavanja html indent i za tekst biti u mogućnosti postaviti bilo koju vrijednost, koristićemo treću metodu.
Uvlačenje HTML teksta, treći metod.
Ovdje ćemo koristiti svojstvo uvlačenja teksta CSS Cascading Style Sheets.
Ako otvorite CSS referenca, na stranici sa opisom svojstava text-indent, vidjet ćemo da uz pomoć text-indent možemo podesiti količinu uvlačenja prvog reda ili prvog pasusa bilo kojeg bloka teksta.
Razmatramo primjer s kratkim tekstualnim blokom, tako da su svojstva uvlačenja teksta u redu za naš slučaj.
Ispod je html kod koji uvlači tekst koristeći text-indent. Iz primjera to možete vidjeti postavljanjem text-indent različita značenja argumentima, možemo promijeniti količinu uvlačenja teksta:
<p style = "uvlaka teksta: 100px"> Htmlindenttekst, radi CSS stil - uvlaka tekstap>
Po mom mišljenju, ovaj način postavljanja uvlačenja za tekst je najoptimalniji, ali, ipak, razmislite o drugom načinu postavljanja uvlačenja, korištenjem slika.
Uvlačenje HTML teksta, četvrti metod - ovdje ćemo koristiti sliku za postavljanje uvlačenja.
Kao radni primjer, pogledajmo html kod koji pokazuje kako ova metoda funkcionira:
HTML uvlačenje teksta
na lijevoj strani, koristite sliku
Iz datog primjera se jasno vidi da promjenom širine slike možemo promijeniti poziciju teksta, odnosno postaviti potrebno uvlačenje teksta.
Kao sliku možete koristiti sliku čija su širina i visina jednake jednom pikselu. Kako slika koju koristimo nije vidljiva na stranici, postavite boju za nju potpuno istu kao i pozadina stranice stranice.
Po mom mišljenju, gore navedene metode postavljanja uvlaka teksta sasvim su dovoljne da organizirate uvlačenje koje vam je potrebno u bilo kojoj situaciji kada dodajete sadržaj na stranicu vaših web stranica.
Dobrodošli na moj blog. Css (Cascading Style Sheets) pruža mnoge mogućnosti prilagođavanja izgled web stranice. Danas bih želeo da ukratko pokažem kako se definiše u css indent na vrhu ili na bilo kojoj drugoj strani za bilo koji element.
Vanjski padding
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 je napravite samo na jednoj strani.
Pading određuje udaljenost na kojoj će odabrana ivica elementa biti odmaknuta 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 od vrha za 20 piksela, odnosno da će njihova gornja ivica biti odmaknuta od susjednih elemenata za ovu udaljenost.
Uvlake se mogu napisati na svakoj strani koristeći samo jedno svojstvo margine, u koje se upisuju 4 vrijednosti u nizu:
Div (Margina: 20px 10px 20px 10px;)
Uvlake će biti date na gornjoj, desnoj, donjoj i lijevoj ivici, respektivno. Pošto su u ovom slučaju jednake na suprotnim stranama, moglo bi se napisati i ovako:
Div (Margina: 20px 10px;)
Prva vrijednost je gornji i donji padding, a druga su strane.
Unutrašnji padding
Padding radi drugačije - ne pomiče okvir od drugih elemenata, već dodaje ovu udaljenost unutar elementa, pomičući sadržaj (sadržaj) okvira od njegovih rubova. To je udobno. Gde ste videli sajt gde tekst počinje u samom gornjem levom uglu prozora?
Ovo nisam vidio, jer web programeri uvijek koriste padding i padding kako bi tekst učinili što lakšim za čitanje. Unutrašnji padding su napisane pomoću svojstva padding, u kojem možete navesti 4 vrijednosti odjednom za sve rubove, odnosno odvojene razmakom.
Također, na isti način sa marginom, možete dodati naziv strane i postaviti udaljenost samo za nju. Na primjer, gornji padding se može napisati korištenjem padding-top. općenito, padding property radi isto kao i svojstvo margine.
Na primjer, možete dati sljedeći 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 šminkanja.
Također bih želio napomenuti da se padding postavlja samo normalno blok elementi, bolje je ne davati ga malim slovima. Margina dobro funkcionira sa svim elementima.
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 tekstualnim blokovima i frazama postavljenim na stranicama projekta. Rješavanje pojedinačnih problema uključuje korištenje HTML oznake dodano uredniku. Postoji nekoliko tipova atributa koji vam omogućavaju da premještate fraze ili mijenjate lokaciju fragmenata e-stranica.
Postavljanje uvlaka umetanjem razmaka
Pogledajmo kako uvući tekst u HTML koristeći posebna oznaka, osiguravajući formiranje praznine. Morate zalijepiti kod onoliko puta koliko je potrebno da postignete željeni pomak od ruba stranice.
Gore navedeni kod obrađuju sve vrste pretraživača, a webmaster će ga primiti zagarantovan rezultat... Nedostatak ove metode leži u ograničenim mogućnostima, jer da biste povećali udaljenost, morate dodati velika količina oznake, a to zatrpava dokument.
Korištenje oznake citata
Proučavajući detaljno kako da uvučete tekst u HTML kod, možda ćete naići alternativna metoda davanje više mogućnosti.
Ovdje morate koristiti blok citata, koji vam omogućava da pomjerite fragment lijevo i desno za oko 40 px. Dovoljno je napisati kod identičan gore navedenom primjeru:
Metoda vam omogućava da manipulišete frazama unutar fiksne veličine od 40 px. Također je vrijedno napomenuti da u ovu oznaku obično priložite citat.
Alternativne opcije
Ako se namjeravate pomaknuti na nestandardnu udaljenost, morat ćete koristiti parametar text-indent koji se odnosi na stil CSS tabela... Razmatrana metoda omogućava kreiranje devijacije prvog reda za željenu udaljenost... Morate napraviti sljedeće promjene u uređivaču:
Kada je potrebno izmjeriti potreban broj piksela sa slike, preferiraju jednostavne, ali efikasne kodove.
U prvom slučaju postavljaju se samo vrijednosti pomaka od ivica slike. U drugom, pozicija slike je postavljena na lijevo sa protokom teksta udesno, a u trećem, obrnuto.
Informacijama je došao kraj. Recite mi, jeste li pronašli informacije koje vas zanimaju? Odgovor možete napisati u komentarima.
Na kraju, spomenut ću da je Workip blog uglavnom posvećen novčanim opcijama za zarađivanje novca na internetu. Znate li koje metode su finansijski obećavajuće? Opisi nekih od njih su već objavljeni.
Objavljivanje materijala se nastavlja. Pretplatite se na email da ažurirate projekat. Do sljedećeg puta.
