Bună ziua, dragi cititori ai site-ului blogului. În articolul de astăzi vom vorbi despre proprietățile foilor de stil în cascadă, care sunt responsabile pentru parametrii fontului elementelor paginii web. Să ne uităm la modalități de a le folosi și să vedem cum funcționează. Dacă este prima dată când auziți despre conceptul de stil de pagină și nu știți nimic despre CSS, atunci vă sfătuiesc să începeți cu articolul „”.

Font-family - setați numele fontului în CSS

Să începem cu atributul font-family style cu care poți setați tipul de font și tipul de font, care va afișa textul elementului html (de exemplu, textul titlului sau al paragrafului p). Sintaxa pentru utilizarea unui atribut este:

familie de fonturi:<список имен шрифтов разделенных запятыми>

Lista numelor fonturilor este dată sub forma numelor acestora (de exemplu, Arial, Verdana sau Times New Roman). Dacă numele fontului conține spații, acesta trebuie inclus între ghilimele. Puteți specifica mai multe nume de fonturi, separate prin virgule. În acest caz, browserul va căuta mai întâi primul dintre fonturile specificate, dacă căutarea nu reușește - al doilea, al treilea și așa mai departe:

p (familie de font: Arial, Verdana, „Times New Roman”, san-serif; )

În acest exemplu, browserul va căuta mai întâi fontul Arial pe computerul utilizatorului și, dacă îl găsește, va afișa toate p elementele în același font. Dacă Arial nu este găsit pe computerul utilizatorului, atunci browserul va căuta Verdana, apoi, dacă nu reușește, Times New Roman și așa mai departe. Ultimul din lista de nume de fonturi din acest exemplu nu este numele unui anumit font, ci numele unui întreg familii de fonturi, reprezentând seturi întregi de fonturi similare.

În acest fel puteți defini familii întregi de fonturi. Există doar cinci astfel de familii:

• serif - fonturi serif;
• sans-serif - fonturi sans-serif;
• cursive - fonturi care imită textul scris de mână;
• fantasy - fonturi decorative;
• monospace - fonturi monospace.

Pe lângă numele fonturilor, proprietatea font-family poate fi setată la o valoare specială moşteni, care îi spune browserului să afișeze textul acestui element în același font ca și textul elementului părinte.

Font-size - setați dimensiunea fontului folosind CSS

Proprietatea stil font-size determină dimensiunea fontului pentru orice element din codul html. Sintaxa aplicației:

dimensiunea fontului:<размер>|xx-mic|x-mic|mic|mediu|mari|x-mari|xx-mari|mai mare|mai mic|mostenesc

Acum să aruncăm o privire mai atentă asupra modului de utilizare a acestei proprietăți.

Dimensiunea fontului poate fi specificată în valori absolute și relative. În acest scop sunt folosite unități de măsură, susținut de CSS. Pentru a seta rigid dimensiunea fontului, se folosesc următoarele unități de măsură:

• px - pixeli;
• pt - puncte;
• în - inci;
• cm - centimetri;
• mm - milimetri;
• pc - vârfuri.

Denumirea unității de măsură este indicată după valoarea în sine. De exemplu:

p (dimensiunea fontului: 10px; )
puternic (dimensiunea fontului: 12 pt; )

Când utilizați aceste stiluri, textul din toate p elementele de pe pagină va fi de 10 pixeli, iar elementele puternice vor fi de 12 pixeli.

Pentru a seta dimensiunile relative ale fontului, se folosesc următoarele notații:

• em este dimensiunea literei „m” în fontul curent;
• ex este dimensiunea literei „x” a fontului curent;
• % - procent din dimensiunea fontului elementului părinte.

De exemplu:

h1 (dimensiunea fontului: 3em; )
em (dimensiunea fontului: 150%; )

În acest exemplu, antetul h1 va fi desenat într-un font de trei ori mai mare decât dimensiunea implicită a fontului. Și elementele em sunt de o ori și jumătate mai mari.

În plus față de valorile numerice, proprietatea font-size poate fi setată la una dintre cele șapte valori de caractere: xx-small, x-small, mic, mediu, mare, x-mari sau xx-mari, care specifică dimensiuni specifice de font din de la cel mai mic la cel mai mare:

Ei bine, ultima modalitate este să folosiți valorile „mai mari” și „mai mici”, care vă permit să creșteți și să micșorați dimensiunea fontului în raport cu cea moștenită. De exemplu, dacă elementul părinte este setat la o dimensiune mică a fontului, atunci mai mare va seta elementul curent la o dimensiune medie a fontului.

Proprietatea Color - setați culoarea textului

Atributul stil de culoare specifică culoarea textului. Sintaxă:

Culoarea poate fi specificată folosind codul RGB, care este scris în formatul:

#<доля красного цвета><доля зеленого цвета><доля синего цвета>

Toate bătăile sunt scrise în numere hexazecimale de la 00 la FF. De exemplu, pentru a face ca toate titlurile h2 dintr-o pagină să apară în roșu, trebuie să scrieți următorul cod CSS:

h2 (culoare: #ff0000; )

De asemenea, este posibil să specificați culori folosind nume. Culoarea roșie va fi roșie, culoarea neagră va fi neagră, culoarea albă va fi albă. De exemplu:

h2 (culoare: roșu; )

Proprietăți font-weight, font-style, text-decorare și altele

Folosind proprietatea stilului font-weight, setați „îndrăzneala” fontului. Sintaxă:

greutate font: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

Valoarea proprietății poate fi una dintre cele șapte valori numerice de la 100 la 900 sau una dintre cele numite normal, aldin, mai îndrăzneț, mai ușor. Valoarea normală este 400, iar bold este 7000. Dar, în practică, majoritatea browserelor nu acceptă pe deplin atributul font-weight. Prin urmare, toate valorile care sunt mai mici de 400 vor corespunde normalului și tot ceea ce este mai mare decât aldine. Mai mult decât atât, valorile mai îndrăznețe și mai ușoare nu funcționează.

Exemplu de utilizare:

em (greutate font: bold; )

Proprietatea CSS font-style specifică stilul fontului. Există trei valori disponibile pentru acesta: normal, italic și oblic. Dar, în practică, sunt folosite doar primele două, unde „normal” setează stilul normal al fontului, iar valoarea „italic” forțează browserul afișați textul cu caractere cursive.

Folosind proprietatea text-decorare, puteți seta diverse decorațiuni pentru text, cum ar fi sublinierea sau eliminarea textului:

text-decor: niciunul|subliniat|overline|line-through|clipire

Există cinci valori disponibile pentru acest atribut:

• none - anulează toate efectele, inclusiv elimină sublinierea de pe linkuri, care este setat implicit;
• underline — setează text subliniat;
• overline - „supralinează” textul, adică trasează o linie deasupra textului;
• line-through - șterge textul;
• blink - setează text intermitent. Un astfel de text dispare periodic, aproximativ o dată pe secundă, apoi reapare la locul inițial. Această valoare nu este acceptată în prezent de browsere și este depreciată în CSS3.

În mod implicit, textul pentru majoritatea elementelor este afișat fără efecte. Dar unele elemente html afișează text cu subliniere, în special .

Prin urmare, cu excepția link-urilor, este mai bine să nu evidențiați nimic pe o pagină web cu subliniere. Deoarece utilizatorii vor decide subconștient că, deoarece este subliniat, înseamnă că pot face clic pe el pentru a merge. Și subliniind text simplu, induceți în eroare utilizatorul.

Nuanța proprietății text-decor este că puteți specifica mai multe valori pentru aceasta simultan:

text-decor: subliniere supralinie prin linie;

Rezultatul va fi astfel:

text tăiat subliniat și supraliniat!

Proprietatea de stil text-transform vă permite să setați caractere text:

text-transform: capitalize|majuscule|minuscule|niciuna

Proprietatea poate avea una dintre cele patru valori:

• capitalize - convertește prima literă a fiecărui cuvânt în majuscule;
• uppercase — text cu majuscule;
• minuscule — text cu litere mici;
• nici unul - nu modifică litera majusculă a caracterelor.

Pentru mărirea și micșorarea distanței dintre rândurile de text este folosit atributul înălțimea liniei. Ca valoare, puteți seta atât valorile absolute, cât și cele relative ale distanței, specificând unitatea de măsură adecvată (px, pt, em etc.). Dacă nu există o unitate de măsură, valoarea specificată este percepută de browser ca un multiplicator. De exemplu, o valoare de 1,5 stabilește o distanță între rânduri și jumătate:

p (înălțimea liniei: 1,5)

Pentru management spațierea dintre caractere proprietate text există spațiere între litere. Vă permite să setați distanța suplimentară între litere, care va fi adăugată la cea originală. Orice unități de lungime acceptate în CSS sunt acceptate ca valori - pixeli (px), puncte (pt), etc. Este acceptabil să se utilizeze valori negative. În acest caz, distanța dintre caractere va scădea:

em (spațiere între litere: 5px; )

Atribut similar spațierea cuvintelor specifică suplimentar distanța dintre cuvinte text:

h1 (spațierea cuvintelor: 5px)

Și, în sfârșit, trebuie să luați în considerare proprietatea stilului font, permițându-vă să setați mai mulți parametri pentru font simultan. Sintaxă:

font: font-size font-family

Singurii parametri necesari sunt dimensiunea fontului și este posibil să lipsească alți parametri.

De exemplu, pentru a seta textul paragrafului la 10 puncte Times New Roman, trebuie doar să scrieți următoarea regulă CSS:

p (font: 10pt „Times New Roman”)

Și dacă dorim să afișăm textul anteturilor de la primul nivel într-o dimensiune a fontului de 15 pixeli și în cursive, atunci următoarea regulă va fi:

p (font: italic 12px sans-serif)

Aici vorbim despre proprietățile CSS responsabile afișarea textului Voi termina cu paginile html. Pentru a afla mai multe despre foile de stil în cascadă, nu uitați să vă abonați la actualizările blogului și să citiți articole din secțiunea „”. Ne vedem din nou!

Culoarea fontului de pe site poate fi setată folosind codul HTML. Există o etichetă pentru asta font. Prin definiție, o etichetă font servește ca un fel de „înveliș” sau „container” pentru text, controlând proprietățile cărora le puteți modifica designul textului.

Etichetă font se aplică după cum urmează:

Creator de site-uri web "Nubex"

Cel mai simplu mod de a schimba culoarea fontului în HTML este folosirea atributului culoare etichetă font:

Creator de site-uri web "Nubex"

Aceasta setează culoarea albastră pentru cuvântul înconjurat de etichetă font.

Dar, pe lângă parametrul de culoare, eticheta are și alte atribute.

Atributele etichetei FONT

Etichetă font are doar trei atribute:

• culoare- setează culoarea textului;
• dimensiune- setează dimensiunea textului;
• faţă- specifică familia de fonturi.

Parametru culoare poate fi specificat printr-un nume de culoare (de exemplu, „roșu”, „albastru”, „verde”) sau un cod hexazecimal (de exemplu, #fa8e47).

Atribut dimensiune poate lua valori de la 1 la 7 (valoarea implicită este 3, ceea ce corespunde la 13,5 puncte pentru fontul Times New Roman). O altă opțiune pentru specificarea atributului este „+1” sau „-1”. Aceasta înseamnă că dimensiunea va fi modificată față de bază cu 1 mai mult sau, respectiv, mai puțin.

Să ne uităm la utilizarea acestor atribute în exemplul nostru:

Creator de site-uri web "Nubex"

Am aplicat eticheta font pentru un cuvânt, l-am setat la dimensiunea 6, culoarea portocalie și familia de fonturi „Serif”.

Setarea culorii textului folosind CSS

Dacă trebuie să aplicați o anumită formatare (de exemplu, să schimbați culoarea textului) mai multor secțiuni de text, atunci va fi mai potrivit să utilizați codul CSS. Există un atribut de culoare pentru aceasta. Să ne uităm la cum să-l folosim în exemplul nostru:

Constructor site-uri "Nubex"

Aici setăm o culoare albastră pentru cuvântul „Designer” (dimensiunea sa, implicit, este 100% din bază), o culoare verde și o dimensiune de 125% pentru cuvântul „site”, o culoare portocalie și o dimensiune de 150% pentru cuvântul „Nubex”.

Pe lângă utilizarea dimensiunilor și stilurilor standard de font (fonturi), puteți defini fonturi pentru fiecare fragment de text folosind etichete speciale. Cel mai simplu mod este să folosești așa-numitul stiluri fizice:

Pentru fiecare etichetă de stil fizic, există o etichetă de închidere corespunzătoare care dezactivează aplicarea ulterioară a stilului. De exemplu, pentru etichetă eticheta de închidere este.
Mai jos este un exemplu de program și apariția diferitelor stiluri fizice:

<НЕАD><ТIТLЕ>Stiluri fizice

<В>Îndrăzneţ
Cursive
Stresat
Barat
<ТТ>Maşină de scris
<ВХ1>cursiv aldine
<ВХ1><и>Subliniat cursiv aldine

Orez. 649. Stiluri fizice

Puteți insera o etichetă de stil fizic în interiorul unei etichete de titlu pentru a modifica întregul titlu sau doar o parte a acestuia. De exemplu, pentru a scrie cursive o parte a textului definit ca titlu, puteți utiliza următoarea construcție:

<НЕАD><ТIТLЕ>Stiluri fizice și logice

<Н2>Aceasta - modificat Antet de nivelul 2

Orez. 650. Schimbarea stilului fontului unei părți din titlu

Folosind o etichetă specială Puteți personaliza fontul pentru imaginile text: setați fontul, dimensiunea și culoarea. În primul rând, puteți seta dimensiunea fontului principal care este utilizat în document în mod implicit. eticheta fontului principal are formatul . Mărimea fontului principal poate fi setată de la 1 la 7. Dacă nu utilizați această etichetă, dimensiunea implicită a fontului principal este setată la 3.
etichetă setează dimensiunea curentă a fontului pentru fragmentele de text individuale. Această etichetă nu afectează stilurile. Gama de valori posibile este de la 1 la 7. Această etichetă vă permite, de asemenea, să controlați dimensiunea fontului curent în raport cu cel principal. Pentru a face acest lucru, utilizați simbolul + (pentru a crește) și simbolul - (pentru a micșora) dimensiunea fontului cu o anumită cantitate. De exemplu, dacă dimensiunea fontului corpului este setată la 3, atunci eticheta setează dimensiunea curentă a fontului la 5.
Pentru a seta fontul, utilizați eticheta . De exemplu:

Dacă această etichetă nu este utilizată în documentul dvs., atunci browserul va folosi fontul setat în preferințele sale. Prin urmare, textul de pe ecranul utilizatorului poate arăta complet diferit de modul în care l-ați imaginat. De asemenea, trebuie să rețineți că, dacă fontul pe care îl desemnați nu este instalat pe computerul utilizatorului, browserul va afișa textul în fontul implicit.
Puteți în etichetă indicați o listă de fonturi separate prin virgule. În acest caz, browserul va folosi primul font găsit. De exemplu, puteți scrie o etichetă:

FACE="Arial, Sans Serif, Courier">

De obicei, fonturi similare sunt specificate în listă. Se recomandă alocarea celor mai populare fonturi. Când plasați informații text pe o pagină, este mai bine să nu atribuiți deloc un nume de font, bazându-vă pe setările standard ale browserului. Dar atunci, atunci când proiectați o pagină, ar trebui să utilizați și setările standard ale browserului pentru a sincroniza percepția dvs. asupra textului cu percepția posibilă a utilizatorului. La urma urmei, nu creezi o pagină pentru tine, ci pentru cititorii tăi.
Utilizarea atributului COLOR pe o etichetă puteți seta culoarea fontului:

Argumentul atributului COLOR este o reprezentare hexazecimală a codului de culoare (componente roșii, verzi și albastre, numite componente RGB).

<НЕАD><ТIТLЕ>Următorul program demonstrează gestionarea fonturilor:

<Р>Instalarea fonturilor font Aria
<Р>ABVGDEZZHIK Font Courier
<Р>ABVGDEZZHIK Font Courier

SIMBOLUL fontului

Orez. 651. Utilizarea diferitelor fonturi Rețineți că în etichetă

puteți utiliza unele sau toate atributele sale posibile. De exemplu: În formulele matematice, precum și pentru notele de subsol, se folosesc adesea indici, care diferă de textul principal prin poziție (puțin mai mare sau mai mică) și dimensiune. Etichetele servesc acestui scop Şi

<НЕАD><Т1ТLЕ>respectiv pentru indici superiori si inferiori.Indici

<НЗ>/NEAD>
<Р>(5+x ²)^x+3

o ₁+a ₂+a ₃
<Р>Note de subsol ²

Orez. 832. Utilizarea superindicelor și a subscriptelor

Pe lângă cele discutate mai sus, există etichete suplimentare de formatare a textului:

• - selecția adreselor de e-mail, a adreselor poștale și
  numere de telefon;
• <СIТЕ> - evidențierea citatelor;
• , - inregistrarea textelor programului, constantelor simbolice;
• - introducerea textelor de la tastatură.

Ultimele trei stiluri folosesc un font monospațiat (de obicei Courier).
De exemplu, literele I și Ж dintr-un font monospațiu ocupă același spațiu. Utilizarea fonturilor monospațiu se datorează ușurinței cu care textul poate fi aliniat folosind caractere de spațiu. Să mai notăm un punct. Etichetele de control al fontului, cum ar fi etichetele de stil logic, pot include atributul TITLE= „șir”, care vă permite să atașați un sfat explicativ la textul din interiorul acestei etichete.