Korištenje alata za unos teksta i susjednih seljaka koji se brinu
Dobar web dizajn često se odnosi na dobru tipografiju. Budući da je toliko sadržaja web stranice predstavljeno kao tekst, sposobnost stila da je tekst atraktivna i učinkovita je važna vještina posjedovanja kao web dizajner. Nažalost, nemamo istu razinu tipografske kontrole koju imamo na ispis. To znači da ne možemo uvijek pouzdano stilizirati tekst na web stranici na isti način na koji to možemo učiniti u tiskanom obliku.
Jedan uobičajeni stil stavaka koji često vidite u tisku (i koji možemo ponovno stvoriti na mreži) jest gdje je prva linija tog odlomka uvučena u jedan prostor na kartici . To omogućuje čitateljima da vide gdje počinje jedan odlomak, a drugi završava.
Ovaj vizualni stil ne vidite toliko na web stranicama jer preglednici prema zadanim postavkama prikazuju odlomke sa prostorom ispod njih kao način prikaza mjesta konačnog završetka, a drugi počinje, ali ako želite oblikovati stranicu da biste imali taj ispis, nadahnut stil zavjesa na paragrafima, to možete učiniti s entitetom tekstualnog alata .
Sintaksa za ovu nekretninu je jednostavna. Evo kako biste dodali tekstualnu dimenzije svim odlomcima u dokumentu.
p {text-indent: 2em; }Prilagodba uvlake
Jedan od načina na koji možete točno odrediti odlomke u uvod, možete dodati klasu stavkama koje želite razrezati, no to zahtijeva da uredite svaki odlomak da biste joj dodali klase. To je neučinkovito i ne slijedi najbolje HTML kodne postupke.
Umjesto toga, trebali biste razmotriti kada stavite odlomke. Vi uvodite odlomke koji izravno slijede drugi odlomak. Da biste to učinili, možete upotrijebiti susjedni birački seljak. Pomoću ovog izbornika odabirete svaki odlomak koji neposredno prethodi drugi odlomak.
p + p {text-indent: 2em; }Budući da uvlačite prvu liniju, trebali biste provjeriti jesu li vaše stavke nemaju dodatni prostor između njih (što je zadana postavka preglednika). Stilski, trebali biste imati razmak između odlomaka ili uvući prvu liniju, ali ne oboje.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Negativne uvlake
Također možete upotrijebiti tekstualni entitet, zajedno s negativnom vrijednošću, kako bi se početak linije pomaknuo ulijevo za razliku od desne poput normalne uvodnice. To možete učiniti ako linija započne s navodnim znakom tako da se znak citata pojavljuje na laganoj margini lijevo od stavke, a slova i dalje čine lijepo lijevo poravnanje.
Recimo, na primjer, da imate stavak koji je potomak bloknog broja i želite da ga negativno razvedete. Možete napisati ovaj CSS:
blockquote p {text-indent: -.5em; }To će dati početak odlomka, koji vjerojatno uključuje i znak otvaranja licitacije, da se lagano pomakne ulijevo kako bi se stvorila prepuna interpunkcija.
Što se tiče margina i paddinga
Često u web dizajnu koristite margine ili padding vrijednosti za pomicanje elemenata i stvaranje bijelog prostora. Ta svojstva neće raditi kako bi se postigao uvučen učinak odlomka, međutim. Ako primijenite bilo koju od tih vrijednosti stavku, cijeli tekst tog stavka, uključujući svaku liniju, bit će razmaknut umjesto samo prvog retka.