Koristeći Text-Indent Property i Adjacent Sellection Selectors
Dobar web dizajn često se odnosi na dobru tipografiju. S obzirom na to da je toliko sadržaja web stranice predstavljen kao tekst, jer je u stanju da stilu taj tekst bude privlačan i efikasan, važna je vještina koju poseduje kao web dizajner. Nažalost, mi nemamo isti nivo tipografske kontrole na mreži koji radimo u štampi. To znači da ne možemo uvek pouzdano oblikovati tekst na web stranici na isti način kao što smo mogli da uradimo u štampanom obliku.
Jedan uobičajeni stil paragrafa koji često vidite u štampi (i koji možemo da obnavljamo na mreži) je gde je prva linija tog pasusa urezana u jedan tabulatorski prostor . Ovo omogućava čitateljima da vide gde jedan pasus počinje, a drugi se završava.
Ovog vizuelnog stila ne vidite toliko na web stranicama jer pretraživači po defaultu prikazuju stavke sa prostorom ispod njih kao način da se pokaže gde se jedan završava, a drugi počinje, ali ako želite da stišite stranicu da biste imali taj pečat - inspirisani stil indentacije na paragrafima, to možete učiniti sa svojstvenim stilom.
Sintaksa za ovu osobinu je jednostavna. Evo kako biste dodali tekstualnu indentaciju svim paragrafima u dokumentu.
p {tekst-indent: 2em; }Prilagođavanje indentova
Jedan od načina na koji možete precizno odrediti paragrafe do zadatka, možete dodati klasu do paragrafa koje želite razdvojiti, ali to zahtijeva da uredite svaki pasus da biste mu dodali klasu. To je neefikasno i ne sledi najbolje HTML kodiranje kodiranja .
Umesto toga, trebalo bi da uzmete u obzir kada stavite paragrafe. Stavite paragrafe koji direktno prate drugi stav. Da biste to uradili, možete koristiti susedni selektor. Sa ovim selektorkom, izaberete svaki stav koji odmah prethodi drugi pasus.
p + p {tekst-indent: 2em; }S obzirom da se nalazite u prvom redu, takođe treba osigurati da vaši pasusi nemaju dodatni prostor između njih (što je podrazumevani pregledač). Stajlično, trebalo bi da imate ili između paragrafa ili alineja prvu liniju, ali ne i oba.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Negativne indente
Takođe možete koristiti svojstvo teksta i indent , zajedno sa negativnom vrijednošću, da biste pokrenuli liniju koja se kreće levo, a ne desno kao normalna indentacija. To možete učiniti ako linija počinje sa oznakom na kojoj se navodi, tako da se znak citata pojavljuje u blagoj margini levo od pasusa i sami slova i dalje predstavljaju lepu levo poravnanje.
Recimo, recimo, da imate paragraf koji je potomak blokoteke i želite da je negativno ukopan. Možete napisati ovaj CSS:
blockquote p {tekst-indent: -.5em; }Ovo bi dalo početak paragrafa, koji pretpostavlja da uključuje znak otvaranja, da bi se malo pomerio ulevo kako bi se stvorila visoka punktuacija.
Što se tiče margina i paddinga
Često u web dizajnu koristite margine ili padding vrijednosti za premještanje elemenata i stvaranje bijelog prostora. Međutim, ta svojstva neće raditi na postizanju efekta razdvojenih paragrafa. Ako primjenite bilo koju od ovih vrijednosti u paragrafu, ceo tekst tog paragrafa, uključujući svaku liniju, biće razmješten umjesto samo prve linije.