Võimalus kujundada oma HTML-lehe erinevaid aspekte on veebidisainerite ja -arendajate jaoks oluline oskus. HTML-i veebilehtede fondivärvide ja -suuruste stiilide kujundamiseks peate tundma CSS-i. Konkreetselt fondi suuruse sihtimiseks võite kasutada CSS-i fondi suurus vara.

Kui otsite võimalust muuta HTML-i fondi suurust CSS-i abil, siis oleme teiega kaetud. Sukeldume sisse, alustades CSS-i tutvustusega fondi suurus vara.

CSS-i fondi suuruse atribuudi mõistmine

The fondi suurus atribuut CSS-is on mugav, kui peate muutma HTML-teksti suurust. Seda atribuuti saate kasutada HTML-lehel iga tekstiosa suuruse muutmiseks või konkreetsete muudetavate elementide sihtimiseks.

Tavaliselt on soovitatav sihtida konkreetseid elemente, kuna tavaliselt ei soovi te, et kõik oleksid sama suurusega. Teksti, mis ei järgi visuaalset hierarhiat, on raske läbi vaadata ja eristada kõrgema taseme pealkirju madala tasemega pealkirjadest.

Lihtsamalt öeldes ärge kuritarvitage fondi suurus vara. Kui soovite, et pealkiri paistaks silma, on selle jaoks erinevad HTML-i pealkirjasildid. Vaadake meie

HTML põhiteadmiste petuleht erinevate siltide, atribuutide ja muu jaoks koos selgitustega.

CSS fondi suurus omadusel on kahte tüüpi väärtusi: absoluutne ja suhteline.

Absoluutpikkuse väärtused (st. px) on fikseeritud, samas kui suhtelised (nt. em ja nt) on paindlikud. Näiteks fondi suhtelise ühiku jaoks nagu em, määrab suuruse tavaliselt põhielemendi fondi suurus. Kuid juurpõhised fondi suhtelised üksused nagu rem on mõjutatud juurelemendi fondi suurusest ().

Igal neist on oma plussid ja miinused, kuid asjadele keskendumise eesmärgil me neid selles artiklis ei käsitle.

Kuidas muuta HTML-i elemendi fondi suurust CSS-is

HTML-teksti fondi suurust saate muuta standardse CSS-i süntaksi abil.

Esmalt määrake valija (tekst, mida soovite muuta) ja avage mõned lokkis sulud. Järgmisena sisestage fondi suurus atribuudile, millele järgneb koolon, määrake konkreetne suurus, milles soovite oma HTML-teksti esitada, ja sulgege see semikooloniga.

Siin on süntaks:

CSS-i valija {
 fondi suurus: väärtus;
}

Kontseptsiooni paremaks mõistmiseks vaadake üle järgmine HTML-i standardplaat, millel on paar täiendavat koodirida (pealkiri ja lõik):

See on minu esimene rubriik

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.

Kui soovite muuta lõigu elemendi fondi suurust, peate selle valima (klassi, sildi või ID kaudu) ja kasutades CSS-i fondi suurus atribuut, määrake oma eelistatud ühikutega kohandatud väärtus. Meie näites kasutame piksleid (px).

p {
 fondi suurus: 18 pikslit;
}

Kuigi sisemist CSS-i suurte projektide puhul üldiselt ei soovitata, saate seda kasutada ka HTML-teksti suuruse muutmiseks. Võttes märkmeid ülaltoodud välisest CSS-koodist, saame sama asja rakendada järgmiselt:

See on minu esimene rubriik

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 jaotises lk HTML-i märgendil on nüüd uus kohandatud suurus.

Seotud: Olulised CSS-i näpunäited ja nipid, mida iga arendaja peaks teadma

CSS-i HTML-i fondi suuruse muutmisel tekkivate vigade tõrkeotsing

Kuigi kogu tekstisuuruse muutmise protsess CSS-is võib tunduda lihtne, ei pruugi see alati täpselt ootuspäraselt kulgeda. Kui teil on probleeme, kontrollige kõigepealt, kas salvestasite faili muudatused (samuti veenduge, et lingite oma CSS-lehe HTML-failiga). Kui tegite, proovige kasutada tekstisisest meetodit ja seejärel värskendage lehte.

Kui see töötab, võib probleem olla teie CSS-koodiga. Proovige kasutada !tähtis ja kui see töötab, peab seal olema vastuoluline kood. Selle vea tuvastamiseks sõeluge oma CSS-koodi rida rea ​​haaval.

10 lihtsat CSS-koodi näidet, mida saate 10 minutiga õppida

Vajad abi seoses CSS-iga? Alustuseks proovige neid põhilisi CSS-koodi näiteid ja seejärel rakendage neid oma veebilehtedele.

Loe edasi

Autori kohta