Bun web design este adesea despre o tipografie bună. Întrucât o mare parte din conținutul unei pagini web este prezentat ca text, posibilitatea de a stiliza textul astfel încât să fie atât atractiv cât și eficient este o abilitate importantă de posedat ca designer web. Din păcate, nu avem același nivel de control tipografic online pe care îl avem în tipar. Aceasta înseamnă că nu putem întotdeauna să stilăm textul în mod fiabil pe un site web în același mod în care am putea face acest lucru într-o piesă tipărită.
Un stil de paragraf obișnuit pe care îl vedeți adesea în tipar (și pe care îl putem recrea online) este locul în care primul rând al acelui paragraf este indentat spațiul filelor. Acest lucru permite cititorilor să vadă de unde începe un paragraf și se termină altul.
Nu vedeți acest stil vizual la fel de mult în paginile web, deoarece browserele, în mod implicit, afișează paragrafe cu spațiu sub ele ca o modalitate de a arăta unde se termină una și începe alta, dar dacă doriți să creați o pagină pentru a avea asta inspirat de tipar
stil de indentare la paragrafe, puteți face acest lucru cu text-indent proprietate de stil.Sintaxa acestei proprietăți este simplă. Iată cum ați adăuga o liniuță de text la toate paragrafele dintr-un document.
p {
text-indent: 2em;
}
Personalizarea indentărilor
Într-un mod puteți specifica exact paragrafele care trebuie indentate, puteți adăuga o clasă la paragrafele pe care doriți să le indentați, dar acest lucru necesită modificarea fiecărui paragraf pentru a adăuga o clasă la acesta. Acest lucru este ineficient și nu urmează Codare HTML cele mai bune practici.
În schimb, ar trebui să luați în considerare atunci când introduceți paragrafe. Indentați paragrafe care urmează direct un alt paragraf. Pentru a face acest lucru, puteți utiliza selectorul de frate alăturat. Cu acest selector, selectați fiecare paragraf care este imediat precedat de un alt paragraf.
p + p {
text-indent: 2em;
}
Deoarece introduceți prima linie, ar trebui să vă asigurați, de asemenea, că paragrafele dvs. nu au spațiu suplimentar între ele (care este implicit browserul). Din punct de vedere stilistic, ar trebui să aveți fie spațiu între paragrafe sau indentați prima linie, dar nu ambele.
p {
marginea de jos: 0;
fund de umplutură: 0;
}
p + p {
marginea-sus: 0;
căptușeală: 0;
}
Indentări negative
Puteți utiliza, de asemenea, text-indent proprietate, împreună cu o valoare negativă, pentru a face ca începutul 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 ghilimele, astfel încât caracterul ghilimele să apară în o ușoară margine în stânga paragrafului și literele în sine formează încă o stânga frumoasă aliniere.
Spuneți, de exemplu, că aveți un paragraf care este un descendent al unei citate mari și doriți să fie indentat negativ. Ai putea scrie acest CSS:
blockquote p {
text-indent: -.5em;
}
Astfel, începutul paragrafului, care include probabil caracterul de ghilimel de deschidere, va fi ușor deplasat spre stânga pentru a crea punctuație suspendată.
În ceea ce privește marginile și căptușeala
De multe ori în designul web, îl folosiți marja sau valorile de umplere pentru a muta elemente și a crea spațiu alb. Cu toate acestea, aceste proprietăți nu vor funcționa pentru a obține efectul de paragraf indentat. Dacă aplicați oricare dintre aceste valori la paragraf, întregul text al acelui paragraf, inclusiv fiecare linie, va fi spațiat în loc doar de prima linie.