Galimybė nustatyti skirtingus HTML puslapio aspektus yra svarbus žiniatinklio dizainerių ir kūrėjų įgūdis. Norėdami sukurti savo HTML tinklalapių stilių šriftų spalvomis ir dydžiais, turite būti susipažinę su CSS. Norėdami taikyti konkrečiai šrifto dydį, galite naudoti CSS šrifto dydis nuosavybė.

Jei ieškote būdo, kaip pakeisti HTML šrifto dydį naudojant CSS, mes jums padėsime. Pradėkime nuo CSS įvado šrifto dydis nuosavybė.

CSS šrifto dydžio ypatybės supratimas

The šrifto dydis CSS savybė yra patogi, kai reikia pakeisti HTML teksto dydį. Galite naudoti šią ypatybę norėdami pakeisti kiekvienos teksto dalies dydį HTML puslapyje arba taikyti tam tikrus elementus, kuriuos norite keisti.

Paprastai rekomenduojama taikyti pagal konkrečius elementus, nes paprastai nenorite, kad viskas būtų vienodo dydžio. Tekstą, kuris nesilaiko vaizdinės hierarchijos, sunku nuskaityti ir atskirti aukštesnio lygio antraštes nuo žemo lygio.

Paprasčiau tariant, nepiktnaudžiaukite šrifto dydis nuosavybė. Jei norite, kad antraštė išsiskirtų, tam yra skirtingos HTML antraštės žymos. Peržiūrėkite mūsų

HTML esminių dalykų lapelis skirtingoms žymoms, atributams ir kt. kartu su paaiškinimais.

CSS šrifto dydis savybė turi dviejų tipų vertes: absoliučią ir santykinę.

Absoliutaus ilgio reikšmės (t. px) yra fiksuoti, o santykiniai (pvz., em ir pvz) yra lankstūs. Pavyzdžiui, šrifto santykiniam vienetui, pvz em, dydis paprastai nustatomas pagal pirminio elemento šrifto dydį. Tačiau šakninio šrifto santykiniai vienetai mėgsta rem turi įtakos šakninio elemento šrifto dydis ().

Kiekvienas iš jų turi savo privalumų ir trūkumų, tačiau dėl to, kad viskas būtų sutelkta, šiame straipsnyje mes jų nenagrinėsime.

Kaip pakeisti HTML elemento šrifto dydį CSS

Galite pakeisti HTML teksto šrifto dydį naudodami tam tikrą standartinę CSS sintaksę.

Pirmiausia nurodykite parinkiklį (tekstą, kurį norite keisti) ir atidarykite keletą riestų skliaustų. Tada įveskite šrifto dydis ypatybę ir dvitaškį, nurodykite konkretų dydį, kuriuo norite pateikti HTML tekstą, ir uždarykite jį kabliataškiu.

Štai sintaksė:

CSS parinkiklis {
 šrifto dydis: vertė;
}

Norėdami geriau suprasti koncepciją, peržiūrėkite šią HTML šabloną, kuriame yra kelios papildomos kodo eilutės (antraštė ir pastraipa):

Tai mano pirmoji antraštė

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.

Jei norite pakeisti pastraipos elemento šrifto dydį, turite jį pasirinkti (per klasę, žymą arba ID) ir naudodami CSS šrifto dydis ypatybę, nustatykite tinkintą vertę su pageidaujamais vienetais. Mūsų pavyzdyje naudosime pikselius (px).

p {
 šrifto dydis: 18 pikselių;
}

Nors įterptinis CSS paprastai nerekomenduojamas dideliuose projektuose, taip pat galite jį naudoti norėdami pakeisti HTML teksto dydį. Atsižvelgdami į aukščiau pateiktą išorinį CSS kodą, tą patį galime įdiegti tiesioginiu būdu, pavyzdžiui:

Tai mano pirmoji antraštė

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.

Tekstas į p HTML žyma dabar turės naują tinkintą dydį.

Susijęs: Pagrindiniai CSS patarimai ir gudrybės, kurias turėtų žinoti kiekvienas kūrėjas

Trikčių šalinimas keičiant HTML šrifto dydį CSS

Nors visas teksto dydžio keitimo CSS sistemoje procesas gali atrodyti lengvas, jis ne visada gali vykti tiksliai taip, kaip tikitės. Jei kyla problemų, pirmiausia patikrinkite, ar išsaugojote failo pakeitimus (taip pat būtinai susiekite CSS lapą su HTML failu). Jei tai padarėte, pabandykite naudoti tiesioginį metodą, tada atnaujinkite puslapį.

Jei tai veikia, gali kilti problemų dėl jūsų CSS kodo. Pabandykite naudoti !svarbu ir jei ji veikia, turi būti koks nors nesuderinamas kodas. Išanalizuokite savo CSS kodą eilutę po eilutės, kad pabandytumėte pastebėti šią klaidą.

10 paprastų CSS kodų pavyzdžių, kuriuos galite išmokti per 10 minučių

Reikia pagalbos naudojant CSS? Išbandykite šiuos pagrindinius CSS kodo pavyzdžius, tada pritaikykite juos savo tinklalapiams.

Skaitykite toliau

Apie autorių