In aceasta lectie v-om invata despre proprietatile ce na ajuta sa formatam textul, si anume:
- Culoarea
- Alinierea
- Decorarea
- Transformarea
- Indentatia
Culoarea
Atributul color este folosit pentru a seta culoarea textului, lucru ce poate fi facut folosind:
- valoarea HEX – “#ff0000”
- valoarea RGB – “rgb(255,0,0)”
- numele in engleza – “red”
Exemplu:
1
2
3
4
5
6
7
8
9
10
11
|
body { color : blue ; } h 1 { color : #00ff00 ; } h 2 { color : rgb ( 255 , 0 , 0 ); } |
Aliniera
Proprietatea text-align este folosita pentru alinierea pe orizontala a textului. Cu aceasta poti seta ca textul sa fie centrat sau aliniata la stanga, respectiv dreapta sau justified. Cand este setat atributul justified fiecare linie de text este facuta sa aiba exact aceasi latime si marginile din stanga si dreapta sa fie egale (precum articolele din ziare)
Exemplu:
1
2
3
4
5
6
7
8
9
10
11
|
h 1 { text-align : center ; } p.date { text-align : right ; } p.main { text-align : justify ; } |
Decorarea
Proprietatea text-decoration este folosita la setarea sau stergerea decoratiilor unui text, de obicei este folosita pentru scoaterea sublinierii link-urilor.
Exemplu:
1
2
3
|
a { text-decoration : none ; } |
Poate fi folosit si pentru decorarea textului:
1
2
3
4
5
6
7
8
9
10
11
|
h 1 { text-decoration : overline ; } h 2 { text-decoration : line-through ; } h 3 { text-decoration : underline ; } |
Transformarea
Proprietatea text-transformation este folosita pentru a specifica tipul literelor (litere mari, mici sau capitalize(mareste decat prima litera a cuvantului) )
Exemplu:
1
2
3
4
5
6
7
8
9
10
11
|
p.litereMari { text-transform : uppercase ; } p.litereMici { text-transform : lowercase ; } p.primaLiteraMare { text-transform : capitalize ; } |
Indentatia
Proprietatea text-indentation specifica indentatia primei linii a textului.
Exemplu:
1
2
3
|
p { text-indent : 50px ; } |