simple-webdesign.com

Scurt tutorial CSS: elementul text

De astazi voi incerca (din nou) sa reiau seria tutorialelor CSS, nu de alta, dar poate pentru unii sunt folositoare. Astazi, incerc sa spun doar cateva cuvinte despre formatarea textului folosind proprietatile CSS-ului.

Sa luam exemplul de mai jos:

<!--
p {
color: #003366;
word-spacing: 10px;
letter-spacing: 10px;
text-decoration: underline;
vertical-align: baseline;
text-transform: capitalize;
text-align: right;
}
-->

Acest cod practic va controla cum se afiseaza text-ul dintr-un paragraf, adica cam tot ce se afla intre <p> si </p>. Ce face insa fiecare linie in parte:

color: #003366; - am atribuit o culoare textului.  Aceasta poate sa fie o valoare scrisa in hexa, ca in acest exemplu sau pur si simplu se poate preciza direct culoarea, de exemplu red.
word-spacing: 10px; – face exact ceea ce spune ca face. Adica mareste spatiul dintre cuvinte cu 12 pixeli. Valoarea implicita este normal, daca nu se specifica nimic.
letter-spacing: 10px; – ca si mai sus, aceasta proprietate mareste practic distanta dintre litere cu 10 pixeli sau desigur, cu cat se specifica. Aceasta valoare poate sa fie si negativa
text-decoration: underline; - si aici cred ca e destul de evident, nu? Aceasta proprietate practic ii spune textului sa fie subliniat. Mai poate lua valorile: overline, blink, line-through.
text-transform: capitalize; – transforma afisarea cu majuscula a primei litere dintr-un cuvant. Mai poate lua valorile:  uppercase si lowercase.
text-align: right; – am aliniat textul la stanga. Valoarea implicita este left, insa poate sa fie si center.

Daca e sa aplicam toate aceste proprietati unui paragraf aflat intr-un html, rezultatul ar arata asa:

Pe langa cele precizate mai sus, pentru formatarea unui text folosind CSS-ul, se mai pot utiliza si urmatoarele proprietati:

line-height – pentru a stabili distanta dintre 2 randuri de text succesive.
font-style – pentru a face textul italic.
font-size – pentru a stabili marimea fontului.
font-family – pentru a preciza ce fonturi se vor folosi.

Legat de font-family e bine de stiut ca cel putin deocamdata este indicat sa se foloseasca doar urmatoarele fonturi:

Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Si asta pentru ca aceste fonturi sunt prezente pe majoritatea calculatoarelor. Folosirea unui font mai special face ca pagina sa se afiseze corect doar pe calculatoarele care are instalat acel font.

In mare cam asta este, desi se mai pot spune multe despre formatarea unui text dintr-o pagina web. Promit sa revin insa cat de curand cu detalii legate de aceste aspecte (de exemplu, cum aranjam si formatam textele in zone diferite ale unui site).