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.
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:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h1 { letter-spacing:4px; }
</style>
</head>
<body>
<h1>Tutorial CSS - letter-spacing</h1>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h2 { word-spacing:9px; }
</style>
</head>
<body>
<h2>Tutorial CSS - word-spacing</h2>
</body>
</html>
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:
<!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>
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:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h2 { text-transform:uppercase; }
</style>
</head>
<body>
<h2>Tutorial CSS - text-transform</h2>
</body>
</html>
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:
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>
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:
<!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>
Cu proprietatea text-indent se poate stabili un spatiu suplimentar, gol, la inceputul primei linii de text dintr-un paragraf.
Sintaxa generala este:
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>
Cu proprietatea CSS text-decoration: textul poate fi afisat cu: subliniere, supraliniere, si taierea textului cu o linie pe mijloc.
- Valori
<!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>
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:
<!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.
<select name="a_name"> <option value="val1">Optiune 1</option> <option value="val2" selected="selected">Optiune 2</option> </select>
#id {
background: linear-gradient(top left, #1f1, #fff, #11f);
}var arr = [1, "CoursesWeb.net", "MarPlo.net"]; alert(arr[2]);
header("Location: http://coursesweb.net/");
exit;The garden is a place with flowers. - Gradina este un loc cu flori.
El jardín es un lugar de flores. - Gradina e un loc cu flori.