Sut i Drefnu Paragraffau Gyda CSS

Defnyddio'r Eiddo Testun-Indent a Dewiswyr Ffrwydron Cyfagos

Mae dylunio gwe ar y we yn aml yn ymwneud â theipograffi da. Gan fod cymaint o gynnwys tudalennau gwe yn cael ei gyflwyno fel testun, mae gallu arddull y testun hwnnw yn ddeniadol ac effeithiol yn sgil bwysig i feddu ar ddylunydd gwe. Yn anffodus, nid oes gennym yr un lefel o reolaeth teipograffig ar-lein yr ydym yn ei wneud mewn print. Mae hyn yn golygu na allwn bob amser arddull testun yn ddibynadwy ar wefan yn yr un ffordd ag y gallem wneud hynny mewn darn printiedig.

Mae un arddull paragraff cyffredin yr ydych yn ei weld yn aml mewn print (a'r hyn y gallwn ei ail-greu ar-lein) yw lle y mae llinell gyntaf y paragraff hwnnw'n gofod tabiau un. Mae hyn yn caniatáu i ddarllenwyr weld ble mae un paragraff yn dechrau ac un arall yn dod i ben.

Nid ydych yn gweld yr arddull weledol hon gymaint â phosibl mewn tudalennau gwe oherwydd bod porwyr, yn ddiofyn, yn dangos paragraffau gyda gofod o dan y rhain fel ffordd o ddangos lle mae un yn dod i ben ac mae un arall yn dechrau, ond os ydych chi am arddull tudalen i gael yr argraff honno- arddull indent ysbrydol ar baragraffau, gallwch wneud hynny gyda'r eiddo arddull testun-indent .

Mae'r cystrawen ar gyfer yr eiddo hwn yn syml. Dyma sut y byddech yn ychwanegu cofnod testun i'r holl baragraffau mewn dogfen.

p {text-indent: 2em; }

Customizing the Indents

Un ffordd y gallwch chi nodi'n union y paragraffau i'w indent, gallwch ychwanegu dosbarth i'r paragraffau rydych chi am eu hintio, ond mae hynny'n golygu eich bod yn golygu pob paragraff i ychwanegu dosbarth iddo. Mae hynny'n aneffeithiol ac nid yw'n dilyn arferion gorau codio HTML .

Yn lle hynny, dylech ystyried pan fyddwch yn pentro paragraffau. Byddwch yn gosod paragraffau sy'n dilyn paragraff arall yn uniongyrchol. I wneud hyn, gallwch ddefnyddio'r dewiswr brawddeg brawd cyfagos. Gyda'r detholydd hwn, rydych chi'n dewis pob paragraff a godir gan baragraff arall yn syth.

p + p {text-indent: 2em; }

Gan eich bod yn amlygu'r llinell gyntaf, dylech hefyd sicrhau nad oes gan eich paragraffau unrhyw le ychwanegol rhyngddyn nhw (sef y rhagosodiad ar y porwr). Yn steilig, dylech naill ai fod â lle rhwng paragraffau neu gynnwys y llinell gyntaf, ond nid y ddau.

p {ymylol-waelod: 0; gwaelod padio: 0; } p + p {margin-top: 0; top padio: 0; }

Indentau Negyddol

Gallwch hefyd ddefnyddio'r eiddo gosodiad testun , ynghyd â gwerth negyddol, i achosi dechrau llinell i fynd i'r chwith yn hytrach na'r dde fel indent arferol. Fe allwch chi wneud hyn os yw llinell yn dechrau gyda dyfynbris fel bod y cymeriad dyfynbris yn ymddangos yn yr ymyl fach ar ochr chwith y paragraff ac mae'r llythyrau eu hunain yn dal i fod yn aliniad chwith neis.

Dywedwch, er enghraifft, bod gennych baragraff sy'n ddisgynnydd o blith gwrthdaro a'ch bod am iddo gael ei indentio yn negyddol. Gallech chi ysgrifennu'r CSS hwn:

blockquote p {text-indent: -.5em; }

Byddai hyn yn rhoi cychwyn y paragraff, sydd yn ôl pob tebyg yn cynnwys y cymeriad dyfyniad agoriadol, i'w symud ychydig i'r chwith i greu atalnodi crog.

O ran Margins a Padio

Yn aml iawn mewn dylunio gwe, rydych chi'n defnyddio gwerthoedd neu werthoedd padio i symud elfennau a chreu gofod gwyn. Fodd bynnag, ni fydd yr eiddo hynny yn gweithio i gyflawni'r effaith paragraff wedi'i bentio. Os ydych chi'n gwneud cais am y naill neu'r llall o'r gwerthoedd hyn i'r paragraff, bydd testun cyfan y paragraff hwnnw, gan gynnwys pob llinell, yn cael ei leoli yn hytrach na dim ond y llinell gyntaf.