Hvernig á að slá inn málsgreinar með CSS

Notkun textaskilríkjanna og tengdir systkini

Góður vefhönnun er oft um góða leturfræði. Þar sem svo mikið af innihaldi vefsíðunnar er kynnt sem texti, geta verið stíll þessi texti til að vera bæði aðlaðandi og árangursríkur er mikilvægt hæfni til að eiga sem vefhönnuður. Því miður höfum við ekki sömu stigs rétthyrningsstjórnun á netinu sem við gerum í prenti. Þetta þýðir að við getum ekki alltaf áreiðanlega stíll texta á vefsíðu á sama hátt og við gætum gert það í prentuðu stykki.

Ein algeng stíll sem þú sérð oft á prenti (og sem við getum endurskapað á netinu) er þar sem fyrsta línan í þeirri málsgrein er dregin inn í eina flipa . Þetta gerir lesendum kleift að sjá hvar ein málsgrein hefst og annar endar.

Þú sérð ekki þessa sjónræna stíl eins mikið á vefsíðum vegna þess að vöfrum birtir sjálfgefið málsgreinar með rými undir þeim sem leið til að sýna hvar maður endar og annar byrjar en ef þú vilt stilla síðu til að fá prentunina, innblásin innstreymisstíll á málsgreinum, getur þú gert það með eiginleikum textastigsins .

Samheitiið fyrir þessa eign er einfalt. Hér er hvernig þú vilt bæta við texta-undirlínunni við öll málsgreinar í skjali.

p {texti-innskot: 2em; }

Aðlaga innandann

Ein leiðin til að tilgreina nákvæmlega málsgreinar í undirlínunni er að þú getur bætt við bekknum í málsgreinina sem þú vilt vísa til, en það krefst þess að þú breytir öllum málsgreinum til að bæta við flokki í það. Það er óhagkvæmt og fylgir ekki HTML kóða bestu starfsvenjum.

Þess í stað ættir þú að íhuga hvenær þú setur inn málsgreinar. Þú setur inn málsgreinar sem eru beint í samræmi við annan málsgrein. Til að gera þetta getur þú notað aðliggjandi systkini val. Með þessari vali ertu að velja hvert málsgrein sem er strax á undan öðrum málsgrein.

p + p {texti-innskot: 2em; }

Þar sem þú ert að slá inn fyrstu línu, ættirðu einnig að ganga úr skugga um að málsgreinar þínar séu ekki með fleiri pláss á milli þeirra (sem er sjálfgefin vafra). Stylistically, þú ættir annaðhvort að hafa bil á milli málsgreinar eða vísa í fyrstu línu, en ekki bæði.

p (framlegð-botn: 0; púði-botn: 0; } p + p {framlegð-toppur: 0; padding-top: 0; }

Neikvæðar innspýtingar

Þú getur einnig notað eignirnar sem innihalda texta innihald ásamt neikvæðu gildi til að láta línu byrja að fara til vinstri í stað þess að rétt eins og venjulegt undirlínur. Þú getur gert þetta ef línan byrjar með tilvitnunarmerki þannig að vitnapersónan birtist í smávægilegu framlegð vinstra megin við málsgreinina og stafarnir sjálfir mynda enn frekar vinstri röðun.

Segðu til dæmis að þú hafir málsgrein sem er afkomandi af blockquote og þú vilt að það sé neikvætt innspýting. Þú gætir skrifað þetta CSS:

blockquote p {texti-innskot: -.5em; }

Þetta myndi gefa upphaf málsins, sem væntanlega inniheldur upphafseiginleikann, vera örlítið flutt til vinstri til að búa til hlýja greinarmerki.

Varðandi margan og fóðrun

Oftar í vefhönnun, notarðu margar eða púðar gildi til að færa þætti og búa til hvíta pláss. Þessir eiginleikar munu hins vegar ekki virka til að ná fram íhlutunarmörkum. Ef þú notar annaðhvort þessara gilda við málsgreinina verður allt texti þessarar málsgreinar, þ.mt hver lína, skipt í staðinn fyrir aðeins fyrstu línu.