CSSInterval - știm că folosirea foilor de stil cascadă ne oferă foarte multe oportunități de a gestiona proprietățile elementelor de pagină web ale site-urilor.
În acest articol, vom examina câteva modalități de a gestiona elemente de text utilizând intervale bazate pe CSS.
Când adăugăm text în pagina html a site-ului, folosim etichete bloc, de obicei blocuri DIV sau P.
De regulă, suntem destul de mulțumiți de setările de ieșire de conținut text de pe paginile site-urilor noastre, folosind blocurile DIV și P setate în foaia de stil implicită.
Dar, uneori, atunci când adăugați text la o pagină a site-ului, este necesar ca acest text să fie puțin neconform, să schimbe intervalul dintre cuvinte, să schimbe intervalul dintre litere sau linii, adică să formatezi textul într-un mod neobișnuit.
În acest caz, putem folosi proprietățile intervalelor CSS.
Pentru a examina activitatea CSSintervals pe exemple practice, să creăm un fișier, de exemplu cu numele css-space.html și să adăugăm etichetele html necesare:
Acum suntem pregătiți pe exemple reale pentru a vedea ce tipuri de intervale pot fi specificate în text și cum poate fi utilizată interfața CSS pentru a formata textul în paginile site-ului.
Deci, ia în considerare primul stil de setare a intervalului: spațierea literelor, care specifică intervalul dintre simbolurile blocului. Adăugați următorul cod pe pagina noastră experimentală (între etichetele corporale):
Cu acest cod, vom scoate cinci blocuri div pe pagina browserului, cu stilul de spațiu al literelor din blocuri, specificăm intervalul dintre caracterele textului adăugat blocului.
Intervalul dintre simbolurile de text, în fiecare dintre blocuri, este diferit și acest interval este modificat utilizând parametrul de stil de spațiu al literelor.
În funcție de valoarea parametrului specificat în pixeli, putem specifica un interval diferit între simbolurile textului plasat în bloc div, care este clar vizibil în imagine:
Acordați atenție celor două linii inferioare, după cum puteți vedea, parametrul de spațiu al literei stilului poate lua valori negative, drept urmare, caracterele pot rula unul față de celălalt.
Următoarele tipuri de intervale. pe care o vom considera, este intervalul dintre cuvintele din bloc. Acest stil este numit: spațierea cuvintelor. Cum funcționează acest stil, să examinăm un exemplu de cod următor, care, de asemenea, să adăugăm în fișierul nostru experimental:
spațiere între cuvinte 0px
spațiu între cuvinte 10px
spațierea cuvintelor 20px
După adăugarea acestui cod html, vom vedea că în diferite blocuri distanța dintre cuvinte se va schimba în funcție de valoarea parametrului de stil de spațiere a cuvintelor, care este specificat în pixeli:
Acum, luați în considerare un exemplu de folosire a unui stil mai general: înălțimea liniei, care determină intervalul dintre liniile de pe pagina site-ului.
Pentru aceasta, adăugați următorul cod pe pagina experimentală:
linii intermediare 1.5
linii intermediare 1.5
linii intermediare 1.5
linii intermediare 2.5
linii intermediare 2.5
linii intermediare 2.5
În exemplul nostru, în două blocuri se utilizează stilul înălțimii liniei, cu diferiți parametri, în primul caz parametrul este 1,5, în al doilea caz 2,5.
În cazul utilizării stilului înălțimii liniei, distanța dintre rânduri poate fi specificată prin valorile exprimate în coeficient, în pixeli, în procente etc.
Dacă deschidem fișierul experimental cu un browser, vedem că intervalul dintre liniile din primul și al doilea bloc diferă în funcție de valoarea coeficientului specificat pentru stilul înălțimii liniei:
Este demn de remarcat faptul că pentru toate stilurile pe care le-am acoperit în acest articol, unitățile de măsură ale parametrilor utilizați pot fi oricare care sunt permise în CSS. Puteți utiliza pixeli (px), puncte (pt) procente (%) și altele.
Fișier HTML, de exemplu, am analizat cum funcționează intervalele CSS, puteți descărca următorul link: Descărcați fișierul css-space.html
Alte știri corelate: