Uporaba lastnosti besedila in izbirnih selektorjev sosedov
Dober spletni model pogosto govori o dobri tipografiji. Ker je toliko vsebine spletne strani predstavljeno kot besedilo, je lahko slog, da bi bilo to besedilo privlačno in učinkovito, pomembna veščina, ki jo ima kot spletni oblikovalec. Na žalost nimamo enake stopnje tipografskega nadzora na spletu, ki ga naredimo v tiskani obliki. To pomeni, da ne moremo vedno zanesljivo oblikovati besedila na spletnem mestu na enak način, kot bi ga lahko naredili v tiskani kosi.
Eden skupnih slogov odstavka, ki jih pogosto vidite v tiskani obliki (in ki jih lahko ponovno ustvarimo na spletu), je, če je prva vrstica tega odstavka razčlenjena na eni tabeli . To omogoča bralcem, da vidijo, kje se začne en odstavek in se drugi konča.
Ta vizualni slog ne vidite toliko na spletnih straneh, saj brskalniki po privzetku prikazujejo odstavke s presledkom pod njimi, da bi prikazali, kje se eden konča in se začne drugi, vendar če želite, da stran natisne, navdihnjen slog naklona v odstavkih, lahko to storite s slogom besedila-indent slog.
Sintaksa za to lastnost je preprosta. Tukaj je, kako bi dodali besedilno razvrstitev v vse odstavke v dokumentu.
p {besedilna alinea: 2em; }Prilagajanje indentov
Eden od načinov, na katerega natančno določite odstavke v alineo, lahko dodate razred v odstavke, ki jih želite razčleniti, vendar morate vsakemu odstavku urediti, da mu dodate razred. To je neučinkovito in ne sledi najboljšim praksam kodiranja HTML .
Namesto tega morate razmisliti, ko odstavite odstavke. Odstranite odstavke, ki neposredno sledijo drugemu odstavku. Če želite to narediti, lahko uporabite bližnji izbirnik brskalnikov. S tem izbiralnikom izberete vsak odstavek, ki mu je takoj pred drugim odstavkom.
p + p {besedilna alinea: 2em; }Ker ste zamikali prvo vrstico, morate tudi zagotoviti, da vaši odstavki med njimi nimajo nobenega dodatnega prostora (kar je privzeto brskalnik). S slogovo bi morali imeti med odstavkoma ali alinejo v prvi vrstici prostor, ne pa oboje.
p {margin-bottom: 0; Dno obloge: 0; } p + p {margin-top: 0; obloga-top: 0; }Negativne indente
Uporabite lahko tudi lastnost besedilne razdalje skupaj z negativno vrednostjo, ki povzroči, da se začne vrstica premakniti na levo, v nasprotju s pravico, kot je običajna alinea. To lahko storite, če se črta začne z narekovajjo, tako da se znak kvote pojavi v rahlemi robovi na levi strani odstavka in črkami še vedno tvorijo lepo levo poravnavo.
Recimo, na primer, da imate odstavek, ki je potomec blokoteke, in želite, da je negativno razčlenjen. Lahko bi napisali ta CSS:
blockquote p {besedilo-indent: -.5em; }To bi omogočilo začetek odstavka, ki verjetno vključuje začetni znak, ki se nekoliko premakne v levo, da bi ustvaril visečo ločil.
Kar zadeva robove in obloge
Pogosto v spletnem oblikovanju uporabljate robove ali oblike za premikanje elementov in ustvarjanje praznega prostora. Vendar pa te lastnosti ne bodo uspele doseči učinka razčlenjenega odstavka. Če v odstavek dodate eno od teh vrednosti, bo celotno besedilo tega odstavka, vključno z vsako vrstico, razmaknjeno namesto zgolj prve vrstice.