Prin formatarea textului se întelege modificarea parametrilor initiali.
De ce sa formatam textul?
Deoarece aceasta ne ajuta sa evidentiem anumite cuvinte, sa delimităm începutul unui subtitlu sau pur si simplu pentru a face site-ul mai atractiv din punct de vedere al designului.
Unui text i se poate modifica urmatorii parametrii:
-culoarea
-alinierea
-decorarea
Culoare textului:
Poti aplica o anumita culoare textului prin folosirea etichetei "font-color:".
Setarea culorii se poate face prin trei metode:
1. Prin scrierea numelui culorii in limba engleza: "color: red".
2. Prin scrierea culorii in cod hexadecimal: "color: #FF0000".
3. Prin metoda RGB: "color: rgb(255,0,0)".
EXEMPLU:
html> #hexadecimal { #rgb { |
↓ |
Text rosu (engleza) Text rosu (hexadecimal) Text rosu (rgb) |
Dimensiunea textului:
Textul se poate redimensiona prin doua metode:
1. Prin folosirea etichetelor pereche "<h1></h1>;<h2></h2>;<h3></h3>...<h6></h6>"
2. Prin folosirea atributului "font-size:" in interiorul etichei "<style="">".
EXEMPLU:
html> </body> |
↓ |
Redimensionare text CSS h1Redimensionare text CSS h2Redimensionare text CSS h3Redimensionare text CSS h4Redimensionare text CSS h5Redimensionare text CSS h6 |
Alinierea textului:
In CSS textul se poate alinia la stanga, la dreapta, centrat sau justificat prin folosirea etichetei "font-align".
Atributele acestei etichete sunt:
-left (textul se va alinia de la stanga) "align: left;".
-right (textul se va alinia de la dreapta) "align: right;".
-center (textul se va alinia de la centru) "align: center;".
-justified (textul se va alinia justificat) "align: justified;".
EXEMPLU:
html> #center { #right { #justified { |
↓ |
Text aliniat la stanga Text aliniat la centru Text aliniat la dreapta Text aliniat justificat |
Decorarea textului:
Prin decorarea textului putem seta, dar si inlatura anumiti parametrii. Aceasta metoda este cel mai des folosita pentru inlaturarea sublinierii linkurilor.
Pentru a decora textul se foloseste eticheta "text-decoration".
Atributele acestei etichete sunt:
- "none" | textul nu contine nicio subliniere
- "overline" | textul este strabatut pe deasupra cu o linie
- "line-throught" | textul este taiat cu o linie
- "underline" | textul este subliniat
- "underline overline" | textul este atat subliniat cat si strabatut pe deasupra cu o linie
Exemplu:
h1 {
text-decoration: overline;
}