Si të futni paragrafët me CSS

Përdorimi i pronarit të teksteve dhe zgjedhësit e ngjitur të vëllezërve

Dizajni i mirë i internetit shpesh është në lidhje me tipografinë e mirë. Meqë aq shumë nga përmbajtja e një faqe interneti është paraqitur si tekst, duke qenë në gjendje të stilizojë atë tekst të jetë tërheqës dhe efektiv, është një aftësi e rëndësishme për të poseduar si një projektues web. Për fat të keq, ne nuk kemi të njëjtin nivel të kontrollit tipografik në internet që bëjmë në shtyp. Kjo do të thotë që ne gjithmonë nuk mund ta besojmë tekstin në një faqe interneti në të njëjtën mënyrë që ne mund ta bëjmë këtë në një copë të shtypur.

Një stil i përbashkët paragrafi që shihni shpesh në shtyp (dhe që ne mund të rikrijojmë në internet) është vendi ku vija e parë e atij paragrafi është e prerë një hapësirë ​​në tab . Kjo i lejon lexuesit të shohin se ku fillon një paragraf dhe një tjetër përfundon.

Ju nuk e shihni këtë stil vizual sa më shumë në faqet e internetit sepse shfletuesit, sipas parazgjedhjes, shfaqin paragrafët me hapësirë ​​nën ta si një mënyrë për të treguar se ku përfundon njëri dhe tjetri fillon, por nëse doni të stilizoni një faqe që të ketë atë print- frymëzuar stilin e indent në paragrafët, ju mund ta bëni këtë me pronën stilin text-indent .

Sintaksa për këtë pronë është e thjeshtë. Këtu është se si do të shtonit një tekst-indent për të gjitha paragrafët në një dokument.

p {text-indent: 2em; }

Përshtatja e bërthamave

Një mënyrë që ju mund të specifikoni saktësisht paragrafët në indent, mund të shtoni një klasë në paragrafët që doni të prerë, por kjo kërkon që të redaktoni çdo paragraf për të shtuar një klasë në të. Kjo është joefikase dhe nuk ndjek praktikat më të mira të kodimit HTML .

Në vend të kësaj, duhet të konsideroni kur futni paragrafët. Ju paragrafët e paragrafëve të mëposhtëm janë direkt pas një paragrafi tjetër. Për ta bërë këtë, mund të përdorni përzgjedhësin e ngjitur të vëllezërve. Me këtë përzgjedhës, përzgjidhni çdo paragraf që paraprihet menjëherë nga një paragraf tjetër.

p + p (teksti-indent: 2em; }

Meqenëse po e futni vijën e parë, duhet gjithashtu të siguroheni që paragrafët tuaj të mos kenë ndonjë hapësirë ​​shtesë mes tyre (e cila është parazgjedhja e shfletuesit). Stilistikisht, ju duhet të keni hapësirë ​​midis paragrafëve ose të prerë vijën e parë, por jo të dyja.

p {margin-bottom: 0; mbushje-fund: 0; } p + p (margin-top: 0; mbushje-lart: 0; }

Vendet negative

Gjithashtu mund të përdorni pronën e teksteve , së bashku me një vlerë negative, që të shkaktojë fillimin e një linje për të shkuar në të majtë në krahasim me të drejtën si një indent normal. Ju mund ta bëni këtë nëse një vijë fillon me një shenjë të kuotimit në mënyrë që karakteri i kuotës të shfaqet në diferencë të vogël në të majtë të paragrafit dhe vetë letrat formojnë një shtrirje të mirë majtas.

Thuaj, për shembull, që të keni një paragraf që është një pasardhës i një bllokkoti dhe ju doni që ai të jetë i prerë negativisht. Ju mund të shkruani këtë CSS:

blockquote p {text-indent: -.5em; }

Kjo do të jepte fillimin e paragrafit, që me sa duket përfshin edhe karakterin e kuotës së hapjes, që të lëvizet pak në të majtë për të krijuar pikësim të varur.

Sa i përket kufijve dhe mbushjes

Shpesh në dizajnin e web-it, përdorni vlerat e diferencialit ose mbushjes për të zhvendosur elementet dhe për të krijuar hapësirë ​​të bardhë. Këto prona nuk do të punojnë për të arritur efektin e paragrafit të prerë, megjithatë. Nëse aplikoni një nga këto vlera në paragrafin, teksti i tërë atij paragrafi, duke përfshirë çdo linjë, do të distancohet në vend të vijës së parë.