Capacitatea de a stila diferite aspecte ale paginii dvs. HTML este o abilitate importantă pentru designerii și dezvoltatorii web. Pentru a vă stila paginile web HTML cu culori și dimensiuni ale fonturilor, va trebui să fiți familiarizat cu CSS. Pentru a viza în mod specific dimensiunea fontului, puteți utiliza CSS marimea fontului proprietate.

Dacă sunteți în căutarea unei modalități de a schimba dimensiunea fontului HTML folosind CSS, vă oferim acoperire. Să începem cu o introducere în CSS marimea fontului proprietate.

Înțelegerea proprietății CSS font-size

The marimea fontului proprietatea în CSS este la îndemână atunci când trebuie să modificați dimensiunea textului HTML. Puteți folosi această proprietate pentru a modifica dimensiunea fiecărei părți de text dintr-o pagină HTML sau pentru a viza anumite elemente de modificat.

Direcționarea anumitor elemente este de obicei recomandată, deoarece de obicei nu doriți ca totul să aibă aceeași dimensiune. Textul care nu urmează o ierarhie vizuală este greu de scanat și de diferențiat titlurile de nivel superior de cele de nivel scăzut.

În termeni mai simpli, nu abuzați de marimea fontului proprietate. Dacă doriți ca un titlu să iasă în evidență, există diferite etichete de titlu HTML pentru asta. Consultați-ne Cheat sheet pentru elementele esențiale HTML pentru diferite etichete, atribute și multe altele, împreună cu explicații.

CSS-ul marimea fontului proprietatea ia doua tipuri de valori: absolute si relative.

Valori absolute ale lungimii (de ex. px) sunt fixe în timp ce cele relative (de ex. ei și ex) sunt flexibile. De exemplu, pentru o unitate legată de font, cum ar fi ei, dimensiunea este de obicei determinată de dimensiunea fontului elementului părinte. Cu toate acestea, unități legate de font bazate pe rădăcină, cum ar fi rem sunt influențate de dimensiunea fontului elementului rădăcină ().

Fiecare are avantajele și dezavantajele sale, dar în esența menținerii lucrurilor concentrate, nu le vom discuta în acest articol.

Cum se schimbă dimensiunea fontului unui element HTML în CSS

Puteți modifica dimensiunea fontului textului HTML utilizând o sintaxă CSS standard.

Mai întâi, specificați selectorul (textul pe care doriți să îl modificați) și deschideți câteva acolade. Apoi, introduceți marimea fontului proprietate urmată de două puncte, specificați dimensiunea specifică în care doriți să fie prezentat textul dvs. HTML și închideți-o cu punct și virgulă.

Iată sintaxa:

selector CSS {
 dimensiunea fontului: valoare;
}

Pentru a înțelege mai bine conceptul, examinați următorul boilerplate HTML care are câteva rânduri suplimentare de cod (un titlu și un paragraf):

Acesta este primul meu titlu

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dacă doriți să modificați dimensiunea fontului elementului paragraf, trebuie să îl selectați (prin o clasă, o etichetă sau un id) și, folosind CSS marimea fontului proprietate, setați o valoare personalizată cu unitățile preferate. În exemplul nostru, vom folosi pixeli (px).

p {
 dimensiunea fontului: 18px;
}

Deși CSS inline nu este, în general, recomandat în proiecte mari, îl puteți folosi și pentru a modifica dimensiunea textului HTML. Luând notițe din codul CSS extern de mai sus, putem implementa același lucru în linie astfel:

Acesta este primul meu titlu

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text în p Eticheta HTML va avea acum o nouă dimensiune personalizată.

Legate de: Sfaturi și trucuri esențiale CSS pe care fiecare dezvoltator ar trebui să le cunoască

Depanarea erorilor la modificarea dimensiunii fontului HTML în CSS

Deși întregul proces de modificare a dimensiunii textului în CSS poate părea ușor, este posibil să nu se desfășoare întotdeauna exact așa cum vă așteptați. Dacă întâmpinați probleme, începeți prin a verifica dacă ați salvat modificările în fișierul dvs. (de asemenea, asigurați-vă că conectați foaia CSS la fișierul HTML). Dacă ați făcut-o, încercați să utilizați metoda inline, apoi reîmprospătați pagina.

Dacă funcționează, este posibil să existe o problemă cu codul dvs. CSS. Încercați să utilizați !important etichetă și, dacă funcționează, trebuie să existe un cod conflictual. Analizați codul CSS linie cu linie pentru a încerca să detectați acea eroare.

10 exemple simple de coduri CSS pe care le puteți învăța în 10 minute

Ai nevoie de ajutor cu CSS? Încercați aceste exemple de cod CSS de bază pentru început, apoi aplicați-le pe propriile pagini web.

Citiți în continuare

Despre autor