Dobro web dizajn često se radi o dobroj tipografiji. Budući da je toliko sadržaja web stranice predstavljeno u obliku teksta, mogućnost oblikovanja tog teksta istovremeno atraktivnim i učinkovitim važna je vještina koju treba posjedovati kao web dizajner. Nažalost, nemamo istu razinu tipografske kontrole na mreži kao u tisku. To znači da ne možemo uvijek pouzdano oblikovati tekst na web mjestu na isti način kao što bismo to mogli učiniti u tiskanom tekstu.
Jedan uobičajeni stil odlomka koji često vidite u tisku (i koji možemo ponovno stvoriti na mreži) je mjesto u kojem je uvučen prvi redak prostor kartica. To čitateljima omogućuje da vide gdje jedan odlomak započinje, a drugi završava.
Ovaj vizualni stil ne vidite toliko na web stranicama jer preglednici prema zadanim postavkama prikazuju odlomke s razmakom ispod njih kao način da pokažete gdje jedno završava, a drugo započinje, ali ako želite oblikovati stranicu da to ima nadahnut tiskom uvlačenje stila u odlomcima, to možete učiniti pomoću uvlaka teksta svojstvo stila.
Sintaksa ovog svojstva je jednostavna. Evo kako biste dodali uvlaku teksta svim odlomcima u dokumentu.
p {
uvlaka teksta: 2em;
}
Prilagođavanje uvlaka
Na jedan način na koji možete točno odrediti odlomke za uvlačenje, možete dodati klasu odlomcima koje želite uvući, ali to zahtijeva da uredite svaki odlomak kako biste mu dodali klasu. To je neučinkovito i ne slijedi HTML kodiranje najbolje prakse.
Umjesto toga, trebali biste razmotriti kada uvlačite odlomke. Uvlačite odlomke koji neposredno slijede drugi odlomak. Da biste to učinili, možete upotrijebiti susjedni birač brata ili sestre. Ovim selektorom odabirete svaki odlomak kojem neposredno prethodi drugi odlomak.
p + p {
uvlaka teksta: 2em;
}
Budući da uvlačite prvi redak, trebali biste također osigurati da vaši odlomci nemaju dodatni razmak između njih (što je zadani preglednik). Stilski bi trebali imati razmaka između odlomaka ili uvuci prvi redak, ali ne oboje.
p {
margina-dno: 0;
donji dio: 0;
}
p + p {
margin-top: 0;
padding-top: 0;
}
Negativne uvlake
Također možete koristiti uvlaka teksta svojstvo, zajedno s negativnom vrijednošću, uzrokuje da početak retka ide lijevo za razliku od desne poput uobičajene uvlake. To možete učiniti ako redak započinje navodnikom tako da se znak navodnika pojavi u lagana margina lijevo od odlomka i slova i dalje čine lijepu lijevu stranu poravnanje.
Recimo, na primjer, da imate odlomak koji je potomak blok-citata i želite da on bude negativno uvučen. Možete napisati ovaj CSS:
blok citat p {
uvlaka teksta: -.5em;
}
To bi dalo početak odlomku, koji vjerojatno uključuje početni znak citata, malo pomicanje ulijevo kako bi se stvorile viseće interpunkcije.
Što se tiče margina i paddinga
Često koristite web dizajn vrijednosti margine ili dopune za pomicanje elemenata i stvaranje bijelog prostora. Ta svojstva, međutim, neće raditi na postizanju učinka uvučenog odlomka. Ako primijenite bilo koju od ovih vrijednosti na odlomak, cijeli tekst tog odlomka, uključujući svaki redak, bit će razmaknut umjesto samo prvog retka.