Cheat Sheet: kako prilepiti tekst CSS

Spletni vir ocenjujejo uporabniki glede na zunanjo privlačnost. Zato tudi besedilo, ki je koristno za uporabo, ni mogoče brati zaradi dejstva, da je slabo oblikovan. Sklep - morate pozorno in skrbno pristopiti ne le do semantične vsebine strani mesta, ampak tudi do njegove vizualne predstavitve. Pojav tehnologije CSS je razširil možnosti ustvarjanja privlačnih člankov. Ena od lastnosti, ki naj bi olajšala zaznavanje napisanega besedila, je alinea besedila CSS.

Margine in alinee: kakšna je razlika?

Preden začnete oblikovati besedilo, morate razumeti, katera polja in alinee so. Kljub temu, da ti elementi označevanja v nekaterih primerih za uporabnika izgledajo enaki, med njimi obstajajo bistvene razlike:

• polje je določeno s premoženjem oblazinjenje, indentation - marža;
• polje določi vrzel med vsebino in robom bloka, vdolbino - med mejami sosednjih blokov;
• polja se lahko upoštevajo pri dimenzijah elementa (širina in višina) in ne.

Marža lastnine

Torej, če želite določiti horizontalno ali navpično alineo besedila CSS, uporabite konstrukcijo marža. Ta lastnost se uporablja za oznako glavnega odstavka odstavka. V najpreprostejšem primeru je napisano kot:

marža: 12px.

Takšna črta pomeni, da bo okrog bloka besedila (ali kateregakoli drugega bloka) z vseh strani izrezana 12 slikovnih pik. Za povečanje vrzeli, na primer trikrat, je dovolj zapisati:

marža: 36 slikovnih pik.

Kaj pa, če bi bil interval med bloki na vsaki strani drugačen? Razvijalci spletnih strani uporabljajo več oblik snemanja:

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

V prvem primeru bodo aline narejene iz 11 pik na dnu in na vrhu bloke ter 22 slikovnih pik na straneh bloke. Glede na drugo obliko zapisa bo med zgornjim robom bloka in vsebino 11 slikovnih pik, med spodnjim - 33 slikovnimi pikami, na straneh - 22 slikovnih pik. V tretjem primeru, alinea Besedilo CSS bo 11 slikovnih pik, 22 pikslov desno, 33 pik dno in 44 pikslov levo.

Razdaljo do bloka bloka je mogoča tudi z ene strani: margin-top, margin-bottom, margin-left, margin-right. Prevod imenih lastnosti v ruski jezik je preprosto uganiti njihov namen. Na primer, naslednji vnos pomeni, da bo desni rob 22 pikslov:

margin-right: 22rh.

Za druge stranke se domneva, da so razdalje okrog bloka enake vrednosti nadrejenega elementa.

Lastnina marža ima funkcijo, ki jo mora razvijalec zapomniti pri uporabi navpičnega besedila v CSS. Intervali sosednjih elementov niso zloženi, temveč nasproti drug drugemu. Recimo, da ima en blok spodnji rob: 15px, in blok, ki je sosednji od spodaj margin-top: 35px. Šolska aritmetika in zdrav razum kažejo, da bo skupni razmik med njimi 50 slikovnih pik. V praksi to ni tako. Blokirajte z veliko vrednostjo nepremičnine marža "Bo pogoltnil" soseda. Posledično bo interval med elementi 35 pikslov.

Rdeča črta

Če dokument naredite v urejevalniku besedil, uporabniki raje nastavijo vsak novi odstavek z uporabo "rdeče" črte. S pomočjo CSS je lažje urejanje besedil na levi - gradnja se uporablja besedilna alinea. To je napisano takole:

besedilo-indent: 11px.

To pomeni, da se prva vrstica odstavka pomakne glede na levi rob za 11 slikovnih pik. Če želite besedilo na spletni strani bolj kot dokument v urejevalniku, morate dodatno namestiti poravnavo v širini, to je:

besedilo-indent: 11px;

poravnava besedila: utemeljitev.

Poleg pik, pri opisovanju označbe je dovoljeno uporabljati tudi druge enote - palcev, točke, odstotke. Naj bo v bloku CSS stopnja besedila 10%. S širino bloka 500 pik, bo rdeča črta znašala 50 slikovnih pik (10% od 500).

Za to znamko lahko nastavite vrednost dediščino. Tak zapis pravi, da blok uporablja podobno lastnost matičnega bloka.

besedilo-indent: dediščino.

Čudovito je, ampak indentation lahko tudi negativne vrednosti! V tem primeru se oblikujejo ti izbokline, to pomeni, da ostane glavno besedilo na mestu, prva linija pa se pomakne v levo za 22 slikovnih pik:

Besedilo-indent: -22px.

Če želite zagotoviti, da črke ne prečkajo leve strani brskalnika, poleg besedilna alinea morate uporabiti konstrukt, da nastavite polje:

nalepka-levo: 22px.

Koristna priporočila

Osnovne lastnosti CSS za oblikovanje besedila upoštevati. In utrditi jih bomo pomagali vaditi. Tukaj je nekaj končnih nasvetov o uporabi materiala, pridobljenega pri razvijanju spletnih mest:

• rdeča črta in alineja besedila sta različni koncepti, za označevanje pa se uporabljajo različne lastnosti;
• za vertikalne alinee pravila matematike ne delujejo - presledki se prekrivajo, element z večjo vrednostjo "zmaga";
• Za označevanje prve vrstice odstavka z uporabo slike se uporabi negativna točka.