Kuinka muuttaa sivuston fonttikuvia CSS: llä

Hyvä typografinen muotoilu on tärkeä osa onnistunutta verkkosivustoa. CSS: llä voit hallita web-sivujen tekstin ulkonäköä verkkosivustosi avulla. Tämä sisältää mahdollisuuden vaihtaa minkä tahansa käyttämiesi kirjasinten väriä.

Fontin värejä voidaan muuttaa käyttämällä ulkoista tyyliarkkia , sisäistä tyyliarkkia tai sitä voidaan muuttaa käyttämällä inline-muotoa HTML-asiakirjassa. Parhaat käytännöt edellyttävät, että käytät CSS-tyylien ulkoista tyyliarkkia. Sisäinen tyyliarkki, joka on suoraan asiakirjan "päähän" kirjoitettuja tyylejä, käytetään yleensä vain pienille, yhden sivun sivustoille. Inline-tyyliä on vältettävä, koska ne ovat samankaltaisia ​​kuin vanhat "font" -tunnisteet, joita käsiteltiin monien vuosien ajan. Nämä inline-tyylit tekevät fontin tyylistä erittäin vaikeaksi, koska sinun tarvitsee muuttaa niitä kaikissa inline-tyylissä.

Tässä artikkelissa opit fontin värin muuttamiseen käyttämällä ulkoista tyyliarkkia ja tyyliä, jota käytetään kappaleen tunnisteessa. Voit käyttää samaa tyyliominaisuutta muuttamaan tekstin ympärillä olevia merkkejä, kuten -tunnistetta.

Muuta fontin väriä muokkaamalla tyylejä

Tässä esimerkissä sinun on oltava HTML-asiakirja sivullesi ja erillinen CSS-tiedosto, joka on liitetty tähän asiakirjaan. HTML-dokumentti tekisi todennäköisesti useita elementtejä siinä. Se, mitä olemme kiinnostuneita tämän artikkelin tarkoituksesta, on kohta-elementti.

Tässä on ohjeet vaihtaa tekstin fontin värin otsikkotunnisteita käyttämällä ulkoista tyyliarkkia.

Väriarvot voidaan ilmaista värinä avainsanoina, RGB-värinumerona tai heksadesimaalisena värinumerona.

1. Lisää tyylin attribuutti kohdetunnisteelle:
   1. p {}
2. Aseta väriominaisuus tyyliin. Aseta kaksoispiste tämän ominaisuuden jälkeen:
   1. p {väri:}
3. Lisää sitten väriarvo kiinteistön jälkeen. Varmista lopettaa tämä arvo puolipisteellä:
   1. p {väri: musta;}

Sivusi kappaleet ovat nyt mustia.

Tässä esimerkissä käytetään väripainiketta - "musta". Tämä on yksi tapa lisätä väri CSS: ään, mutta se on hyvin rajoittava. Avainsanoja "musta" ja "valkoinen" varten on yksinkertaista, koska nämä kaksi väriä ovat hyvin tarkkoja, mutta mitä tapahtuu, jos käytät avainsanoja kuten "punainen", "sininen" tai "vihreä"? Mitä punaista, sinistä tai vihreää sävyä saat? Et voi määrittää täsmälleen mitä värisävyä haluat avainsanoilla. Siksi heksadesimaaliarvot käytetään usein väripainikkeiden sijaan.

p {väri: # 000000; }

Tämä CSS-tyyli myös asetti kappaleiden värin mustaksi, koska # 000000: n hex-koodi on musta. Voit jopa käyttää shorthandia kyseisellä heksadesimaalilla ja kirjoittaa sen vain # 000 ja saat saman.

Kuten jo mainitsimme, hex-arvot toimivat hyvin, kun tarvitset väriä, joka ei ole vain musta tai valkoinen. Tässä on esimerkki:

p {väri: # 2f5687; }

Tämä heksadesimaali määrittää kappaleet siniseksi, mutta toisin kuin avainsana "sininen", tämä heksadesimaalikoodi antaa sinulle mahdollisuuden asettaa hyvin erityinen sinisen sävy - todennäköisesti se, jonka suunnittelija valitsee, kun he luottivat käyttöliittymän tämä verkkosivusto. Tässä tapauksessa väri olisi puoliväli, liuskekivi-sininen.

Lopuksi voit käyttää RGBA-väriarvoja myös fontin väreille. RGCA: ta tuetaan nyt kaikissa moderneissa selaimissa, joten voit käyttää näitä arvoja vain vähän huolta siitä, että sitä ei tueta verkkoselaimessa, mutta voit myös asettaa helposti varatun.

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

Tämä RGBA-arvo on sama kuin aiemmin määritetty liuskekiven sininen väri. Ensimmäiset kolme arvoa asettavat punaiset, vihreät ja siniset arvot ja lopullinen numero on alfa-asetus. Se on asetettu "1", mikä tarkoittaa "100%", joten tällä värillä ei olisi läpinäkyvyyttä. Jos asetit sen desimaalilukuun, kuten .85, se kääntyisi 85%: n läpikuultavuuteen ja väri olisi hieman läpinäkyvä.

Jos haluat luodinkestäviksi väriarvosi, tekisit tämän:

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

Tämä syntaksi asettaa ensin hex-koodin. Sitten se korvaa arvon RGBA-numerolla. Tämä tarkoittaa sitä, että vanhempi selain, joka ei tue RGBA: ta, saisi ensimmäisen arvon ja jättää toisen huomiotta. Nykyaikaiset selaimet käyttäisivät toista CSS-kaskadia kohti.