Web-resurs korisnici ocjenjuju zbog njegove vizualne privlačnosti. Stoga, čak i informativne koristan tekst ne može se pročitati zbog činjenice da je loše dizajniran. Zaključak - morate pažljivo i pažljivo pristupiti ne samo semantičkom sadržaju stranica web-mjesta, već i njegovom vizualna prezentacija... Pojava CSS tehnologije proširili su mogućnosti izrade atraktivnih članaka. Jedno od svojstava osmišljenih da olakšaju čitanje je uvlaka. CSS tekst.
Margine i padding: u čemu je razlika?
Prije nego počnete oblikovati tekst, trebali biste razumjeti što su margine i uvlake. Unatoč činjenici da ovi elementi označavanja u nekim slučajevima izgledaju isto za korisnika, postoje temeljne razlike između njih:
- polje je postavljeno svojstvom padding, uvlaka - margina;
- margina je određena razmakom između sadržaja i granice bloka, uvlačenje je između granica susjednih blokova;
- margine se mogu uzeti u obzir u dimenzijama elementa (širina i visina), ili ne.
Svojstvo marže
Dakle, da biste postavili vodoravno ili okomito uvlačenje CSS teksta, koristite konstrukciju margina... Ovo svojstvo se odnosi na oznaku dokumenta koji definira stavak. 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) sa svih strana napraviti uvlaka od 12 piksela. Za povećanje intervala, na primjer, tri puta, dovoljno je zapisati:
margina: 36px.
Ali što 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 donjeg i gornjeg ruba bloka, a od 22 piksela od strana bloka. Prema drugom obliku zapisa, bit će 11 piksela između gornjeg ruba bloka i sadržaja, 33 piksela između dna i 22 piksela sa strane. U trećem slučaju, padding će biti 11 piksela od vrha, 22 piksela s desne strane, 33 piksela od dna i 44 piksela slijeva.
Također je moguće zabilježiti udaljenost do granice bloka samo s jedne strane: margin-top, margin-bottom, margin-lijevo, margin-desno... Nakon što smo preveli nazive nekretnina na ruski, lako je pogoditi njihovu svrhu. Na primjer, sljedeći unos kaže da će uvlačenje s desne strane biti 22 piksela:
margin-desno: 22px.
Za ostale stranice pretpostavlja se da su udaljenosti oko bloka jednake vrijednosti roditeljskog elementa.
Vlasništvo margina ima neobičnost koju razvojni programer mora imati na umu kada koristi okomito punjenje CSS teksta. Intervali susjedni elementi se ne zbrajaju, već se nalažu jedno na drugo. 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 će ukupan prostor između njih biti 50 piksela. U praksi to nije slučaj. Blokirajte sa velika vrijednost Svojstva margina Hoće li "progutati" svog susjeda. Kao rezultat toga, razmak između elemenata bit će 35 piksela.
"Crvena crta
Izrada dokumenta u uređivač teksta, korisnici radije pitaju svaki novi stavak koristeći "crvenu" liniju. S koristeći CSS lako je uvući tekst ulijevo – koristi se konstrukcija uvlaka teksta... Napisano je ovako:
uvlaka teksta: 11px.
To jest, prvi redak odlomka bit će pomaknut u odnosu na lijevi rub 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: opravdati.
Osim piksela, pri opisu oznake dopušteno je koristiti i druge jedinice - inče, bodove, postotke. Neka blok ima dopunu CSS teksta od 10%. Uz širinu bloka od 500 piksela, crvena linija bit će 50 piksela (10% od 500).
Za ove imovine vrijednost se može postaviti naslijediti... 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 tom slučaju nastaju takozvane izbočine, odnosno glavni tekst ostaje na mjestu, a prvi redak se pomiče ulijevo za 22 piksela:
uvlaka teksta: -22px.
Da slova ne idu preko lijeva granica preglednik, pored uvlaka teksta trebate koristiti konstrukciju za postavljanje polja:
padding-left: 22px.
Glavni CSS svojstva za recenzirano. Praksa će vam pomoći da ih konsolidirate. 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 za njihovo označavanje koriste se različita svojstva;
- za vertikalni padding pravila matematike ne vrijede - intervali su superponirani, element s velikom vrijednošću "pobjeđuje";
- negativan alineja stavka koriste se za označavanje prvog retka odlomka pomoću slike.
Margine i padding su vrlo 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 još uvijek postoje razlike.
Elementi mogu biti ugniježđeni, mogu biti susjedni jedan uz drugi. Pogledajmo sljedeći primjer:
Imamo dva stola, limun i plava smještene jedna ispod druge. Tablice se sastoje od jedne ćelije. U ćeliji prve tablice nalazi se crveni blok. U ovom primjeru, pogledajmo kako rade margine i padding.
Polja su postavljena stilom padding... Ovaj stil je primjenjiv samo na elemente spremnika koji mogu sadržavati druge elemente. Stil vam omogućuje postavljanje vrijednosti margina između rubova elementa i njegovog sadržaja. Stil margina omogućuje vam da postavite padding od elementa do najbližih granica drugog elementa. Granice drugog elementa mogu biti granice roditeljskog spremnika, kao i rubovi same stranice.
Postoji nekoliko načina za definiranje ovih stilova. Na primjer, možete izravno odrediti veličinu svih margina ili dopuna s jednim argumentom u nekoj mjernoj jedinici (px, ex, em, pt, cm i tako dalje):
padding: 3px; margina: 3px;U ovom slučaju, margine i margine će biti iste na sve četiri strane. Prilikom navođenja dva argumenta odvojena razmakom:
padding: 3px 5px; margina: 3px 5px;prvi će odrediti količinu margina / padding na vrhu i dnu, drugi - s lijeve i desne strane. Kada su data tri argumenta:
padding: 3px 5px 2px; margina: 3px 5px 2px;prvi je margina / padding na vrhu, drugi je s lijeve i desne strane u isto vrijeme, treći je na dnu. Sa četiri argumenta:
padding: 3px 5px 2px 6px; margina: 3px 5px 2px 6px;prvi je margina/podstava na vrhu, drugi je s desne strane, treći je na dnu, a četvrti je s lijeve strane. Lako je zapamtiti: prvi je odozgo, a zatim u smjeru kazaljke na satu. Osim toga, možete zasebno postaviti margine i margine za određeni rub, koristeći odgovarajuće stilove: padding-top, padding-desno, padding-bottom, padding-lijevo, margin-top, margina-desno, margina-dno, margina-lijevo... Vrijednost ovih stilova može biti samo jedan argument, koji specificira količinu margine/ispuna za danu stranu.
Na slici je crveni blok unutar ćelije tablice i uz njezine 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 tablice su jedna uz drugu, ako ih želimo malo razmaknuti, možemo primijeniti uvlake. Ovdje postoje dvije opcije: ili postavite donji padding prve tablice, ili gornji padding druge tablice. Koristimo drugu:
margin-top: 5px;Imajte na umu da uvlačenje postavljamo na tablicu, a ne na ćeliju tablice, kao što je slučaj s poljima. Evo rezultata:
Usput, u prvom slučaju (razmak između crvenog bloka i granica roditeljske ćelije) isti bi se učinak mogao postići postavljanjem uvlaka bloka. Općenito, ako nešto nije jasno, odjavljujemo se u komentarima.
HTML kod testne stranice:
<html> <glava> <naslov> Test</ naslov> <meta http-equiv = "Content-Type" content = "tekst / html; charset = utf-8"> </ glava> <tijelo> <stil> tablica (š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> <stolni stil = "pozadina: vapno"> <tr> <td style = "padding: 5px"> <div stil = "margin: 0px"></ div> </ td> </ tr> </ tablica> <stil stola = "pozadina: nebeskoplava; margin-top: 5px"> <tr> <td></ td> </ tr> </ tablica> </ tijelo> </ html>HTML uvlačenje tekst- u procesu izrade web stranice moramo puno raditi s 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.
Tako, html uvlaka teksta, prva metoda je najprirodnija i najjednostavnija. Za uvlačenje ispred teksta dodajte prije html tekst prostorni kod - Dodaj html koda 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 ulijevo, koristite prostorni kodp> tijelo> html>
V ovaj primjer, prije teksta koji smo odabrali, razmak je -
& nbsp; dodano četiri puta, kao rezultat, dobivamo uvlaku koja nam je potrebna.Znamo da kodom razmaka rukuje svaki preglednik. Stoga, dodavanjem potrebnog broja razmaka ispred teksta, možete dobiti potrebnu uvlaku za tekst.
Dobra stvar ove metode je da će zajamčeno raditi u bilo kojem pregledniku.
Ali imati ovu metodu tamo je značajan nedostatak... Kako 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, glomazno i neprofesionalno.
Jedna od opcija za rješavanje ovog problema je sljedeći način postaviti udubljenje.
Uvlačenje HTML teksta, drugi način - ova metoda se temelji 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><blok citat> HTML uvlačenje teksta na lijevoj strani, koristite oznaku blok citatblok citat>p>
Kao što vidite, ova metoda postavljanja uvlačenja teksta vrlo je jednostavna za korištenje, ali ova metoda ima i značajan nedostatak. Uvlačenje koje postavlja oznaka blok citat, je fiksna i uvijek je iste vrijednosti - 40px.
Za popravak situacije i pri dodavanju html uvlaka i za tekst biti u mogućnosti postaviti bilo koju vrijednost, koristit ćemo treću metodu.
Uvlačenje HTML teksta, metoda tri.
Ovdje ćemo koristiti svojstvo uvlake teksta CSS Cascading Style Sheets.
Ako otvorite CSS referenca, na stranici s opisom svojstava text-indent, vidjet ćemo da uz pomoć text-indent možemo postaviti količinu uvlačenja prvog retka ili prvog odlomka bilo kojeg bloka teksta.
Razmatramo primjer s kratkim tekstualnim blokom, tako da su svojstva uvlake teksta u redu za naš slučaj.
Ispod je html kod koji uvlači tekst pomoću uvlake teksta. Iz primjera to možete vidjeti postavljanjem uvlake teksta različita značenja argumentima, možemo promijeniti količinu uvlačenja teksta:
<p style = "uvlaka teksta: 100px"> HTMLuvlačenjetekst, 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, četvrta metoda - 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 navedenog primjera jasno se vidi da promjenom širine slike možemo promijeniti položaj 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 svakoj 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 prilagodbe izgled Internet stranice. Danas bih želio ukratko pokazati kako definirati in css uvlačenje na vrhu ili na bilo kojoj drugoj strani za bilo koji element.
Vanjska podstava
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ćuju da ga napravite samo s jedne strane.
Ispuna određuje udaljenost na kojoj će odabrani rub elementa biti odmaknut od ostalih elemenata na stranici. Na primjer, unos:
P, div (Margin-top: 20px;)
Znači da će svi blokovi i odlomci biti uvučeni od vrha za 20 piksela, odnosno da će njihov gornji rub biti odmaknut od susjednih elemenata za tu udaljenost.
Uvlake se mogu napisati na svakoj strani koristeći samo jedno svojstvo margine, koje je upisano 4 vrijednosti u nizu:
Div (Margina: 20px 10px 20px 10px;)
Uvlake će biti navedene na gornjem, desnom, donjem i lijevom rubu. Budući da 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.
Unutarnja podstava
Padding radi drugačije - ne odmiče okvir od drugih elemenata, već dodaje tu udaljenost unutar elementa, pomičući sadržaj (sadržaj) okvira od njegovih rubova. Udoban je. Gdje ste vidjeli stranicu na kojoj tekst počinje u samom gornjem lijevom kutu prozora?
Nisam to vidio, jer web programeri uvijek koriste padding i padding kako bi tekst učinili što lakšim za čitanje. Unutarnji padding napisane su pomoću svojstva padding, u kojem možete navesti 4 vrijednosti odjednom za sve rubove, odnosno odvojene razmakom.
Također, na isti način s marginom, možete dodati naziv strane i postaviti udaljenost samo za nju. Na primjer, gornji padding može se napisati pomoću padding-top. općenito, padding svojstvo radi točno kao svojstvo margine.
Na primjer, možete dati sljedeći dio koda:
Blok (širina: 200px; padding: 20px;)
Što 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, što je 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 pobliže koji se pristupi 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 vrsta atributa koji vam omogućuju premještanje fraza ili promjenu položaja fragmenata e-stranica.
Postavljanje uvlaka umetanjem razmaka
Pogledajmo kako uvući tekst u HTML koristeći posebna oznaka, osiguravajući stvaranje praznine. Morate zalijepiti kôd onoliko puta koliko je potrebno da postignete željeni pomak od ruba stranice.
Gore navedeni kôd obrađuju sve vrste preglednika, a webmaster će ga primiti zajamčeni 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 uvući tekst u HTML kod, možda ćete naići alternativna metoda davanje više mogućnosti.
Ovdje morate koristiti blok citata, koji vam omogućuje da pomaknete fragment ulijevo i udesno za oko 40 px. Dovoljno je napisati kod identičan gornjem primjeru:
Metoda vam omogućuje da manipulirate 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 uvlaka teksta koji se odnosi na stil CSS tablica... Razmatrana metoda osigurava stvaranje devijacije prvog reda po željenu udaljenost... Morate napraviti sljedeće promjene u uređivaču:
Kada je potrebno izmjeriti potreban broj piksela sa slike, preferiraju jednostavne, ali učinkovite kodove.
U prvom slučaju postavljaju se samo vrijednosti pomaka od rubova slike. U drugom se položaj slike postavlja lijevo s protokom teksta udesno, au trećem obrnuto.
Informaciji je došao kraj. Recite mi, jeste li pronašli informacije koje vas zanimaju? Odgovor možete napisati u komentarima.
Na kraju ću spomenuti da je Workip blog uglavnom posvećen novčanim opcijama za zarađivanje novca na internetu. Znate li koje metode stvarno obećavaju financijski? Opisi nekih od njih već su objavljeni.
Objavljivanje materijala se nastavlja. Pretplatite se na email za ažuriranje projekta. Do sljedećeg puta.
