Použití vlastností textu v odsazení a sousedních selektorů sousedů
Dobrý web design je často o dobré typografii. Vzhledem k tomu, že tolik obsahu webové stránky je prezentováno jako text, schopnost stylovat tento text tak, aby byl atraktivní a efektivní, je důležitá dovednost, kterou má mít webový návrhář. Bohužel nemáme stejnou úroveň typografické kontroly online, kterou děláme v tisku. To znamená, že na webových stránkách nemůžeme vždy spolehlivě utvářet text stejným způsobem jako v tištěné podobě.
Jeden společný styl odstavce, který často vidíte v tisku (a který můžeme znovu vytvořit online), je první řádek tohoto odstavce odsazen do jednoho místa na kartě . To umožňuje čtenářům zjistit, kde začíná jeden odstavec a druhý končí.
Nevidíte tento vizuální styl tolik na webových stránkách, 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 jiný začíná, ale pokud chcete stylovat stránku, inspirovaný styl odsazení odstavců, můžete tak učinit vlastností stylu textu a odrážky .
Syntaxe této vlastnosti je jednoduchá. Zde je návod, jak přidat text do všech odstavců v dokumentu.
p {text-odsazení: 2em; }}Přizpůsobení odsazení
Jedním způsobem, jak zadat přesně odstavce k odsazení, můžete přidat třídu k odstavcům, které chcete odsadit, ale to vyžaduje, abyste upravili každý odstavec a přidali do něj třídu. To je neúčinné a nedodržuje osvědčené postupy kódování HTML .
Místo toho byste měli zvážit, kdy odsadíte odstavce. Odsekáváte odstavce, které jsou přímo za jiným odstavcem. Chcete-li to provést, můžete použít sousední selektor sester. Pomocí tohoto voliče vybíráte každý odstavec, který je bezprostředně předcházen dalším odstavcem.
p + p {text-odrážka: 2em; }}Vzhledem k tomu, že odsazujete první řádek, měli byste se ujistit, že vaše odstavce nemají mezi sebou žádný další prostor (což je výchozí nastavení prohlížeče). Stylisticky byste měli mít buď mezera mezi odstavci, nebo odrážet první řádek, ale ne obojí.
p {margin-bottom: 0; polstrování dolů: 0; } p + p {margin-top: 0; polstrování: 0; }}Záporné odsazení
Můžete také použít vlastnost text-odsazení spolu s zápornou hodnotou, která způsobí, že začátek řádku bude směrem doleva oproti pravici jako normální odsazení. Můžete tak učinit, pokud čára začíná uvozovkou, takže znak citace se objeví na nepatrném okraji vlevo od odstavce a písmena samotná stále tvoří pěkné zarovnání vlevo.
Řekněme například, že máte odstavec, který je potomkem blokové bloky a chcete, aby byl negativně odsazen. Můžete napsat tuto CSS:
blockquote p {text-odrážka: -.5em; }}To by umožnilo, aby začátek odstavce, který pravděpodobně zahrnuje úvodní charakter citátu, byl mírně posunut doleva, aby se vytvořila interpunkční interpunkce.
Co se týče okrajů a vycpávky
Často se při návrhu webových stránek používají hodnoty okrajů nebo polstrování k přesunutí prvků a vytváření bílého místa. Tyto vlastnosti však nepomohou k dosažení odsazeného odstavce. Pokud použijete některou z těchto hodnot na odstavec, bude celý text tohoto odstavce, včetně každého řádku, umístěn místo prvního řádku.