Folosirea proprietății induse de text și a selectorilor de sibling adiacenți
Designul bun de web este adesea despre o bună tipografie. Din moment ce atât de mult din conținutul unei pagini web este prezentat ca text, fiind capabil să stilul textul atât de atractiv și de eficient, este o abilitate importantă de a avea un designer web. Din păcate, nu avem același nivel de control tipografic online pe care îl facem în imprimare. Aceasta înseamnă că nu putem întotdeauna să creăm text pe un site în același mod în care putem face acest lucru într-o piesă tipărită.
Un stil comun al paragrafelor pe care îl vedeți frecvent în imprimare (și pe care îl putem recrea online) este locul unde primul rând al paragrafului este indentat într-un spațiu tab . Acest lucru permite cititorilor să vadă unde începe un paragraf, iar altul se termină.
Nu vedeți acest stil vizual în paginile web, deoarece browserele, în mod implicit, afișează paragrafe cu spațiul de sub ele ca o modalitate de a arăta unde se termină și de ce începe altul, dar dacă doriți să stylizați o pagină pentru a avea acea imprimare, stilul indentat inspirat pe paragrafe, puteți face acest lucru cu proprietatea de stil text-indent .
Sintaxa pentru această proprietate este simplă. Iată cum ați adăuga un text-indent la toate paragrafele dintr-un document.
p {text-indent: 2em; }Personalizarea indiciilor
Într-un mod în care puteți specifica exact paragrafele la liniuță, puteți adăuga o clasă la paragrafele pe care doriți să le indentați, însă aceasta necesită modificarea fiecărui paragraf pentru a adăuga o clasă la acesta. Aceasta este ineficientă și nu urmează cele mai bune practici de codare HTML .
În schimb, ar trebui să luați în considerare atunci când indentați paragrafe. Vă indentați paragrafele care urmează imediat după un alt paragraf. Pentru a face acest lucru, puteți folosi selectorul fratelui adiacent. Cu acest selector, selectați fiecare paragraf care este imediat precedat de un alt paragraf.
p + p {text-liniuță: 2em; }Deoarece introduceți prima linie, trebuie să vă asigurați că paragrafele dvs. nu au un spațiu suplimentar între ele (care este implicit pentru browser). Din punct de vedere stilistic, ar trebui fie să aveți spațiu între paragrafe, fie indent indentă, dar nu ambele.
p {marginea-jos: 0; pad-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Negative negative
De asemenea, puteți utiliza proprietatea text-indent , împreună cu o valoare negativă, pentru a determina pornirea unei linii să meargă spre stânga, spre deosebire de dreapta, ca o liniuță normală. Puteți face acest lucru dacă o linie începe cu un ghilimele, astfel încât caracterul de cotă să apară în marginea ușoară din partea stângă a paragrafului și literele însăși formează încă o aliniere frumoasă la stânga.
Spuneți, de exemplu, că aveți un paragraf care este un descendent al unei blocuri de bloc și doriți ca acesta să fie negativ indentat. Ai putea scrie acest CSS:
blochează p {text-indent: -.5em; }Acest lucru ar face ca începutul paragrafului, care probabil include caracterul de cotație de deschidere, să fie ușor mutat spre stânga pentru a crea semne de punctuație.
În ceea ce privește marginile și garniturile
Deseori, în designul web, utilizați valorile margini sau de umplutură pentru a muta elemente și a crea spațiu alb. Aceste proprietăți nu vor funcționa pentru a obține efectul paragrafului indentat. Dacă aplicați una dintre aceste valori paragrafului, întregul text al acelui paragraf, incluzând fiecare rând, va fi distanțat în loc de primul rând.