Dobrý webový design je často o dobré typografii. Vzhledem k tomu, že tolik obsahu webové stránky je prezentováno jako text, je schopnost navrhnout tento text tak, aby byl atraktivní a efektivní, důležitou dovedností webového designéra. Bohužel nemáme stejnou úroveň typografické kontroly online jako v tisku. To znamená, že nemůžeme vždy spolehlivě stylizovat text na webu stejným způsobem, jako bychom to mohli udělat v tištěné části.
Jeden běžný styl odstavce, který často vidíte v tisku (a který můžeme znovu vytvořit online), je místo, kde je první řádek odstavce odsazen tabulátor. To umožňuje čtenářům zjistit, kde začíná jeden odstavec a kde končí druhý.
Tento vizuální styl na webových stránkách tolik nevidíte, protože prohlížeče ve výchozím nastavení zobrazují odstavce s mezerou pod nimi jako způsob, jak ukázat, kde jeden končí a druhý začíná, ale pokud chcete stylovat stránku, máte to inspirovaný tiskem styl odsazení u odstavců to můžete udělat pomocí odsazení textu vlastnost stylu.
Syntaxe pro tuto vlastnost je jednoduchá. Zde je způsob, jak byste přidali odsazení textu ke všem odstavcům v dokumentu.
p {
odsazení textu: 2em;
}
Přizpůsobení odsazení
Jedním ze způsobů, jak můžete přesně určit odstavce, které chcete odsadit, můžete přidat třídu k odstavcům, které chcete odsadit, ale to vyžaduje úpravu každého odstavce a přidání třídy do něj. To je neúčinné a nenásleduje to Kódování HTML osvědčené postupy.
Místo toho byste měli zvážit, kdy odsazovat odstavce. Odsadíte odstavce, které přímo následují za jiným odstavcem. K tomu můžete použít sousední volič sourozenců. S tímto voličem vybíráte každý odstavec, za kterým bezprostředně předchází další odstavec.
p + p {
odsazení textu: 2em;
}
Vzhledem k tomu, že odsazujete první řádek, měli byste se také ujistit, že vaše odstavce mezi sebou nemají žádný další prostor (což je výchozí prohlížeč). Stylisticky byste měli mít buď mezeru mezi odstavci nebo odsazení prvního řádku, ale ne obojí.
p {
spodní okraj: 0;
polstrované dno: 0;
}
p + p {
horní okraj: 0;
vycpávka: 0;
}
Negativní odrážky
Můžete také použít odsazení textu Vlastnost spolu se zápornou hodnotou způsobí, že začátek řádku přejde doleva na rozdíl od pravé jako normální odsazení. Můžete to udělat, pokud řádek začíná uvozovkou, takže znak uvozovky se objeví v mírný okraj nalevo od odstavce a samotná písmena stále tvoří pěknou levici zarovnání.
Řekněme například, že máte odstavec, který je potomkem blockquote, a chcete, aby byl negativně odsazen. Můžete napsat tento CSS:
blockquote p {
odsazení textu: -.5em;
}
Tím by se začátek odstavce, který pravděpodobně zahrnuje znak úvodní citace, posunul mírně doleva, aby se vytvořila závěsná interpunkce.
Pokud jde o okraje a polstrování
Často ve webovém designu používáte hodnoty okraje nebo odsazení přesouvat prvky a vytvářet prázdné místo. Tyto vlastnosti však nebudou fungovat k dosažení efektu odsazeného odstavce. Použijete-li některou z těchto hodnot na odstavec, bude celý text daného odstavce, včetně všech řádků, rozložen místo prvního řádku.