Curs Css

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
Ce atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?
type style class
<div style="width: 80%; border: 3px solid #888888;">Continut</div>
Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?
translate() scale() skew()
#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Clic pe functia care poate converti un obiect Date in Sir.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Care functie aplica o alta functie la elementele unui array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}
Cum se spune "sambata" in limba engleza?
Sunday Saturday Monday
On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.
Cum se spune "sambata" in limba spaniola?
domingo lunes sábado
Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.
Configurare text

Last accessed pages

  1. Chemare lui Dumnezeu nu ramane neauzita sau fara raspuns (184)
  2. Contor vizitatori si accesari (1779)
  3. Numerale, Numere in limba engleza - Numerals (53241)
  4. Trecut perfect - Exercitii si teste incepatori (8951)
  5. Comenzi formale (1115)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (504)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (451)
  3. Coduri pt culori (283)
  4. Formatare text in pagina html (165)
  5. Creare si editare pagini HTML (161)