Mogućnost stiliziranja različitih aspekata vaše HTML stranice važna je vještina za web dizajnere i programere. Da biste svoje HTML web stranice stilizirali bojama i veličinama fonta, morate biti upoznati s CSS-om. Da biste specifično ciljali veličinu fonta, možete koristiti CSS veličina fonta imovine.

Ako tražite način da promijenite veličinu HTML fonta pomoću CSS-a, imamo vas za to. Zaronimo počevši s uvodom u CSS veličina fonta imovine.

Razumijevanje svojstva CSS veličine fonta

The veličina fonta svojstvo u CSS-u je zgodno kada trebate promijeniti veličinu HTML teksta. Ovo svojstvo možete koristiti za promjenu veličine svakog dijela teksta na HTML stranici ili ciljanje određenih elemenata za promjenu.

Obično se preporučuje ciljanje određenih elemenata jer obično ne želite da sve ima istu veličinu. Tekst koji ne slijedi vizualnu hijerarhiju teško je pregledati i razlikovati naslove više razine od onih na nižoj razini.

Jednostavnije rečeno, nemojte zloupotrijebiti veličina fonta imovine. Ako želite da se naslov ističe, za to postoje različite HTML oznake naslova. Provjerite naše

HTML osnove cheat sheet za različite oznake, atribute i još mnogo toga zajedno s objašnjenjima.

CSS veličina fonta svojstvo poprima dvije vrste vrijednosti: apsolutne i relativne.

Vrijednosti apsolutne duljine (tj. px) su fiksni dok su relativni (npr. em i pr) su fleksibilni. Na primjer, za jedinicu koja se odnosi na font kao što je em, veličina je obično određena veličinom fonta roditeljskog elementa. Međutim, jedinice koje se odnose na fontove temeljene na korijenu poput rem na njih utječe veličina fonta korijenskog elementa ().

Svaki od njih ima svoje prednosti i nedostatke, ali u biti fokusiranja na stvari, nećemo o njima raspravljati u ovom članku.

Kako promijeniti veličinu fonta HTML elementa u CSS-u

Možete promijeniti veličinu fonta HTML teksta korištenjem neke standardne CSS sintakse.

Najprije navedite selektor (tekst koji želite izmijeniti) i otvorite vitičaste zagrade. Zatim unesite veličina fonta svojstvo nakon kojeg slijedi dvotočka, navedite određenu veličinu u kojoj želite da se prikaže vaš HTML tekst i zatvorite ga točkom i zarezom.

Evo sintakse:

CSS selektor {
 veličina fonta: vrijednost;
}

Da biste bolje razumjeli koncept, pregledajte sljedeći HTML šablon koji ima nekoliko dodatnih redaka koda (naslov i odlomak):

Ovo je moj prvi naslov

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.

Ako želite promijeniti veličinu fonta elementa odlomka, morate ga odabrati (putem klase, oznake ili id-a) i pomoću CSS-a veličina fonta svojstvo, postavite prilagođenu vrijednost s vašim željenim jedinicama. U našem primjeru koristit ćemo piksele (px).

p {
 veličina fonta: 18px;
}

Iako se inline CSS općenito ne preporučuje u velikim projektima, možete ga koristiti i za promjenu veličine HTML teksta. Uzimajući bilješke iz vanjskog CSS koda iznad, možemo implementirati istu stvar inline na sljedeći način:

Ovo je moj prvi naslov

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.

Tekst u str HTML oznaka sada će imati novu prilagođenu veličinu.

Povezano: Osnovni CSS savjeti i trikovi koje bi svaki programer trebao znati

Rješavanje problema s pogreškama pri promjeni veličine HTML fonta u CSS-u

Iako se cijeli proces promjene veličine teksta u CSS-u može činiti lakim, možda neće uvijek biti točno onako kako očekujete. Ako naiđete na probleme, počnite tako da provjerite jeste li spremili promjene u svoju datoteku (također, provjerite jeste li povezali svoj CSS list sa svojom HTML datotekom). Ako jeste, pokušajte upotrijebiti inline metodu, a zatim osvježite stranicu.

Ako radi, možda postoji problem s vašim CSS kodom. Pokušajte koristiti !važno tag, a ako radi, mora postojati neki konfliktni kod. Analizirajte svoj CSS kod red po red kako biste pokušali uhvatiti tu pogrešku.

10 jednostavnih primjera CSS koda koje možete naučiti za 10 minuta

Trebate pomoć s CSS-om? Za početak isprobajte ove osnovne primjere CSS koda, a zatim ih primijenite na svoje web stranice.

Pročitajte dalje

O autoru