Jó webdesign gyakran a jó tipográfiáról szól. Mivel a weboldal tartalmának nagy része szövegként jelenik meg, a webes tervezőként való birtoklás fontos készsége, hogy ezt a szöveget vonzóvá és hatékonyvá formálja. Sajnos online nincs ugyanolyan tipográfiai vezérlésünk, mint nyomtatásban. Ez azt jelenti, hogy a szöveget nem mindig tudjuk megbízhatóan stilizálni egy weboldalon ugyanúgy, mint nyomtatott formában.
Az egyik gyakori bekezdésstílus, amelyet gyakran lát nyomtatásban (és amelyet online újra létrehozhatunk), ahol a bekezdés első sora behúzva van fül szóköz. Ez lehetővé teszi az olvasók számára, hogy lássák, hol kezdődik az egyik bekezdés, a másiknak pedig a vége.
Ezt a vizuális stílust annyira nem látja a weboldalakon, mert a böngészők alapértelmezés szerint szóközökkel jelenítik meg a bekezdéseket alattuk, hogy megmutassák, hol végződik az egyik, és hol kezdődik a másik, de ha egy oldalt meg akarsz stílusozni, akkor az megvan nyomtatás ihlette behúzási stílus bekezdéseken ezt megteheti a szöveg-behúzás stílusú tulajdonság.
A tulajdonság szintaxisa egyszerű. Így adhat hozzá szöveges behúzást a dokumentum összes bekezdéséhez.
p {
szöveg-francia: 2em;
}
A behúzások testreszabása
Az egyik módon pontosan megadhatja a behúzandó bekezdéseket, felvehet egy osztályt a behúzni kívánt bekezdésekbe, de ehhez meg kell változtatnia minden bekezdést, hogy osztályt adjon hozzá. Ez nem hatékony, és nem következik HTML kódolás legjobb gyakorlatok.
Ehelyett fontolóra kell vennie a bekezdések behúzását. Behúzza azokat a bekezdéseket, amelyek közvetlenül követik egy másik bekezdést. Ehhez használhatja a szomszédos testvérválasztót. Ezzel a választóval minden bekezdést kiválaszt, amelyet közvetlenül megelőz egy másik bekezdés.
p + p {
szöveg-francia: 2em;
}
Mivel behúzza az első sort, győződjön meg arról is, hogy a bekezdések között nincs-e külön szóköz (ami a böngésző alapértelmezett értéke). Stílus szerint a bekezdések között legyen szóköz vagy behúzza az első sort, de nem mindkettőt.
p {
margó-alsó: 0;
padding-bottom: 0;
}
p + p {
margin-top: 0;
padding-top: 0;
}
Negatív behúzások
Használhatja a szöveg-behúzás tulajdonság, a negatív értékkel együtt, hogy a vonal kezdete balra haladjon, szemben a jobb oldallal, mint egy normális behúzás. Megteheti ezt, ha egy sor idézőjellel kezdődik, így az idézőjel megjelenik a enyhe margó a bekezdéstől balra, és maguk a betűk még mindig szép baloldalt alkotnak igazítás.
Tegyük fel például, hogy van egy bekezdés, amely egy blokk idézet leszármazottja, és azt szeretné, hogy negatívan behúzza. Írhatná ezt a CSS-t:
blokk idézet p {
szöveg-francia: -.5em;
}
Ez megadná a bekezdés kezdetét, amely feltehetően a kezdő idézőjelet is magában foglalja, kissé balra mozgatva a függő írásjelek létrehozásához.
A margókkal és a párnázattal kapcsolatban
A webdesignban gyakran használja margó vagy kitöltési értékek az elemek mozgatásához és a fehér tér kialakításához. Ezek a tulajdonságok azonban nem fognak működni a behúzott bekezdéshatás elérése érdekében. Ha ezeknek az értékeknek a bármelyikét alkalmazza a bekezdésre, akkor a bekezdés teljes szövege, minden sort is beleértve, az első sor helyett egymástól elválasztva helyezkedik el.