Metodele de afisare a textelor prin controlul nu numai a fontului, dimensiunii si culorilor, ci si prin alte elemente (spatii, aliniere), pot imbunatati aspectul pagini si pot atrage atentia asupra anumitor elemente din text.


Spatiul intre litere

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:

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:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h1 { letter-spacing:4px; }
</style>
</head>
<body>
<h1>Tutorial CSS - letter-spacing</h1>
</body>
</html>
- Puteti folosi si pixeli (px).

Spatiul dintre cuvinte

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:

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:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h2 { word-spacing:9px; }
</style>
</head>
<body>
<h2>Tutorial CSS - word-spacing</h2>
</body>
</html>

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:

Sintaxa:
selector { line-height:valoare; }
Iata un exemplu in care inaltimea liniei se dubleaza (200% din dimensiunea fontului):
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.lh_180 {
font-size:18px;
line-height:200%;
}
</style>
</head>
<body>
<div class='lh_180'>Tutorial CSS - line-height.<br>
Un al rand din cest Div.</div>
</body>
</html>

Marimea (tipul) literelor

Folosind CSS, se poate defini 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.
- Valori:

Sintaxa generala:
selector { text-transform:valoare; }
Iata un exemplu in care toate literele vor fi afisate cu majuscule:
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h2 { text-transform:uppercase; }
</style>
</head>
<body>
<h2>Tutorial CSS - text-transform</h2>
</body>
</html>

Alinierea textului

Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului.
Definirea alinierii se face specificand una din valorile: left, right, centersau justify (aliniat stanga-dreapta).
Forma generala:

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 centrat:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h2 { text-align:center; }
</style>
</head>
<body>
<h2>Exemplu cu text-align:center;</h2>
</body>
</html>

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 elementul <span>.
Sintaxa:

selector { vertical-align:valoare; }
- "valoare" poate fi una din urmatoarele optiuni: Iata un exemplu in care textul din eticheta <span> cu clasa ".va_sup" va aparea ca exponent fata de textul din stanga-dreapta lui:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
span.va_sup { vertical-align:super; }
</style>
</head>
<body>
<div>Text in Div, <span class='va_sup'>acesta in span cu class va_sup</span>, se vede alinierea.</div>
</body>
</html>

Proprietatea text-indent

Cu proprietatea text-indent se poate stabili un spatiu suplimentar, gol, la inceputul primei linii de text dintr-un paragraf.
Sintaxa generala este:

selector { text-indent:valoare; }
- valoare poate fi in pixeli (px) sau em, ori in procente (proportional cu latimea paragrafului).

Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile negative determina o indentare inspre margine, fiind necesar sau marirea umplerii (padding) sau marirea marginilor.

Iata un exemplu de cod CSS in care va fi definit un spatiu de 30 pixeli la inceputul fiecarui paragraf <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
p {
text-indent:30px;
}
</style>
</head>
<body>
<p>
A fost odata ca niciodata,<br>
A doua linie continua si incheie povestea.
</p>
<p>
Alt paragraf, nu spune nimic.<br>
Hai si pe alte randuri,<br>
Doar primul e cu 'indent'.
</p>
</body>
</html>
Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi relativ la dimensiunea fontului elementului asupra caruia se aplica.
Pentru eliminarea indentarii se aplica valoarea 0.

Proprietatea text-decoration

Cu proprietatea CSS text-decoration: textul poate fi afisat cu: subliniere, supraliniere, si taierea textului cu o linie pe mijloc.
- Valori

Sintaxa:
selector { text-decoration:valoare }
- Valoarea "none" anuleaza efectele "text-decoration" mostenite. 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 cu clasa '.no_line' nu vor mai fi afisate subliniat:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
a.no_line:link {
text-decoration:none;
}
</style>
</head>
<body>
<a href='//marplo.net' class='no_line'>MarPlo.net</a><br>
<a href='//gamv.eu'>Gamv.eu</a><br>
<a href='//coursesweb.net' class='no_line'>CoursesWeb.net</a>
</body>
</html>

Afisare Spatii goale

Liniile goale multiple si spatiile goale din text sunt tratate ca un singur spatiu sau sunt ignorate, daca nu este utilizata eticheta <pre>.
CSS permite afisarea acestor spatii, precum si a liniilor goale, cu proprietatea white-space:pre.
Sintaxa:

selector { white-space:valoare; }
- "valoare" poate fi: "pre", "nowrap" (impiedica trecerea la linia urmatoare) sau "normal".

Iata un exemplu in care in elementele cu clasa '.cls_pre' spatiile goale din continut si liniile goale vor fi afisate asa cum au fost scrise:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.cls_pre {
white-space:pre;
}
</style>
</head>
<body>
Util pt. a afisa linii de cod:
<div class='cls_pre'>
.cls_cntr {
 color: #0000ef; /* like blue */
 margin: 2px auto;
 text-align:center;
}

/* Dupa 2 linii */
// Exemplu cu: white-space: pre;
</div>
</body>
</html>

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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Configurare text

Last accessed pages

  1. Conditional IF in Limba Engleza - Fraze Conditionale (20698)
  2. PHP PDO - prepare si execute (191)
  3. PHP PDO - Select, fetch (262)
  4. Contor vizitatori si accesari (316)
  5. Articolul din limba engleza - The article (16744)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2029)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1414)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (998)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (980)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (921)