[CSS] Configurare text

[ActiON_]

Configurare text

Textele alcatuiesc o buna parte din paginile web. Metodele de afisare a textelor prin controlul nu numai a fontului, dimensiunii si culorilor, ci si prin alte elemente, pot imbunatati aspectul pagini si pot atrage atentia asupra anumitor elemente din text.

1. Spatiul intre litere

Spatierea se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate aduaga sau reduce spatiul dintre litere folosind proprietatea letter-spacing, urmata de o valoare exprimata intr-o anumita unitate de masura, ce poate lua si valori negative.
Sintaxa generala este urmatoarea:

Code: [Select]

selector { letter-spacing:valoare }

Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite (fara modificari suplimentare).
Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi calculata in raport cu cea a elementului parinte.
Exemplu:

Code: [Select]

h1 { letter-spacing:1,5em; }

- Puteti folosi si pixeli (px)

2. Spatiul dintre cuvinte

CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si prin micsorare.
Spatiul dintre cuvinte poate fi modificat folosind proprietatea word-spacing, urmata de o valoare exprimata intr-o anumita unitate, fiind de obicei stabilita in pixeli.
Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal.
Sintaxa generala este urmatoarea:

Code: [Select]

selector { word-spacing:valoare }

O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este fixat la valoarea prestabilita, neproducand de fapt nici un efect, fiind similar cu valoarea normal.
Iata un exemplu in care marim spatiul intre cuvintele din eticheta "h2" cu 8 pixeli:

Code: [Select]

h2 { word-spacing:8px; }

3. Spatiul intre linii

Inaltimea randurilor se refera la spatiul dintre liniile paragrafului.
Modificarea spatiului intre linii poate avea ca efect o mai buna si usoara citire a textului in cazul in care aceasta este mai mare (creaza o regiune cu spatiu intre liniile de text). Alteori, daca inaltimea este mai mica (folosita la randurile de titlu), poate conferi un aspect mai stilat.
Pentru a modifiica inaltimea randurilor se foloseste proprietatea line-height, urmata de o valoare care poate fi exprimata in trei moduri:
- un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv pentru a obtine valoarea spatierii;
- o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei va avea o valoare exacta;
- un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din dimensiunea fontului folosit pentru scrierea textului.
Sintaxa generala pentru modificarea spatiului intre linii este:

Code: [Select]

selector { line-height:valoare }

Iata un exemplu in care marim inaltimea liniei cu 50% din dimensiunea fontului:

Code: [Select]

h1 { line-height:150%; }

Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin introducerea caracterului "/" urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului. Exemplu: h1 { font-size:12px/28px; }

4. Marimea (tipul) literelor

Exista cazuri in care se doreste afisarea textului cu un anume tip de litere. Folosind CSS, se poate specifica explicit ca textul sa apara cu majuscule initiale, majuscule, minuscule, combinat sau asa cum a fost el scris.
Cu ajutorul proprietatii text-transform se poate controla marimea literelor din text, indiferent de modul cum a fost el scris initial.
Pentru a schimba tipul literelor dintr-un text, proprietatea text-transform va fi urmata de o valoare care poate fi:
capitalize – pentru ca primul caracter din fiecare cuvant sa fie scris cu majuscula;
uppercase – pentru ca toate caracterele sa fie scrise cu majuscule;
lowercase - pentru ca toate caracterele sa fie scrise cu litere mici;
none – pentru ca textul sa fie afisat asa cum este.
Sintaxa generala este:

Code: [Select]

selector { text-transform:valoare }

Iata un exemplu in care toate literele vor fi afisate cu majuscule:

Code: [Select]

h1 { text-transform:uppercase; }

Proprietatea "text-transform" este utila atunci cand textele sunt create in mod dinamic (de exemplu, in cazul in care ele provin dintr-o baza de date sau form HTML).

5. Alinierea textului

Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini (stanga-dreapta).
Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului.
Definirea alinierii se face specificand dupa proprietatea text-align una din valorile: left, right, center sau justify.
Forma generala este:

Code: [Select]

selector { text-align:valoare }

Proprietatea poate fi aplicata numai elementelor la nivel de bloc (DIV, UL, Hx, p), valoarea sa implicita fiind in majoritatea cazurilor stabilita la valoarea "left".
Iata un exemplu in care textul din eticheta "h2" este aliniat "stanga-dreapta":

Code: [Select]

h2 { text-align:justify; }

- In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si a literelor se schimba pentru a se obtine linii de aceeasi lungime.

6. Alinierea pe verticala a textului

Cu ajutorul proprietatii vertical-align se poate preciza pozitia unor elemente (in linie) in raport cu textul din jurul lor. Asta inseamna ca proprietatea poate fi folosita doar cu etichete in linie care nu determina un salt la linie noua, de obicei utilizandu-se cu eticheta "span".
Sintaxa pentru utilizarea proprietatii vertical-align este:

Code: [Select]

selector { vertical-align:valoare }

Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:
super – pentru scrierea textului in stil exponent, deasupra liniei de baza;
sub - pentru scrierea textului in stil indice, sub linia de baza;
baseline – pentru scrierea textului pe linia de baza;
- una din valorile: "top", "middle", "bottom", "text-top", "text-bottom" – pentru a alinia textul relativ la alinierea parintelui acestuia;
- valoare procentuala – care ridica sau coboara linia de baza a elementului proportional cu dimensiunea fontului elementului parinte.
Iata un exemplu in care textul din eticheta <span> va aparea ca exponent fata de textul din stanga-dreapta lui:

Code: [Select]

span { vertical-align:super; }

7. Formarea paragrafelor

Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de text dintr-un paragraf. Pentru aceasta, proprietatea text-indent este urmata de o valoare exprimata intr-o unitate de masura (pixeli sau em) sau in procente (proportional cu latimea paragrafului).
Sintaxa generala este:

Code: [Select]

selector { text-indent:valoare }

Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile negative determina o indentare inspre argine, fiind necesar sau marirea umplerii (padding) sau marirea marginilor.
Iata un exemplu de cod CSS in care va fi determinat un spatiu de 20 pixeli la inceputul paragrafului din eticheta <p>:

Code: [Select]

p { text-indent:20px; }

Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi relativ la dimensiunea fontului elementului asupra caruia se aplica. Pentru eliminarea decalarii se utilizeaza valoarea 0.

8. Aplicarea elementelor decorative

CSS permite ornarea textului prin scoaterea lui in evidenta in patru moduri: subliniere, supraliniere, taierea textului cu o linie sau crearea de texte care clipesc.
Aplicarea de elemente ornamentale unui text se realizeaza prin proprietatea text-decoration, urmata de una din valorile:
underline – pentru a sublinia textul
overline – pentru a trasa o linie deasupra textului
line-through – pentru a taia textul cu o linie
blink – pentru a face textul sa apara si dispara intermitent
Forma generala este :

Code: [Select]

selector { text-decoration:valoare }

Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei valori se elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat.
Iata un exemplu de cod in urma caruia link-urile nu vor mai fi afisate subliniat:

Code: [Select]

a:link { text-decoration:none; }

Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele navigatoarelor.

9. Spatiile albe

Intreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca un singur spatiu sau sunt ignorate, daca nu este utilizata eticheta <pre>.
CSS permite afisarea acestor spatii, precum si a intreruperilor textului, utilizand proprietatea white-space, urmata de valoarea "pre".
Forma generala este:

Code: [Select]

selector { white-space:valoare }

In locul cuvantului "valoare" poate fi adaugat: "pre", "nowrap" sau "normal"
Utilizarea valorii "nowrap" impiedica trecerea la linia urmatoare.
Valoarea "normal" permite navigatorului sa decida asupra modului de tratare a spatiilor. De obicei, acestea vor fi transformate intr-un singur spatiu.
Iata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor fi afisate asa cum au fost scrise:

Code: [Select]

p { white-space:pre; }

Spre deosebire de eticheta <pre> care schimba fontul cu unul monospatiat, valoarea "pre" a proprietatii white-space nu are nici un efect asupra fontului elementului la care se aplica.

Sursa/Source: marplo.net

[blacklife]

Un tutorial foarte bine explicat si folositor

[RazvanS_]

Multumim,foarte folositor

[AroWn.xD]

Destul de bun tutorialul .. Avand in vedere ca uni chiar erau interesati de astea .. unele le stiam ..
OFF : Cu ocazia asta mi-am adus aminte cum m-am dus eu la profa sa o intreb de transparenta si moloaze x_x