Použitie vlastností textového odsadenia a priľahlých výberových súborov
Dobrý web dizajn je často o dobrej typografii. Keďže tak veľa obsahu webových stránok je prezentovaný ako text, schopnosť štýlu, že text je atraktívny aj efektívny, je dôležitá zručnosť, ktorú má mať webový dizajnér. Bohužiaľ nemáme rovnakú úroveň typografickej kontroly online, ktorú robíme v tlači. Znamená to, že na webových stránkach nemôžeme vždy spoľahlivo štýlovať text rovnakým spôsobom ako v tlačenom diele.
Jeden spoločný štýl odseku, ktorý často vidíte v tlači (a ktorý môžeme znovu vytvoriť online), je prvý riadok tohto odseku odsadený do jedného záložného priestoru . To umožňuje čitateľom zistiť, kde začína jeden odsek a druhý končí.
Nevidíte tento vizuálny štýl toľko na webových stránkach, pretože prehliadače štandardne zobrazujú odseky s medzerou pod nimi ako spôsob, ako ukázať, kde sa končí a začína iný, ale ak chcete štýl stránky, inšpirovaný štýl odsadenia na odstavcoch, môžete to urobiť vlastnosťou štýlu text a indent .
Syntax pre túto vlastnosť je jednoduchý. Tu je návod, ako by ste pridal text-indent k všetkým odsekom v dokumente.
p {text-indent: 2em; }Prispôsobenie odsadenia
Jedným spôsobom, ako môžete presne určiť odseky do odsadenia, môžete pridať triedu do odsekov, ktoré chcete zarovnať, ale to vyžaduje, aby ste upravili každý odsek a pridali do nej triedu. To je neúčinné a nevyhovuje osvedčeným postupom kódovania HTML .
Namiesto toho by ste mali zvážiť, kedy odsadíte odseky. Odrážate odseky, ktoré nasledujú priamo za ďalším odsekom. Ak to chcete urobiť, môžete použiť priľahlý výber súrodenca. Pomocou tohto voliča vyberiete každý odsek, ktorý bezprostredne predchádza iný odsek.
p + p {text-odrážka: 2m; }Pretože odsadzujete prvý riadok, mali by ste sa tiež uistiť, že vaše odseky nemajú medzi sebou žiadne medzery (čo je predvolené nastavenie prehliadača). Štýlovo by ste mali mať buď medzeru medzi odsekmi, alebo odsadiť prvý riadok, ale nie oboje.
p {margin-bottom: 0; polstrovanie dno: 0; } p + p {margin-top: 0; polstrovanie: 0; }Negatívne odrážky
Môžete tiež použiť vlastnosť text-odsadenie spolu s zápornou hodnotou, ktorá spôsobí, že začiatok riadku sa posunie doľava na rozdiel od pravej ako normálna odrážka. Môžete to urobiť, ak čiarka začína s úvodzovkou, takže znak citácie sa objaví v miernom okraji vľavo od odseku a písmená sami ešte tvoria pekné zarovnanie doľava.
Povedzme napríklad, že máte odsek, ktorý je potomkom blokovej kvóty a chcete, aby bol negatívne odsadený. Môžete napísať tento CSS:
blockquote p {text-odrážka: -5.5; }To by umožnilo, aby začiatok odseku, ktorý pravdepodobne obsahuje úvodný citový znak, bol mierne posunutý doľava, aby sa vytvorili visiace interpunkčné znamienka.
Pokiaľ ide o okraje a výplň
Často sa pri webovom návrhu používajú hodnoty okrajov alebo políčok na presunutie prvkov a vytvorenie prázdneho miesta. Tieto vlastnosti však nebudú fungovať na dosiahnutie odsadeného odseku. Ak použijete niektorú z týchto hodnôt na odsek, celý text tohto odseku vrátane každého riadku bude rozdelený namiesto prvého riadku.