Spēja veidot dažādus HTML lapas aspektus ir svarīga tīmekļa dizaineru un izstrādātāju prasme. Lai veidotu HTML tīmekļa lapu stilu ar fontu krāsām un izmēriem, jums ir jāpārzina CSS. Lai atlasītu fonta lielumu, varat izmantot CSS fonta izmērs īpašums.

Ja meklējat veidu, kā mainīt HTML fonta lielumu, izmantojot CSS, mēs jums palīdzēsim. Iedziļināsimies, sākot ar ievadu CSS fonta izmērs īpašums.

Izpratne par CSS fonta izmēra rekvizītu

The fonta izmērs Īpašums CSS ir ērts, ja jāmaina HTML teksta lielums. Varat izmantot šo rekvizītu, lai mainītu katra teksta lielumu HTML lapā vai atlasītu konkrētus maināmos elementus.

Parasti ir ieteicama mērķauditorijas atlase pēc konkrētiem elementiem, jo ​​parasti nevēlaties, lai visam būtu vienāda izmēra. Tekstu, kas neievēro vizuālo hierarhiju, ir grūti skenēt un atšķirt augstāka līmeņa virsrakstus no zema līmeņa virsrakstiem.

Vienkāršāk sakot, nelietojiet ļaunprātīgi fonta izmērs īpašums. Ja vēlaties, lai virsraksts izceltos, tam ir dažādi HTML virsrakstu tagi. Apskatiet mūsu

HTML pamatinformācijas apkrāptu lapa dažādiem tagiem, atribūtiem un citiem, kā arī paskaidrojumiem.

CSS fonta izmērs Īpašumam ir divu veidu vērtības: absolūtā un relatīvā.

Absolūtā garuma vērtības (t.i. px) ir fiksēti, savukārt relatīvie (piem. em un piem) ir elastīgi. Piemēram, tādai fonta vienībai kā em, lielumu parasti nosaka vecākelementa fonta lielums. Tomēr saknes bāzes fontu relatīvās vienības, piemēram, rem ietekmē saknes elementa fonta lielums ().

Katram no tiem ir savi plusi un mīnusi, taču, lai lietas būtu koncentrētas, mēs tos šajā rakstā neapspriedīsim.

Kā mainīt HTML elementa fonta lielumu CSS

Varat mainīt HTML teksta fonta lielumu, izmantojot kādu standarta CSS sintaksi.

Vispirms norādiet atlasītāju (tekstu, kuru vēlaties modificēt) un atveriet dažas krokainas iekavas. Pēc tam ievadiet fonta izmērs rekvizītu, kam seko kols, norādiet konkrētu izmēru, kādā vēlaties attēlot HTML tekstu, un aizveriet to ar semikolu.

Lūk, sintakse:

CSS atlasītājs {
 fonta izmērs: vērtība;
}

Lai labāk izprastu koncepciju, pārskatiet šo HTML paraugplāksni, kurā ir dažas papildu koda rindiņas (virsraksts un rindkopa):

Šī ir mana pirmā virsraksts

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.

Ja vēlaties mainīt rindkopas elementa fonta lielumu, tas ir jāatlasa (izmantojot klasi, tagu vai id) un, izmantojot CSS fonta izmērs rekvizītu, iestatiet pielāgotu vērtību ar vēlamajām vienībām. Mūsu piemērā mēs izmantosim pikseļus (px).

p {
 fonta izmērs: 18 pikseļi;
}

Lai gan iekļautā CSS parasti nav ieteicama lielos projektos, varat to izmantot arī, lai mainītu HTML teksta lielumu. Veicot piezīmes no iepriekš esošā ārējā CSS koda, mēs varam ieviest to pašu, piemēram:

Šī ir mana pirmā virsraksts

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.

Teksts sadaļā lpp HTML tagam tagad būs jauns pielāgots izmērs.

Saistīts: Būtiski CSS padomi un triki, kas jāzina katram izstrādātājam

Kļūdu novēršana, mainot HTML fonta lielumu CSS

Lai gan viss teksta lieluma maiņas process CSS var šķist vienkāršs, tas ne vienmēr var izvērsties tieši tā, kā jūs to gaidāt. Ja rodas problēmas, vispirms pārbaudiet, vai saglabājāt failā veiktās izmaiņas (arī noteikti saistiet savu CSS lapu ar HTML failu). Ja izmantojāt, mēģiniet izmantot iekļauto metodi un pēc tam atsvaidziniet lapu.

Ja tas darbojas, iespējams, ir problēma ar jūsu CSS kodu. Mēģiniet izmantot !svarīgs tagu, un, ja tas darbojas, ir jābūt kādam konfliktējošam kodam. Parsējiet savu CSS kodu rindiņu pa rindiņai, lai mēģinātu uztvert šo kļūdu.

10 vienkārši CSS koda piemēri, ko varat iemācīties 10 minūtēs

Nepieciešama palīdzība darbā ar CSS? Vispirms izmēģiniet šos pamata CSS koda piemērus un pēc tam lietojiet tos savās tīmekļa lapās.

Lasiet Tālāk

Par autoru