A HTML-oldal különböző aspektusainak stílusa a webes tervezők és fejlesztők számára fontos készség. Ahhoz, hogy HTML-weblapjait betűtípusokkal és -méretekkel alakíthassa ki, ismernie kell a CSS-t. A betűméret konkrét célzásához használhatja a CSS-t betűméret ingatlan.

Ha módot keres a HTML-betűméret megváltoztatására CSS használatával, akkor mi megtaláljuk. Kezdjük a CSS bevezetésével betűméret ingatlan.

A CSS betűméret-tulajdonság megértése

A betűméret tulajdonság a CSS-ben hasznos, ha módosítani kell a HTML szöveg méretét. Ezzel a tulajdonsággal módosíthatja a HTML-oldalon lévő minden szövegrész méretét, vagy megcélozhat bizonyos módosítandó elemeket.

Általában bizonyos elemek célzása javasolt, mivel általában nem szeretné, hogy minden egyforma méretű legyen. A vizuális hierarchiát nem követő szöveget nehéz átvizsgálni, és nehéz megkülönböztetni a magasabb szintű címsorokat az alacsony szintűektől.

Egyszerűbben fogalmazva, ne élj vissza a betűméret ingatlan. Ha azt szeretné, hogy egy címsor kitűnjön, különböző HTML-címke-címkék vannak erre. Nézze meg a mi

HTML alapismeretek csalólap a különböző címkék, attribútumok és egyebek számára a magyarázatokkal együtt.

A CSS betűméret A tulajdonság kétféle értéket vesz fel: abszolút és relatív.

Abszolút hosszúság értékek (pl. px) rögzítettek, míg a relatívak (pl. em és volt) rugalmasak. Például egy betűtípus-relatív egységhez, mint pl em, a méretet általában a szülőelem betűmérete határozza meg. A gyökér alapú font-relatív egységek azonban szeretik rem befolyásolja a gyökérelem betűmérete ().

Mindegyiknek megvannak a maga előnyei és hátrányai, de ebben a cikkben nem foglalkozunk velük.

Hogyan lehet megváltoztatni egy HTML-elem betűméretét a CSS-ben

A HTML-szöveg betűméretét valamilyen szabványos CSS-szintaxis használatával módosíthatja.

Először adja meg a választót (a módosítani kívánt szöveget), és nyisson meg néhány kapcsos zárójelet. Ezután írja be a betűméret tulajdonságot kettőspont követi, adja meg a HTML-szöveg megjelenítési méretét, és zárja le pontosvesszővel.

Íme a szintaxis:

CSS választó {
 font-size: érték;
}

A koncepció jobb megértéséhez tekintse át a következő HTML-mintát, amely néhány további kódsort (egy címsort és egy bekezdést) tartalmaz:

Ez az első rovatom

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.

Ha módosítani szeretné a bekezdéselem betűméretét, ki kell választania (osztályon, címkén vagy azonosítón keresztül) és a CSS segítségével betűméret tulajdonságot, állítson be egyéni értéket a kívánt mértékegységekkel. Példánkban pixeleket (px).

p {
 betűméret: 18 képpont;
}

Bár a beágyazott CSS általában nem javasolt nagy projektekben, a HTML szöveg méretének módosítására is használhatja. A fenti külső CSS-kódból jegyzeteket készítve ugyanazt a dolgot inline valósíthatjuk meg, így:

Ez az első rovatom

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.

Szöveg a p A HTML-címke mostantól új egyéni méretű lesz.

Összefüggő: Alapvető CSS-tippek és trükkök, amelyeket minden fejlesztőnek tudnia kell

Hibaelhárítás a HTML-betűméret megváltoztatásakor a CSS-ben

Bár a szövegméret módosításának teljes folyamata a CSS-ben egyszerűnek tűnhet, előfordulhat, hogy nem mindig úgy sül el, ahogyan elvárná. Ha problémákat tapasztal, először ellenőrizze, hogy mentette-e a módosításokat a fájlban (a CSS-lapot is feltétlenül kapcsolja össze a HTML-fájllal). Ha igen, próbálja meg a soron belüli módszert használni, majd frissítse az oldalt.

Ha működik, akkor a CSS-kóddal lehet probléma. Próbáld meg használni a !fontos címkét, és ha működik, akkor valami ütköző kódnak kell lennie. Elemezze soronként a CSS-kódot, hogy megpróbálja elkapni a hibát.

10 egyszerű CSS-kód példa, amelyet 10 perc alatt megtanulhat

Segítségre van szüksége CSS munkájában? Kezdésként próbálkozzon ezekkel az alapvető CSS-kód példákkal, majd alkalmazza őket saját weboldalain.

Olvassa el a következőt

A szerzőről