Cheat Sheet: Kako narediti zamik besedila CSS

Spletni vir ocenjujejo uporabniki zaradi svoje zunanje privlačnosti. Zato je lahko tudi informativno uporabno besedilo prebrano zaradi slabe zasnove. Zaključek - morate skrbno in skrbno pristopiti ne le semantično vsebino strani spletnega mesta, temveč tudi njegovo vizualno predstavitev. Pojav tehnologije CSS je razširil zmožnost ustvarjanja privlačnih člankov. Ena od lastnosti, ki je zasnovana tako, da olajša zaznavo pisnega vtisa besedila CSS.

Polja in alineje: kakšna je razlika?

Preden začnete oblikovati besedilo, morate razumeti, katera polja in zamiki so. Kljub temu, da ti elementi označevanja v številnih primerih za uporabnika izgledajo enako, med njimi obstajajo temeljne razlike:


  • polje je določeno z lastnostjo padding, indent - margin;
  • Polje je določeno s presledkom med vsebino in mejo bloka, vrzel med mejami sosednjih blokov;
  • Polja se lahko upoštevajo v elementih elementa (širina in višina) in ne.
  • lastnost robov

    Torej, da nastavite horizontalni ali navpični razmik besedila CSS, uporabite konstrukcijo robov. Ta lastnost velja za oznako predpisanega odstavka dokumenta. V najenostavnejšem primeru je napisano kot: margin: 12px. Ta vrstica pomeni, da bo okrog bloka besedila (ali kateregakoli drugega bloka) 12 pikslov zamaknjeno z vseh strani. Za povečanje vrzeli, na primer trikrat, je dovolj napisati: margin: 36px. Toda kaj storiti, čeinterval med bloki mora biti drugačen od obeh strani? Razvijalci spletnih strani uporabljajo več oblik pisanja:
  • margin: 11px 22px.
  • rob: 11px 22px 33px.
  • rob: 11px 22px 33px 44px.
  • V prvem primeru iz spodnje in zgornje meje bloka bodo alineje narejene na 11 slikovnih pik, ob straneh bloka pa za 22 pik. Glede na drugo obliko snemanja bo med zgornjim robom bloka in vsebino 11 pik, med dnom - 33 pik, ob straneh - 22 pik. V tretjem primeru bo odmik besedila CSS zgoraj 11 slikovnih pik, 22 slikovnih pik desno, 33 pikslov na dnu in 44 slikovnih pik levo.


    Obstaja tudi možnost, da se razdalja do omejitve bloka zabeleži samo z ene strani: margina-zgornji rob-spodaj, margina levo, margina-desno. S prenosom imen lastnosti na ruski jezik je težko uganiti o njihovem namenu. Na primer, ta vnos pravi, da bo desni rob 22px: margin-right: 22px. Za preostalo razdaljo se predpostavlja, da je razdalja okrog bloka enaka vrednosti nadrejenega elementa. Lastnost »margin« ima funkcijo, ki jo mora razvijalec zapomniti pri vertikalni zamiki besedila CSS. Intervali sosednjih elementov se ne seštevajo, temveč prekrivajo. Na primer, naj ima eden od blokov rob od spodaj: 15px in sosednji rob na vrhu: 35px. Šolska aritmetična in zdrava pamet kažejo, da bo skupni razmik med njimi 50 slikovnih pik. V praksi to ni tako. Blok z veliko vrednostjo lastnine marže bo "absorbiral" svojega soseda. Rezultat je interval med elementi 35 pik.

    Rdeča črta

    Pri pisanju dokumenta v urejevalniku besedila uporabniki raje postavijo vsak nov odstavek z "rdečo" vrstico. S pomočjo CSS-ja je preprosto narediti odmik besedila na levo - uporablja se tekst-indent konstrukt. Zabeleži se na naslednji način: text-indent: 11px. To pomeni, da bo prva vrstica odstavka premaknjena za relativni levi rob za 11 pik. Da bo besedilo na spletni strani bolj povezano z dokumentom v urejevalniku, morate dodatno nastaviti širino, to je pisanje: text-indent: 11px; text-align: justify Poleg pikslov je pri opisovanju oznake dovoljeno uporabljati tudi druge enote - palce, točke, odstotke. Naj ima blok zamik besedila CSS, enak 10%. Pri širini bloka 500 slikovnih pik je rdeča črta 50 slikovnih pik (10% od 500).
    Za to lastnost lahko nastavite dedno vrednost. Takšen zapis pravi, da blok uporablja podobno lastnost nadrejenega bloka. text-indent: podeduj Presenetljivo je, da lahko vstavitev odstavka sprejme negativne vrednosti! V tem primeru se oblikujejo tako imenovani performansi, tj. Glavno besedilo ostane na mestu, prva vrstica pa se premakne v levo 22 slikovnih pik: text-indent: -22px. Da bi preprečili, da bi črke prečkale levo mejo brskalnika, morate poleg besedilne alinee uporabiti konstrukt za nalogo polja: padding-left: 22px.

    Koristni nasveti

    Upoštevane so osnovne lastnosti CSS za oblikovanje besedila. In praksa jim bo pomagala utrditi. Tukaj je nekaj končnih nasvetov, kako uporabiti študijsko gradivo pri oblikovanju spletnih strani:
  • rdeča črta in alinejabesedilo - različni koncepti in za njihovo vodenje se uporabljajo različne lastnosti;
  • za navpična odstopanja pravila matematike ne veljajo - presledki se prekrivajo, "zmaga" element z veliko vrednostjo;
  • Negativna zamik odstavka se uporablja za označevanje prvega odstavka odstavka s sliko.
  • Sorodne publikacije