Puteți alinia paragrafele sau conținutul celulelor tabelului conform dorințelor dvs. folosind următoarele proprietăți. Aceste proprietăți pot fi aplicate și la toate celelalte elemente pentru care a fost atribuită o înălțime sau lățime definită sau calculată.
Indentarea primului rând
Începeți cu proprietatea text-indent. Alegeți cum să fie indentat primul rând al unui paragraf. Este posibilă și o "de-indentare" la stânga. Pentru aceasta, trebuie utilizată o valoare negativă a lui text-indent. (Informații detaliate despre când poate fi utilă o de-indentare extremă vor urma mai jos). Se așteaptă o valoare numerică.
Un exemplu:
.absatz { text-indent: 2em; }
Așa arată în browser:
Dacă utilizați o valoare negativă, există o de-indentare a textului în primul rând al textului curent.
.absatz {
text-indent: -2em;
}
Și aici, desigur, o privire asupra rezultatului în browser:
Așadar, și așa ceva este posibil. În definirea de-indentărilor, asigurați-vă că conținutul rămâne citibil, dacă este cazul. De fapt, text-indent poate deveni interesant în contextul optimizării pentru motoarele de căutare. De exemplu, uneori este mai bine să afișați grafice în loc de text.
Și totuși, dacă textul trebuie să fie disponibil pentru motoarele de căutare, veți întâmpina o dilemă. Această dilemă poate fi rezolvată prin utilizarea lui text-indent. Deoarece acestă proprietate vă permite să mutați texte. Prin urmare, puteți să ascundeți textele din câmpul vizual al vizitatorilor.
Avantajul variantei
text-indent: Textul care trebuie înlocuit cu o imagine este prezent în sursă nemodificat.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Prin această sintaxă, elementului
h1 îi este atribuită o imagine de fundal. (Proprietatea background a fost deja prezentată în această serie). Prin text-indent: -99999px, textul titlului este mutat la stânga cu 99999 pixeli. Astfel, textul nu mai este vizibil deloc. Astfel, se afișează efectiv doar imaginea.
Dacă dezactivați foaia de stiluri, textul este din nou vizibil în mod normal.
Stabilirea înălțimii rândurilor
Am menționat deja o dată în legătură cu proprietatea font în general rândul de linii. Acum, vom aborda un pic mai detaliat acest subiect. Definirea înălțimii rândurilor este interesantă în legătură cu dimensiunea fontului (font-size).
Înălțimea rândurilor poate fi stabilită prin proprietatea line-height. Se permit valori numerice. De asemenea, sunt posibile valori procentuale. Acestea se referă apoi la dimensiunea fontului a elementului pentru care a fost indicată înălțimea rândurilor. Înainte de a defini înălțimea rândurilor, luați în considerare următoarele: Un browser/dispozitiv poate acorda prioritate valorii înălțimii rândurilor și poate afișa elemente tăiate dacă acestea sunt mai mari. Acest lucru poate fi enervant mai ales în cazul imaginilor. Prin urmare, testați rezultatele înainte de a publica pagina.
Exemplul următor arată cum se poate utiliza line-height.
<p style="line-height:1.4em; font-size:1em;">Uneori creăm un aspect minunat, dar încă mai lipsește pozele și dacă folosim doar cadre goale, aspectul pare destul de gol. Putem face mai bine:<br /> În acest training video, vă voi arăta cele mai bune site-uri web pentru a obține rapid spații libere pentru imagini potrivite. O listă genială o găsiți, de exemplu, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aici</a>.</p> <p style="line-height:2em;font-size:1em;">Uneori creăm un aspect minunat, dar încă mai lipsește pozele și dacă folosim doar cadre goale, aspectul pare destul de gol. Putem face mai bine:<br /> În acest training video, vă voi arăta cele mai bune site-uri web pentru a obține rapid spații libere pentru imagini potrivite. O listă genială o găsiți, de exemplu, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aici</a>.</p> <p style="line-height:1em; font-size:1em;">Uneori creăm un aspect minunat, dar încă mai lipsește pozele și dacă folosim doar cadre goale, aspectul pare destul de gol. Putem face mai bine:<br /> În acest training video, vă voi arăta cele mai bune site-uri web pentru a obține rapid spații libere pentru imagini potrivite. O listă genială o găsiți, de exemplu, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aici</a>.</p>
Aici au fost definite trei paragrafe, fiecărui dintre ele fiindu-i atribuite înălțimi de linie diferite.
Cum puteți vedea, înălțimea de linie poate influența foarte mult lizibilitatea textului în flux. Așadar, fiți atenți la folosirea proprietății line-height.
Rămâne desigur întrebarea, ce înălțime de linie ar trebui de fapt să alegeți. De obicei, se pleacă de la înălțimi de linie între 130 și 150 la sută.
p {
line-height: 150%;
}
În final, lizibilitatea bună depinde în special de lungimea șirului de caractere. Aici se aplică: înălțimea de linie ar trebui să fie cu atât mai mare, cu cât sunt mai lungi liniile de text. Prin urmare, testați în mod absolut pagina pentru a vă asigura că lizibilitatea este cu adevărat păstrată.
Aliniere text orizontal
Prin proprietatea text-align se stabilește alinierea textului orizontal pentru paragrafe și alte texte în flux sau elemente inline conținute în elemente block. Următoarele valori pot fi stabilite pentru text-align:
• left – aliniere la stânga
• right – aliniere la dreapta
• center – centrată
• justify – aliniere pe lățimea blocului
Și aici un exemplu:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Și iată cum arată rezultatul în browser:
Rețineți că text-align nu se referă doar la conținutul textului. Proprietatea se aplică de fapt tuturor elementelor inline. Deci, dacă este inclusă o imagine, definiția text-align se aplică și la acest element.
Un singur sfat: text-align nu ar trebui – cel puțin conform specificației CSS oficiale – să aibă efect asupra elementelor block. (Chiar dacă există browsere care o aplică și la elementele block). Dacă doriți să aliniați elemente block, în aceste cazuri folosiți proprietățile margin deja prezentate.
