Kuinka muuttaa verkkosivuston kirjasimen värejä CSS: n avulla

click fraud protection

Mitä tietää

  • Väri avainsana: Kirjoita HTML-tiedostoon p {väri: musta;} muuttaa jokaisen kappaleen väriä missä musta tarkoittaa valitsemaasi väriä.
  • Heksadesimaali: Kirjoita HTML-tiedostoon p {väri: # 000000;} vaihtaa väriä, missä 000000 viittaa valitsemaasi heksadesimaaliarvoon.
  • RGBA: Kirjoita HTML-tiedostoon p {väri: rgba (47,86,135,1);} vaihtaa väriä, missä 47,86,135,1 viittaa valitsemaasi RGBA-arvoon.

CSS antaa sinun hallita tekstin ulkoasua rakentamillasi ja hallinnoimillasi verkkosivuilla. Tässä oppaassa näytetään, kuinka voit muuttaa kirjasimen värejä CSS: ssä käyttämällä väriavaimia, heksadesimaalisia värikoodeja tai RGB-värinumeroita.

Kuinka käyttää CSS-tyylejä fontin värin muuttamiseen

Väriarvot voidaan ilmaista väriavainsanoina, heksadesimaaleina värinumeroina tai RGB-värinumeroina. Tätä oppituntia varten sinulla on oltava HTML-asiakirja, jotta näet CSS-muutokset ja a erillinen CSS-tiedosto, joka on liitetty kyseiseen asiakirjaan. Tarkastelemme erityisesti kappaletta.

Vaihda kirjasimen värejä väriavainsanojen avulla

instagram viewer

Voit muuttaa HTML-tiedostosi jokaisen kappaleen tekstin väriä siirtymällä ulkoiseen tyylitaulukkoon ja kirjoittamalla p {}. Aseta väri- kiinteistö tyyliin, jota seuraa kaksoispiste, kuten p {väri:}. Lisää sitten väriarvosi ominaisuuden jälkeen ja lopeta se puolipisteellä. Tässä esimerkissä kappaleteksti muutetaan mustaksi:

p {
väri musta;
}
Kuva henkilöstä, joka käyttää CSS: ää muuttaakseen verkkosivuston värejä
Ashley Nicole DeLeon / Lifewire

Käytä heksadesimaaliarvoja vaihtaaksesi kirjasimen värejä

Väriavainsanojen käyttäminen tekstin muuttamiseksi punaiseksi, vihreäksi, siniseksi tai muuksi perusväriksi ei anna sinulle tarkkuutta, jota etsit luodessasi näiden värien eri sävyjä. Tätä varten heksadesimaaliarvot ovat.

Tätä CSS-tyyliä voidaan käyttää värittämään kappaleesi mustaksi, koska heksakoodi # 000000 tarkoittaa mustaa. Voit jopa käyttää lyhennettä tällä heksadesimaaliarvolla ja kirjoittaa sen numeroksi # 000 samoilla tuloksilla.

p {
väri: # 000000;
}

Hex-arvot toimivat hyvin, kun tarvitset väriä, joka ei ole vain musta tai valkoinen. Esimerkiksi tämä heksakoodi antaa sinulle mahdollisuuden asettaa hyvin tarkka sininen sävy - keskitason, liuskekaltainen sininen:

p {
väri: # 2f5687;
}

Hex toimii asettamalla värin RGB-arvot (punainen, vihreä, sininen) erikseen 16 perusarvolla. Siksi ne sisältävät kirjaimet A kautta F numeroiden lisäksi 0 kautta 9.

Jokainen väri, punainen, vihreä ja sininen, saa oman kaksinumeroisen arvonsa. 00 on pienin mahdollinen arvo, kun taas FF on korkein. Värit on lueteltu RGB-järjestyksessä kuusikulmiona, joten kaksi ensimmäistä numeroa edustavat punaista arvoa ja niin edelleen.

Käytä RGBA-väriarvoja vaihtaaksesi kirjasimen värejä

Lopuksi voit käyttää RGBA-väriarvoja fonttien värien muokkaamiseen. RGCA: ta tuetaan kaikissa nykyaikaisissa selaimissa, joten voit käyttää näitä arvoja luottavaisin mielin, että se toimii useimmille katsojille, mutta voit myös asettaa helpon varavoiman.

Tämä RGBA-arvo on sama kuin edellä määritelty liuskekiven sininen väri:

p {
väri: rgba (47,86,135,1);
}

Kolme ensimmäistä arvoa asettavat punaisen, vihreän ja sinisen arvon, ja lopullinen numero on läpinäkyvyyden alfa-asetus. Alfa-asetuksena on 1, mikä tarkoittaa 100 prosenttia, joten tällä värillä ei ole läpinäkyvyyttä. Jos asetat kyseisen arvon desimaalilukuun, kuten .85, se tarkoittaa 85 prosentin peittävyyttä ja väri olisi hieman läpinäkyvä.

Jos haluat luodata väriarvosi luodinkestäväksi, kopioi tämä CSS-koodi:

p {
väri: # 2f5687;
väri: rgba (47,86,135,1);
}

Tämä syntaksi asettaa ensin heksakoodin ja korvaa sen jälkeen arvon RGBA-numerolla. Tämä tarkoittaa, että kaikki vanhemmat selaimet, jotka eivät tue RGBA: ta, saavat ensimmäisen arvon ja jättävät toisen huomiotta.

On tärkeää pitää mielessä, että väriominaisuus toimii kaikilla CSS: n HTML-tekstielementeillä. Voit esimerkiksi muuttaa kaikkia linkkien värejä. Tämä esimerkki tekee linkeistä kirkkaan vihreät:

a {
väri: # 16c616;
}

Tämä toimii myös useiden elementtien kanssa kerralla. Voit asettaa kaikki otsikkotasot samanaikaisesti. Esimerkiksi tämä asettaa kaikki otsikkoelementit keskiyön siniseksi:

h1, h2, h3, h4, h5, h6 {
väri: # 020833;
}

Värisi hex- tai RGBA-arvojen keksiminen ei ole aina helppoa. Useimmat verkkosuunnittelijat käyttävät kuvankäsittelyohjelmaa, kuten Photoshop tai GIMP, tarkan koodin luomiseen. Löydät myös käteviä värinvalintatyökaluja, kuten tämä w3kouluista.

Muita tapoja muotoilla HTML-sivu

Kirjasimen värejä voidaan muuttaa ulkoisella tyylisivulla, sisäisellä tyylitaulukolla tai sisäisellä tyylillä HTML-asiakirjassa. Parhaiden käytäntöjen mukaan sinun on kuitenkin käytettävä ulkoista tyylitaulukkoa CSS-tyyleihisi.

Sisäistä tyylitaulukkoa, joka on suoraan asiakirjan "päähän" kirjoitettuja tyylejä, käytetään yleensä vain pienissä, yhden sivun verkkosivustoissa. Sisäisiä tyylejä tulisi välttää, koska ne muistuttavat vanhoja "fontti" -tageja, joita käsittelemme monta vuotta sitten. Nämä inline-tyylit tekevät kirjasintyylin hallinnan erittäin vaikeaksi, koska sinun on muutettava niitä jokaisessa inline-tyylin esiintymässä.

instagram story viewer