Tot timpul zilei. Despre conexiunea Alexey Gulynin. În ultimul articol, ați învățat puțin despre proiectarea textului în CSS. În acest articol, vă voi explica modul de aliniere a textului în CSS. cum să specificați un șir roșu. și, de asemenea, proprietăți precum înălțimea liniei, spațierea cuvintelor, spațierea cu litere, transformarea textului. Alinierea textului în CSS se realizează utilizând proprietatea text-align. O dată voi spune că această proprietate se găsește absolut peste tot. Există 4 valori pentru această proprietate:
stânga este alinierea din stânga, valoarea implicită utilizată de browser,
centrarea centrului,
dreapta - dreapta aliniere,
justificați - justificați lățimea. Aceasta înseamnă că browserul va alinia textul atât pe marginea stângă, cât și pe cea dreaptă, mărind distanța dintre cuvinte.
Să creăm o pagină html cu stiluri inline pentru fiecare element:
Copiați acest cod și vedeți cum funcționează acesta. Notați lucrarea proprietății text-align cu justify value.
O linie roșie sau o indentare este creată utilizând proprietatea text-indent. Valoarea acestei proprietăți poate fi setată în valori diferite. Să adăugăm această proprietate la paragraful nostru cel mai mare (care este aliniat la lățime):
După ce pagina este actualizată, veți vedea că paragraful a apărut liniuță.
Acum, să vedem cum să setăm spațierea liniilor. Aceasta se face folosind proprietatea înălțimii liniei. Să adăugăm un paragraf de 40px la paragraful nostru și să vedem ce se întâmplă:
După actualizarea paginii, veți vedea că distanța dintre linii a crescut. Implicit, această proprietate este setată la normal. Acest interval poate fi setat sub forma unui multiplicator. Dacă avem o dimensiune a fontului de 15px, iar multiplicatorul este egal cu trei, atunci avem un interval de linie de 45px. În CSS, aceasta ar arăta astfel:
În practică, multiplicatorii acestei proprietăți sunt de obicei utilizați, în loc de o valoare fixă.
De asemenea, puteți schimba spațiul dintre cuvinte. Aceasta se face folosind proprietatea de spațiere a cuvintelor (cuvânt cu cuvântul "cuvânt"). Să arătăm funcționarea acestei proprietăți pentru un exemplu:
După actualizarea paginii, veți vedea că distanța dintre cuvinte este de 10 pixeli.
De asemenea, puteți modifica spațiul dintre litere. Aceasta se face folosind proprietatea de spațiere a literelor (litera scrisă din engleză "letter"). Un exemplu simplu:
După actualizarea paginii veți vedea că distanța dintre litere este de 10 pixeli.
Uneori este necesară schimbarea literelor. Acest lucru se face folosind proprietatea text-transform. Această proprietate are următorul înțeles:
capitol - face ca toate literele din text să fie capitalizate. Acest lucru se face, de obicei, pentru anteturi.
litere mici - face ca toate literele din text să fie mici.
capitalizează - face fiecare primă scrisoare a cuvântului capital.
Puteți spune că puteți scrie direct în HTML cum este necesar textul (undeva mare, undeva mic). Cu toate acestea, acest lucru încalcă ideologia că html este markup, CSS este designul.
Tema: crea 3 titluri 2 nivele. Pentru fiecare dintre ele, cu ajutorul stilurilor inline, setați o valoare diferită a proprietății de transformare a textului.
În acest articol, ați studiat alinierea textului, text-indent, înălțimea liniei, spațierea cu cuvinte, spațierea cu litere, text-transform.
Mai multe articole.
- Pseudo-selectori în CSS
- Selectori CSS
- Textul CSS (1 parte)
- Cum să setați un font în CSS
- Conectarea CSS
Articole similare
Trimiteți-le prietenilor: