HTML-sivusi eri osien tyylin muuttaminen on tärkeä taito verkkosuunnittelijoille ja -kehittäjille. Jotta voit muotoilla HTML-sivujesi kirjasinväreillä ja -kooilla, sinun on tunnettava CSS. Jos haluat kohdistaa erityisesti kirjasinkoon, voit käyttää CSS: ää Fonttikoko omaisuutta.

Jos etsit tapaa muuttaa HTML-kirjasinkokoa CSS: n avulla, meillä on sinun. Sukellaan aloittamalla CSS: n esittely Fonttikoko omaisuutta.

CSS-kirjasinkoon ominaisuuden ymmärtäminen

The Fonttikoko Ominaisuus CSS: ssä on kätevä, kun haluat muuttaa HTML-tekstin kokoa. Voit käyttää tätä ominaisuutta muuttaaksesi jokaisen tekstin kokoa HTML-sivulla tai kohdistaa tiettyihin muutettaviin elementteihin.

Tiettyihin elementteihin kohdistaminen on yleensä suositeltavaa, koska et yleensä halua kaikkien olevan samankokoisia. Tekstiä, joka ei noudata visuaalista hierarkiaa, on vaikea selata läpi ja erottaa korkeamman tason otsikot matalan tason otsikoista.

Yksinkertaisesti sanottuna, älä käytä väärin Fonttikoko omaisuutta. Jos haluat otsikon erottuvan joukosta, sitä varten on olemassa erilaisia ​​HTML-otsikkotunnisteita. Tutustu meidän

HTML Essentials -huijauslehti erilaisille tunnisteille, attribuuteille ja muille sekä selitykset.

CSS Fonttikoko ominaisuus saa kahdenlaisia ​​arvoja: absoluuttisia ja suhteellisia.

Absoluuttiset pituusarvot (esim. px) ovat kiinteitä, kun taas suhteelliset (esim. em ja esim) ovat joustavia. Esimerkiksi fontin suhteelliselle yksikölle, kuten em, koko määräytyy yleensä pääelementin kirjasinkoon mukaan. Kuitenkin juuripohjaiset fontin suhteelliset yksiköt pitävät rem juurielementin kirjasinkoko vaikuttaa niihin ().

Jokaisella on hyvät ja huonot puolensa, mutta asioiden keskittymisen vuoksi emme käsittele niitä tässä artikkelissa.

Kuinka muuttaa HTML-elementin kirjasinkokoa CSS: ssä

Voit muuttaa HTML-tekstin fonttikokoa käyttämällä jotakin tavallista CSS-syntaksia.

Määritä ensin valitsin (teksti, jota haluat muokata) ja avaa kiharat aaltosulkeet. Kirjoita seuraavaksi Fonttikoko ominaisuus ja kaksoispiste, määritä tietty koko, jossa haluat HTML-tekstisi näkyvän, ja sulje se puolipisteellä.

Tässä on syntaksi:

CSS-valitsin {
 font-size: arvo;
}

Saadaksesi paremman käsityksen konseptista, tutustu seuraavaan HTML-pohjaiseen malliin, jossa on muutama lisäkoodirivi (otsikko ja kappale):

Tämä on ensimmäinen otsikoni

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.

Jos haluat muuttaa kappaleelementin kirjasinkokoa, sinun on valittava se (luokan, tunnisteen tai tunnuksen kautta) ja CSS: n avulla Fonttikoko omaisuutta, aseta mukautettu arvo haluamillasi yksiköillä. Esimerkissämme käytämme pikseleitä (px).

p {
 fonttikoko: 18px;
}

Vaikka upotettua CSS: ää ei yleensä suositella suurissa projekteissa, voit käyttää sitä myös HTML-tekstin koon muuttamiseen. Ottaen muistiinpanoja yllä olevasta ulkoisesta CSS-koodista, voimme toteuttaa saman asian tekstissä seuraavasti:

Tämä on ensimmäinen otsikoni

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.

Tekstiä p HTML-tunniste saa nyt uuden mukautetun koon.

Aiheeseen liittyvä: Tärkeitä CSS-vinkkejä ja temppuja, jotka jokaisen kehittäjän tulisi tietää

Virheiden vianetsintä, kun HTML-fonttikokoa muutetaan CSS: ssä

Vaikka koko tekstin koon muuttaminen CSS: ssä saattaa tuntua helpolta, se ei välttämättä aina suju juuri niin kuin odotat. Jos kohtaat ongelmia, aloita tarkistamalla, oletko tallentanut tiedostosi muutokset (varmista myös, että linkität CSS-sivusi HTML-tiedostoosi). Jos kokeilit, kokeile upotettua menetelmää ja päivitä sitten sivu.

Jos se toimii, CSS-koodissasi saattaa olla ongelma. Kokeile käyttää !tärkeä -tunniste, ja jos se toimii, siinä täytyy olla jokin ristiriitainen koodi. Jäsennä CSS-koodisi rivi riviltä yrittääksesi havaita virheen.

10 yksinkertaista CSS-koodiesimerkkiä, jotka voit oppia 10 minuutissa

Tarvitsetko apua taidon CSS kanssa? Kokeile näitä CSS-koodin perusesimerkkejä aluksi ja käytä niitä sitten omilla verkkosivuillasi.

Lue Seuraava

Kirjailijasta