Dobre vzhľad stránky je často o dobrej typografii. Pretože toľko obsahu webovej stránky je prezentované ako text, schopnosť navrhnúť tento text tak, aby bol atraktívny a efektívny, je dôležitá zručnosť webdizajnéra. Bohužiaľ nemáme rovnakú úroveň typografickej kontroly ako v tlačenej podobe. To znamená, že nemôžeme vždy spoľahlivo štýlovať text na webových stránkach rovnakým spôsobom, ako by sme to mohli robiť v tlačenej podobe.
Jeden z bežných odsekových štýlov, ktorý často vidíte v tlači (a ktorý môžeme znova vytvoriť online), je ten, kde je prvý riadok tohto odseku odsadený medzerník. Toto umožňuje čitateľom zistiť, kde sa jeden odsek začína a druhý končí.
Tento vizuálny štýl sa na webových stránkach až tak veľmi nezobrazuje, pretože prehľadávače predvolene zobrazujú odseky s medzerou pod nimi ako spôsob, ako ukázať, kde jeden končí a druhý začína, ale ak chcete upraviť stránku, musíte mať tento štýl inšpirované tlačou odsadený štýl v odstavcoch to môžete urobiť pomocou zarážka textu štýlová vlastnosť.
Syntax tejto vlastnosti je jednoduchá. Týmto spôsobom by ste mohli pridať textovú zarážku do všetkých odsekov v dokumente.
p {
zarážka textu: 2em;
}
Prispôsobenie zarážok
Jedným zo spôsobov, ako môžete presne určiť odsek, ktorý chcete odsadiť, je možné pridať triedu k odsekom, ktoré chcete odsadiť, ale vyžaduje to úpravu každého odseku, aby ste doň pridali triedu. To je neefektívne a nenasleduje to Kódovanie HTML osvedčené postupy.
Namiesto toho by ste mali zvážiť, kedy odsadzujete odseky. Odsadíte odseky, ktoré priamo nasledujú za iným odsekom. Môžete to urobiť pomocou susedného voliča súrodencov. Pomocou tohto selektora vyberáte každý odsek, za ktorým bezprostredne predchádza ďalší odsek.
p + p {
zarážka textu: 2em;
}
Pretože odsadzujete prvý riadok, mali by ste sa tiež ubezpečiť, že vaše odseky medzi sebou neobsahujú žiadny ďalší priestor (čo je predvolený prehľadávač). Štylisticky by ste mali mať medzi odsekmi medzeru alebo odsadiť prvý riadok, ale nie obidva.
p {
spodný okraj: 0;
polstrované dno: 0;
}
p + p {
horný okraj: 0;
vypchávka: 0;
}
Záporné zarážky
Môžete tiež použiť zarážka textu vlastnosť spolu so zápornou hodnotou spôsobí, že začiatok riadku bude vľavo, na rozdiel od pravej, ako bežná zarážka. Môžete to urobiť, ak riadok začína úvodzovkou, takže znak úvodzovky sa zobrazuje v mierny okraj naľavo od odseku a samotné písmená stále tvoria peknú ľavicu vyrovnanie.
Povedzme napríklad, že máte odsek, ktorý je potomkom blockquote a chcete, aby bol negatívne odsadený. Môžete napísať tento CSS:
blockquote p {
zarážka textu: -.5em;
}
Začiatok odseku, ktorý pravdepodobne obsahuje znak úvodnej citácie, by sa mal mierne posunúť doľava, aby sa vytvorila interpunkčná interpunkcia.
Pokiaľ ide o okraje a vypchávky
Často vo webdizajne používate hodnoty okraja alebo výplne na presun prvkov a vytvorenie bieleho priestoru. Tieto vlastnosti však nebudú fungovať, aby sa dosiahol efekt odsadeného odseku. Ak na odsek použijete ktorúkoľvek z týchto hodnôt, celý text daného odseku vrátane všetkých riadkov bude mať medzery namiesto iba prvého riadku.