Kuinka muuttaa verkkosivustosi tekstin väriä CSS: n avulla

Verkkosivustosi hallinta on tärkeä osa web -suunnittelua. Ihanteellisessa maailmassa sinun pitäisi pystyä muuttamaan kaikkia sivustosi suunnittelun osa -alueita ilman, että joudut tinkimään lopputuotteesta.

Tietenkin verkkosivustot voivat usein olla itsepäisiä. Aina ei ole mahdollista saavuttaa haluamiasi tuloksia syventymättä CSS -maailmaan. Katsotaanpa, kuinka voit muuttaa tekstin väriä CSS: llä verkkosivustollasi, jotta saat käsityksen siitä, kuinka voit saavuttaa enemmän CSS: n avulla.

Verkkosivuston tekstin värin muuttaminen CSS: llä

CSS on suunniteltu huolellisesti sen varmistamiseksi, että se antaa suunnittelijoille vallan verkkosivustoprojekteissaan. Tekstin värin vaihtaminen verkkosivustollasi on uskomattoman helppoa CSS: n avulla; tarvitset vain yhden säännön tehdäksesi sen.

väri: sininen;

Tietenkin, CSS -säännöt eivät kuitenkaan toimi kovin hyvin yksinään. Sinun on yhdistettävä ne elementtiluokkiin, tunnuksiin ja tunnisteisiin, jotta selaimet tietävät, mitä tyyli koskee. Näet esimerkkejä tämän säännön käytöstä H1 -otsikon, P -kappaleen ja alla olevan painikkeen kanssa.

h1 {väri: sininen; }
p {väri: punainen; }
painike {väri: punainen; }

Tämän pitäisi antaa sinulle perustiedot siitä, mitä on tehtävä verkkosivustosi tekstin värin muuttamiseksi CSS: llä. Se kestää yleensä enemmän kuin tämä, varsinkin jos haluat antaa eri värejä verkkosivustosi eri tekstille.

Aiheeseen liittyviä: CSS -laatikkomalli selitetty esimerkeillä

Oikean CSS -luokan löytäminen

Ennen kuin voit muuttaa tiettyä verkkosivustosi tekstiä, sinun on tiedettävä, kuinka tunnistaa se CSS -tiedostossasi. Useimmilla selaimilla on joukko työkaluja, jotka on suunniteltu auttamaan kehittäjiä, ja on todennäköistä, että käyttämässäsi on jotain ns. Tarkastaja. Tätä voidaan käyttää kurkistamaan HTML -koodiin ja muuhun verkkosivustoa rakentavaan koodiin.

Tarkastajan avaaminen

Tarkastajan avaaminen on erilainen kaikissa markkinoilla olevissa selaimissa. Olemme käsitelleet kourallisen alla olevia suosituimpia selaimia antaaksemme sinulle alkuun:

• Google Chrome: CTRL + Vaihto + C tai Valikkopisteet > Lisää työkaluja > Kehitystyökalut
• Microsoft Edge: CTRL + Vaihto + C tai Valikkopisteet > Lisää työkaluja > Kehitystyökalut
• Mozilla Firefox: CTRL + Vaihto + C tai Valikkopisteet > Lisää työkaluja > Verkkokehitystyökalut
• Apple Safari: Asetukset > Pitkälle kehittynyt > Näytä Kehitä -valikko valikkorivillä ja sitten Kehittää > Näytä Web Inspector

Oikean CSS -tekstityylin löytäminen

Se voi olla hämmentävää, kun avaat tarkastajan ensimmäisen kerran selaimessasi. On monia asioita, joita et ehkä ymmärrä, mutta sinun ei tarvitse huolehtia tästä nyt. Sinun tarvitsee vain löytää tekstin tyylinimi, jota yrität muuttaa.

Esimerkkinä aiomme löytää ja muuttaa MakeUseOf -ohjelmointi -osan pääotsikossa käytettävää CSS -tekstityyliä. Voit aloittaa tämän prosessin tarkistamalla muutettavan elementin.

• Google Chrome: Oikealla painikkeella > Tarkastaa
• Microsoft Edge: Oikealla painikkeella > Tarkastaa
• Mozilla Firefox: Oikealla painikkeella > Tarkastaa tai Q
• Apple Safari: Oikealla painikkeella > Tarkastele elementtiä

Jos teet tämän, verkkosivustosi konsoli/tarkastaja -ikkuna keskittyy siihen elementtiin, jota yrität muuttaa. Chromessa, Safarissa, Edgessä ja Firefoxissa sinun pitäisi nähdä osio, jossa on otsikko Tyyliä joka sisältää kaikki tarkastettavan elementin CSS -koodin.

Sinun pitäisi myös nähdä HTML -elementtisi korostettuna viereisessä ruudussa. Tämän avulla voit selvittää muutettavan elementin luokan tai tunnuksen. Meidän tapauksessamme tarkastelemme sivullamme H1-pääotsikkoa, ja tämä kuuluu luokkaan nimeltä .listing-title.

Tässä vaiheessa voit testata CSS -tekstityyliä, jonka lisäät verkkosivustoosi. Verkkosivuston konsolin CSS -tyyliosion yläosaa voidaan käyttää sääntöjen kohdistamiseen tiettyyn elementtiin. Tämä ei tietenkään ole pysyvää.

Aiheeseen liittyviä: Responsiivisen navigointipalkin luominen HTML: n ja CSS: n avulla

Uuden CSS: n lisääminen

Nyt on aika lisätä uusi CSS sivustoosi. Tapa, jolla teet tämän, riippuu käyttämästäsi verkkosivustoalustasta, ja esimerkiksi Shopify vaatii laajennuksia, joiden avulla voit lisätä CSS -tiedostoja muuttamatta tiedostojasi.

Vaikka lisäät CSS -koodisi, sinun on varmistettava, että se on oikea. Tekstityyppisten CSS-sääntöjen käyttäminen ei ole liian vaikeaa, mutta se voi olla turhauttavaa, jos et voi selvittää, miten voit muuttaa tekstin väriä. Esimerkkinä tämä on koodi, joka meidän on lisättävä verkkosivustollemme.

.listing-title {
väri: sininen;
}

Entä jos tekstin väri ei muutu?

Kun olet muokannut CSS -tiedostoasi, sinun pitäisi nähdä tekemäsi muutos heti, kun päivität sivusi. Se ei kuitenkaan ole aina niin yksinkertaista kuin tämä. CSS voi olla monimutkaisempi kuin ihmiset odottavat, ja sinun on ehkä tehtävä enemmän tässä vaiheessa.

• Välimuistin tyhjentäminen: Sivustot käyttävät usein välimuistia latausaikojen lyhentämiseksi. Välimuisti saattaa estää sinua näkemästä verkkosivuston muutoksia, ja sinun on tyhjennettävä se, kun teet muutoksia CSS: ään.
• Korkeampi tyylitaulukossa: CSS lataa tyylejä peräkkäin, ja tämä tarkoittaa, että tyylisivun ensimmäiset säännöt ovat ne, jotka näkyvät verkkosivustollasi. Liikkuvat tyylit voivat olla hyvä tapa antaa heille etusija muihin tyyleihin nähden.
• Käytä tärkeitä tunnisteita: Tätä seuraavaa vaihtoehtoa ei pidetä parhaana käytäntönä, ja se on paras varata silloin, kun sinulla ei ole muuta vaihtoehtoa. Voit lisätä tärkeän tunnisteen CSS -tekstityyleihisi antaaksesi heille etusijan kaikkiin muihin tyyleihin nähden, ja tämä näkyy alla:

.listing-title {
väri: sininen! tärkeä;
}

Muu tekstityyli CSS Fun

CSS on uskomattoman tehokas työkalu, joka antaa sinulle pääsyn moniin eri vaihtoehtoihin, kun käsittelet verkkosivustosi tekstiä ja muita elementtejä. Tämä ei lopu pelkästään CSS -tekstin väreihin, ja voit tehdä kuormituksia tekstilläsi, kun päätät oppia vähän CSS: ää. Alta löydät lisää CSS -tekstityylin perussääntöjä:

• Fonttikoko: Tämä muuttaa verkkosivustosi tekstin kokoa, esim. Fontin koko: 12px;
• Fonttipaino: Paino viittaa kirjasimen paksuuteen, lihavoitu on suuri paino ja ohut teksti on pieni, esim. Fontin paino: 400;
• Tasaa teksti: Tämä muuttaa käsiteltävän tekstin kohdistusta, esim. Text-align: right;
• Teksti-varjo: Tämän avulla voit lisätä tekstiin varjon erilaisilla määritteillä, esim. Text-shadow: 2px 2px 3px black;
• Tekstin muuntaminen: Tämä muuttaa käsiteltävän tekstin kirjainkokoa, esim. Text-transform: isot kirjaimet;
• Tekstin koristelu: Tämän avulla voit lisätä alleviivauksia, viivoja ja muita koristeita tekstiin, esim. Tekstin koristelu: alleviivaus;

Tämä on vain naarmuuntumista pinnalle siitä, mitä voit tehdä CSS: n tekstityyleillä. Verkossa on paljon oppaita, jotka voivat auttaa sinua tässä prosessissa, ja on aina hyvä tehdä tutkimusta aloittaessasi.

Aiheeseen liittyviä: Verkkosivustosi tekstin muuttaminen CSS-kirjasinperheominaisuuden avulla

Opi enemmän kuin CSS -tekstin väri

Harjoittelu, kokeilu ja kokeilu ja erehdys ovat parhaita tapoja oppia CSS: n kaltainen työkalu. Tyylisivut voivat tuntua pelottavilta, kun alat työskennellä heidän kanssaan, mutta niiden kanssa on uskomattoman helppo työskennellä, kun olet viettänyt jonkin aikaa heidän kanssaan.

10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

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

Lue seuraava

Kirjailijasta