Elemente CSS

pentru formatarea textelor

Stiluri personalizate pentru
Font și Text
 Proprietățile fonturilor
font-family: family-name | generic-family, ...
Unde generic-family se referă la numele unei familii generice de fonturi, spre exemplu serif (de exemplu: Times) , sans-serif (de
exemplu: Helvetica), cursive (de exemplu: Zapf-Chancery), fantasy (de exemplu: Western), monospace (de exemplu: Courier)

font-style: normal | italic | oblique

font-variant: normal | small-caps

font-weight: normal | bold | bolder | lighter | 100 ... | 900

font-size: <mărime-absolută> | <mărime-relativă> | <dimensiune> | <procentaj>

unde <mărime-absolută> poate fi xx-small | x-small | small | medium | large | x-large | xx-large
iar <mărime-relativă>: larger | smaller

font: [ font-style font-variant font-weight ] font-size[/line-height] font-family

color: culoare // culoarea textului

- cuvinte cheie care denumesc culori: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white si yellow
- forma hexazecimalã RGB se face prin caracterul # urmat imediat de trei sau de sase cifre hexazecimale. (Notatia RGB cu
trei cifre este convertitã în sase cifre prin duplicarea fiecãrei cifre)
- Notatia functională a unei valori RGB de exemplu: rgb(255,0,0), rgb(50%,50%,10%).
Proprietățile textului
• word-spacing: normal | <dimensiune precizată>

• letter-spacing: normal | <lungime precizată>

• text-decoration: none | [underline || overline || line-through || blink] adică subliniere, supralinie, tăiere cu o linie, "clipire"

• vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <procentaj>
-stabilește alinierea verticală a obiectelor in-line față de text

• text-transform: none | capitalize | uppercase | lowercase

• text-align: left | right | center | justify

• text-indent: <lungime > | <procentaj>

• line-height: normal | <numãr> | <lungime> | <procentaj>

Exemple:
BODY { color:blue; font-family: gill, helvetica, sans-serif; }

#P1 { font: 12pt/14pt sans-serif; }

#P2 { font: 80% sans-serif ;}

#P3 { font: x-large/110% "new century schoolbook", serif ;}

#P4 { font: bold italic large Palatino, serif; }

#P5 { font: normal small-caps 120%/120% fantasy ;}

#untext {text-align:justify; text-indent:50px; }

img {vertical-align:top; margin:10px; float:right}

 Exerciții:
• Realizați o pagină web folosind 2 paragrafe formatate diferit și titluri de
nivel 1 cu formatare distinctă. Paragrafele vor avea indentare, distanța
dintre rânduri va fi precizată explicit, alinierea va fi cu margini drepte. Veți
folosi elemente pentru formatarea fontului.
• Scrieți textul unei poezii pe 2 coloane. Realizați un design original folosind
proprietățile studiate pentru font, text . Căutați atribute specifice
elementului columns folosind w3schools
• Folosiți una dintre imaginile disponibile în folderul cu resurse pentru a
incadra imaginea în text (veti folosi elementul img). Folosiți pentru
pozitionarea imaginii față de text elementul
float: none|left|right|initial|inherit;