Kuidas muuta oma veebisaidi teksti värvi CSS -iga

Veebisaidi kontrollimise oluline osa on veebisaidi kontrollimine. Ideaalses maailmas peaksite saama muuta oma saidi kujunduse kõiki aspekte, ilma et peaksite valmistoote osas järeleandmisi tegema.

Muidugi võivad veebisaidid sageli kangekaelsed olla. Soovitud tulemusi pole alati võimalik saavutada ilma CSS -i maailma süvenemata. Vaatame, kuidas saate oma veebisaidil CSS -iga teksti värvi muuta, et saada aimu sellest, kuidas CSS -i abil rohkem saavutada.

Veebisaidi teksti värvi muutmine CSS -iga

CSS on hoolikalt kavandatud tagamaks, et see annab disaineritele võimu nende veebisaidiprojektide üle. Teksti värvi muutmine veebisaidil CSS abil on uskumatult lihtne; selle tegemiseks vajate ainult ühte reeglit.

värv: sinine;

Loomulikult ei tööta CSS -i reeglid üksi väga hästi. Peate need siduma elementide klasside, ID -de ja identifikaatoritega, tagamaks, et veebibrauserid teaksid, millele stiil kehtib. Näete näiteid selle reegli kasutamisest pealkirja H1, lõigu P ja allpool oleva nupuga.

h1 {värv: sinine; }
p {värv: punane; }
nupp {värv: punane; }

See peaks andma teile põhiteadmised sellest, mida tuleb teha, et muuta oma veebisaidi teksti värvi CSS -iga. Tavaliselt kulub sellest rohkem, eriti kui soovite oma veebisaidi tekstile anda erinevaid värve.

Seotud: Näidetega selgitatud CSS -i kastimudel

Õige CSS -klassi leidmine

Enne veebisaidi konkreetse teksti muutmist peate teadma, kuidas seda CSS -is tuvastada. Enamikul veebibrauseritel on tööriistakomplekt, mis on mõeldud arendajate abistamiseks, ja on tõenäoline, et teie kasutataval on midagi, mida nimetatakse Inspektor. Seda saab kasutada HTML -i ja muu veebisaidi loomise koodi sisse piilumiseks.

Inspektori avamine

Inspektori avamine on igas turul olevas brauseris erinev. Oleme alustamiseks tutvustanud käputäit populaarsemaid brausereid:

• Google Chrome: CTRL + tõstuklahv + C või Menüüpunktid > Veel tööriistu > Arendaja tööriistad
• Microsoft Edge: CTRL + tõstuklahv + C või Menüüpunktid > Veel tööriistu > Arendaja tööriistad
• Mozilla Firefox: CTRL + tõstuklahv + C või Menüüpunktid > Veel tööriistu > Veebiarendaja tööriistad
• Apple Safari: Eelistused > Täpsem > Kuva menüü Arendamine menüüribal ja siis Arendada > Kuva veebiinspektor

Õige CSS -i tekstistiili leidmine

Inspektori esmakordsel avamisel brauseris võib see olla segane. On palju asju, millest te ei pruugi aru saada, kuid te ei pea selle pärast praegu muretsema. Peate lihtsalt leidma teksti stiilinime, mida proovite muuta.

Näitena leiame ja muudame jaotises MakeUseOf Programming peamise päise jaoks kasutatavat CSS -tekstistiili ja muudame seda. Seda protsessi saate alustada muutva elemendi kontrollimisega.

• Google Chrome: Paremklõps > Kontrollige
• Microsoft Edge: Paremklõps > Kontrollige
• Mozilla Firefox: Paremklõps > Kontrollige või Q
• Apple Safari: Paremklõps > Kontrollige elementi

Seda tehes keskendub teie veebisaidi konsooli/inspektori aken elemendile, mida proovite muuta. Chrome'is, Safaris, Edge'is ja Firefoxis peaksite nägema jaotist sildiga Stiilid mis sisaldab kogu kontrollitava elemendi CSS -koodi.

Samuti peaksite nägema oma HTML -elementi selle kõrval oleval paanil esiletõstetuna. Seda saab kasutada muutuva elemendi klassi või ID väljaselgitamiseks. Meie puhul vaatame oma lehe peamist H1 pealkirja ja see kuulub klassi .listing-title.

Siin saate testida CSS -i tekstistiili, mille oma veebisaidile lisate. Veebisaidi konsooli CSS -i stiiliosa ülemist osa saab kasutada reeglite rakendamiseks teie sihitud konkreetsele elemendile. Muidugi, see pole siiski püsiv.

Seotud: Kuidas luua tundlikku navigeerimisriba HTML -i ja CSS -i abil

Uue CSS -i lisamine

Nüüd on aeg lisada oma veebisaidile uus CSS. See, kuidas te seda teete, sõltub kasutatava veebisaidi platvormi tüübist. Sellised valikud nagu Shopify nõuavad laiendusi, mis võimaldavad teil CSS -i lisada ilma faile muutmata.

Kuid kui lisate oma CSS -koodi, peate veenduma, et see on õige. Tekstistiilis CSS-reeglite kasutamine ei ole liiga raske, kuid võib olla masendav, kui te ei saa aru, kuidas oma teksti värvi muuta. Meie näites on see kood, mille peame oma veebisaidile lisama.

.listing-title {
värv: sinine;
}

Mis siis, kui teie teksti värv ei muutu?

Kui olete oma CSS -faili redigeerinud, peaksite oma lehe värskendamise järel nägema tehtud muudatust. See pole aga alati nii lihtne kui see. CSS võib olla keerulisem, kui inimesed eeldavad, ja võib -olla peate selles etapis rohkem tegema.

• Vahemälu tühjendamine: Veebisaidid kasutavad laadimisaja vähendamiseks sageli vahemällu salvestamist. Vahemälu võib takistada teil veebisaidi muudatusi nägemast ja CSS -i muudatuste tegemisel peate selle tühjendama.
• Kõrgem stiililehel: CSS laadib stiile järjestikku ja see tähendab, et teie stiililehe esimesed reeglid kuvatakse teie veebisaidil. Liigutamisstiilid võivad olla hea viis neile teiste stiilide ees esikohale seadmiseks.
• Oluliste siltide kasutamine: Seda järgmist võimalust ei peeta parimaks tavaks ja see on kõige paremini reserveeritud, kui teil pole muud valikut. Saate oma CSS -i tekstistiilidele lisada olulise märgendi, et anda neile eelis kõigi teiste stiilide ees, ja seda saab näha allpool:

.listing-title {
värv: sinine! oluline;
}

Muu teksti stiil CSS Lõbus

CSS on uskumatult võimas tööriist, mis annab teile juurdepääsu paljudele erinevatele võimalustele, kui töötate oma veebisaidi teksti ja muude elementidega. See ei piirdu ainult CSS -i teksti värviga ja saate oma tekstiga koormusi laadida, kui otsustate CSS -i natuke õppida. Allpool leiate mõned põhilised CSS -i teksti stiilireeglid:

• Fondi suurus: See muudab teie veebisaidi teksti suurust, nt fondi suurus: 12 pikslit;
• Font-kaal: Kaal viitab fondi paksusele, paksus kirjas on suur kaal ja õhuke tekst on madal, nt fondi kaal: 400;
• Teksti joondamine: See muudab teksti, millega töötate, joondamist, nt teksti joondamine: paremal;
• Tekst-vari: See võimaldab teil lisada tekstile varju, kasutades erinevaid atribuute, nt text-shadow: 2px 2px 3px black;
• Teksti teisendamine: See muudab teksti, millega töötate, suurtähti, nt teksti teisendamine: suured tähed;
• Teksti kaunistamine: See võimaldab tekstile lisada allajoonitud jooni, kriipsusid ja muid kaunistusi, nt teksti kaunistamine: allajoonimine;

See on lihtsalt kriimustus selle kohta, mida saate CSS -i tekstistiilidega teha. Veebis on palju juhendeid, mis aitavad teil seda protsessi teha, ja alustades on alati hea mõte uurida.

Seotud: Kuidas muuta oma veebisaidi teksti CSS-i fondiperekonna atribuudiga

Lisateave kui CSS -i teksti värv

Praktika, katsetamine ja katse -eksitus on parimad viisid sellise tööriista nagu CSS õppimiseks. Stiililehed võivad nendega esmakordselt alustades tunduda hirmutavad, kuid nendega on väga lihtne töötada, kui olete nendega mõnda aega veetnud.

10 lihtsat CSS -koodi näidet, mida saate õppida 10 minutiga

Kas vajate abi CSS -iga? Alustuseks proovige neid CSS -koodi põhinäiteid, seejärel rakendage neid oma veebilehtedele.

Loe edasi

Autori kohta