Varati list: Kako uvučete tekst CSS

Web resursa u vrijednosti od strane korisnika za svoj vizualni žalbu. Stoga, čak i korisne informacije tekst ne može pročitati zbog činjenice da je loše dizajniran. Zaključak - potreba da se pažljivo i pažljiv ne samo semantički sadržaj stranica, već i na vizualne prezentacije. Pojava CSS tehnologija povećava mogućnost stvaranja atraktivnog članaka. Jedna od karakteristika, za cilj da olakša percepciju pismenog - alineja CSS tekst.

Margin i padding: u čemu je razlika?

Prije nego što počnete za formatiranje teksta, morate razumjeti ono što margine i padding. Uprkos činjenici da su ovi označavanje elemenata u nekim slučajevima izgledaju isto korisniku, postoje bitne razlike između njih:

• polje postavlja padding imovine, alineja - marža;
• polje je određen raskorak između sadržaja i blok granica, prostor - između granica susjednih blokova;
• polje može se smatrati kao element u veličini (širina i visina) i br.

marža imovine

Dakle, da postavite horizontalno ili vertikalno padding CSS tekst, koristite dizajn marginu. Ova nekretnina se odnosi na oznaku

paragraf majstor dokument. U najjednostavnijem slučaju, to se može pisati kao:

margin: 12px.

Ova linija znači da je oko blok teksta (ili bilo koji drugi blok) na svim stranama nalazi se u udubljenje 12 piksela. Da biste povećali interval, na primjer, tri puta je dovoljno napisati:

margin: 36px.

Ali šta ako između blokova intervala treba biti drugačiji na svakoj strani? Web programeri koristiti nekoliko oblika zapisa:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

U prvom primjeru, udubljenje 11 piksela se izrađuju od donje i gornje granice bloka, sa strane bloka - za 22 piksela. Prema drugi rekord jedinice između gornjeg ruba i sadržaj će biti 11 piksela, između donjeg - 33 piksela na svakoj strani - za 22 piksela. U trećem slučaju CSS alineja tekst će imati vrijednost od 11 piksela od vrha, desna strana 22 piksela, 33 piksela i 44 piksela od donjem lijevom uglu.

Takođe dostupno je mogućnost snimanja udaljenost od granice blok na samo jednoj strani: margin-top, margin-bottom , margin-lijevo, marža-desno. Prevođenje imena svojstava na ruskom jeziku, to je lako pogoditi o njihovom imenovanju. Na primjer, sljedeći unos pokazuje da je otvor na desnoj strani će biti jednak 22 piksela:

margin-right: 22rh.

Za preostale udaljenosti oko strane bloka pretpostavlja se da je jednak vrijednosti elementa roditelja.

Margina imovine ima funkcije koje developer treba zapamtiti kada se koristi CSS tekst razvedenom vertikalno. Intervalima od susjednih elemenata se ne sabiraju, i preklapaju jedni na druge. Na primjer, pretpostavimo da je jedan od jedinica ima margin-bottom: 15px, a ispod susjednog bloka margin-top: 35px. Škola aritmetičke i zdrav razum nalaže da je ukupni razmak između njih će biti 50 piksela. U praksi to nije slučaj. Blok sa velikim vrijednost imovine margine «lasta" njegov komšija. Kao rezultat toga, interval između elemenata je 35 piksela.

"Crvena" linija

Izrada dokumenta u tekst editoru, korisnici radije pitati svaki novi stav sa "crvene" liniju. Koristeći CSS tekst alineje na lijevoj strani je jednostavno za napraviti - upotreba teksta alineja dizajn. Napisao ovako:

text-indent: 11px.

To je prva linija stava prebačen u odnosu na lijevu marginu od 11 piksela. Da bi se tekst na web stranici izgledao više kao dokument u editoru, trebate instalirati dodatni opravdanje, to jest, pišu:

text-indent: 11px;

text-align: justify.

Osim piksela, u opisu upotrebe drugih markup jedinice - inčni tvrdi posto. Neka jedinica ima tekst CSS uvlačenje od 10%. Kada širine bloka od 500 piksela, crvena linija će biti 50 piksela (10% od 500).

Za ovu nekretninu može biti izloženi vrijednosti naslediš. Ovaj rekord kaže da je uređaj koristi slične nekretnine roditeljske jedinice.

text-indent: naslediš.

Iznenađujuće, udubljenja mogu poprimiti negativne vrijednosti! U ovom slučaju, projekcije se formiraju tzv, to je osnovni tekst ostaje na snazi, a prva linija se prebacuje na lijevo za 22 piksela:

text-indent: -22px.

Slova nisu prošli preko levog granice pretraživača, pored teksta alineja treba koristiti za definiranje strukture na terenu:

padding-left: 22px.

korisne savete

Osnovna svojstva CSS za formatiranje teksta se uzeti u obzir. Te ih fiksirajte pomoć praksi. Evo nekoliko konačne savjete o tome kako primijeniti naučene materijala u web development:

• crvenu liniju i uvlačenje teksta - različitih koncepata, kao i različita svojstva koriste za njihovo vođenje;
• vertikalna pravila udubljenje ne primjenjuju matematike - intervalima preklapaju, "osvaja" element sa većom vrijednosti;
• negativan uvlačenje koristi da ukaže na prvoj liniji od stava sa slikom.