formatarea textului
Acest text este aranjat cu unele dintre proprietățile de formatare a textului. Titlul foloseste text-align, text-transform , și de color proprietăți. Paragraful este indentat, aliniat, și este specificat spațiul dintre caractere. Subliniere este eliminat din această culoare „Bricolaj Încearcă“ link - ul.
Culoarea textului
color Proprietatea este folosit pentru a seta culoarea textului.
Cu CSS, o culoare este cel mai adesea specificat de:
- un nume de culoare - cum ar fi "red"
- o valoare HEX - cum ar fi "#ff0000"
- o valoare RGB - cum ar fi " rgb(255,0,0) "
Uită - te la valori de culoare CSS pentru o listă completă de posibile valori de culoare.
Culoarea textului implicit pentru o pagină este definită în selectorul corpului.
Note: Pentru W3C CSS compatibil: Dacă definiți color proprietate, trebuie să definiți , de asemenea, background-color de background-color proprietate.
Aliniere text
text-align proprietate este folosit pentru a seta alinierea orizontală a unui text.
Un text poate fi aliniat la stânga sau la dreapta, centrat, sau justificată.
Exemplul următor arată aliniat centru și la stânga și la dreapta textul aliniat (aliniere la stânga este implicit dacă direcția de text este de la stânga la dreapta, și alinierea corectă este implicit dacă direcția de text este de la dreapta la stânga):
Exemplu
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
} Încearcă - l singur » În cazul în care text-align proprietatea este setată la "justify" , fiecare linie este întinsă , astfel încât fiecare linie are aceeași lățime, iar marginile din stânga și din dreapta sunt drepte (like in magazines and newspapers) :
Textul de decorare
De text-decoration proprietate este utilizat pentru a seta sau a elimina decoratiuni din text.
Valoarea text-decoration: none; este adesea utilizat pentru a elimina sublinieri din link-uri:
Celelalte text-decoration valori sunt folosite pentru a decora textul:
Exemplu
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Încearcă - l singur » Note: Nu se recomandă să sublinieze textul care nu este o legătură, deoarece aceasta provoacă adesea confuzii cititorului.
Transformare text
text-transform proprietatea este utilizată pentru a specifica majuscule și minuscule într - un text.
Acesta poate fi folosit pentru a transforma totul în litere mari sau mici, sau majusculă prima literă a fiecărui cuvânt:
Exemplu
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Încearcă - l singur » indentare text
text-indent Proprietatea este utilizată pentru a specifica indentarea primei linii a unui text:
Spațiul dintre litere
letter-spacing Proprietatea este utilizată pentru a specifica spațiul dintre personaje într - un text.
Următorul exemplu demonstrează modul în care a mări sau micșora spațiul dintre caractere:
Inaltimea liniei
line-height proprietatea este utilizată pentru a specifica spațiul dintre linii:
Direcția textului
direction Proprietatea este folosită pentru a schimba direcția textului unui element:
Spațierea cuvintelor
word-spacing proprietate este folosit pentru a specifica spațiul dintre cuvintele într - un text.
Următorul exemplu demonstrează modul în care a mări sau micșora spațiul dintre cuvinte:
Mai multe exemple
Dezactivarea ambalaj text în interiorul unui element
Acest exemplu demonstrează modul de dezactivare ambalaj text în interiorul unui element.
Alinierea verticala a unei imagini
Acest exemplu demonstrează modul de a seta align verticală a unei imagini într-un text.
Adăugați umbră la text
Acest exemplu demonstrează modul de a adăuga umbre la text.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
Toate proprietățile CSS Text
| Proprietate | Descriere |
|---|---|
| color | Setează culoarea textului |
| direction | Specifică direcția textului / direcția de scris |
| letter-spacing | Mărește sau micșorează spațiul dintre caractere într-un text |
| line-height | Setează înălțimea liniei |
| text-align | Specifică alinierea orizontală a textului |
| text-decoration | Specifică decorarea adăugată în text |
| text-indent | Specifică indentarea primei linii într-un text-bloc |
| text-shadow | Specifică efectul de umbră adăugat la text |
| text-transform | Controlează valorificarea textului |
| unicode-bidi | Folosit împreună cu direcția de proprietate pentru a seta sau a reveni dacă textul ar trebui să fie ignorate pentru a sprijini mai multe limbi în același document |
| vertical-align | Setează alinierea verticală a unui element |
| white-space | Specifică modul în care este manipulat alb-spațiu în interiorul unui element |
| word-spacing | Crește sau micșorează spațiul dintre cuvinte într-un text |