Kuidas muuta veebisaidi fondivärve CSS-iga

CSS võimaldab teil kontrollida teksti välimust teie loodud ja hallatavatel veebilehtedel. Selles juhendis näitame teile, kuidas muuta CSS-i fondivärve värvimärksõnade, kuueteistkümnendsüsteemi värvikoodide või RGB-värvinumbrite abil.

Kuidas kasutada CSS-i stiile fondi värvi muutmiseks

Värviväärtusi saab väljendada värvimärksõnadena, kuueteistkümnendsüsteemis värvinumbrite või RGB-värvinumbritena. Selle õppetunni jaoks peab teil olema HTML-dokument, et näha CSS-i muudatusi ja a eraldi CSS-fail, mis on sellele dokumendile lisatud. Vaatame konkreetselt lõigu elementi.

Fondivärvide muutmiseks kasutage värvilisi märksõnu

HTML-faili iga lõigu teksti värvi muutmiseks minge välisele stiililehele ja tippige p {}. Asetage värv vara stiilis, millele järgneb koolon, nagu p {värv:}. Seejärel lisage atribuudi järel oma värviväärtus, lõpetades selle semikooloniga. Selles näites muudetakse lõigu tekst mustaks:

p {
värv: must;
}

Fondi värvide muutmiseks kasutage kuueteistkümnendsüsteemi väärtusi

Värvimärksõnade kasutamine teksti muutmiseks punaseks, roheliseks, siniseks või mõneks muuks põhivärviks ei anna teile täpsust, mida võite nende värvide erinevate varjundite loomisel otsida. Selleks on mõeldud kuueteistkümnendsüsteemi väärtused.

Seda CSS-i stiili saab kasutada lõigete mustaks värvimiseks, sest heksakood # 000000 tõlgib mustaks. Selle heks-väärtusega võite isegi kasutada lühikirjeldust ja kirjutada see samade tulemustega numbriks # 000.

p {
värv: # 000000;
}

Hex-väärtused töötavad hästi, kui vajate värvi, mis pole lihtsalt must või valge. Näiteks annab see heksakood võimaluse määrata väga konkreetne sinine varjund - keskklassi kilttaoline sinine:

p {
värv: # 2f5687;
}

Hex töötab nii, et määrab värvi RGB (punane, roheline, sinine) väärtused eraldi kuueteistkümne alusväärtusega. Sellepärast sisaldavad need tähti A läbi F lisaks numbritele 0 läbi 9.

Iga värv, punane, roheline ja sinine, saab oma kahekohalise väärtuse. 00 on madalaim võimalik väärtus, samas FF on kõrgeim. Värvid on loetletud RGB-järjekorras kuuskant, nii et kaks esimest numbrit tähistavad punast väärtust ja nii edasi.

Fondi värvide muutmiseks kasutage RGBA värviväärtusi

Lõpuks saate fondivärvide muutmiseks kasutada RGBA värviväärtusi. RGCA-d toetatakse kõigis tänapäevastes brauserites, nii et saate neid väärtusi kasutada kindlalt, et see töötab enamiku vaatajate jaoks, kuid saate määrata ka lihtsa varuvariandi.

See RGBA väärtus on sama kui ülalnimetatud kiltkivi sinine värv:

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

Esimesed kolm väärtust määravad punase, rohelise ja sinise väärtuse ning viimane number on läbipaistvuse alfaseade. Alfa-seade on seatud väärtusele 1, mis tähendab 100 protsenti, nii et sellel värvil puudub läbipaistvus. Kui määrate selle väärtuse kümnendarvuks, näiteks .85, tähendab see läbipaistmatust 85 protsenti ja värv oleks veidi läbipaistev.

Kui soovite oma värviväärtusi kuulikindlalt muuta, kopeerige see CSS-kood:

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

See süntaks määrab kõigepealt heksakoodi ja kirjutab seejärel selle väärtuse üle RGBA numbriga. See tähendab, et iga vanem brauser, mis ei toeta RGBA-d, saab esimese väärtuse ja ignoreerib teist.

Oluline on meeles pidada, et värviatribuut töötab CSS-i mis tahes HTML-tekstielemendis. Näiteks saate muuta kõiki oma lingi värve. See näide muudab teie lingid erkroheliseks:

a {
värv: # 16c616;
}

See töötab ka mitme elemendiga korraga. Iga pealkirja taseme saate korraga seada. Näiteks määrab see kõik teie pealkirjaelemendid kesköiseks siniseks:

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

Värvide hex- või RGBA-väärtuste leidmine pole alati lihtne. Enamik veebidisainereid kasutab täpsete koodide genereerimiseks pilditöötlusprogrammi, näiteks Photoshop või GIMP. Veebist leiate ka mugavaid värvivalija tööriistu, nt see w3koolidest.

Muud viisid HTML-lehe kujundamiseks

Fondivärve saab muuta HTML-dokumendi välise stiililehe, sisemise stiililehe või sisemise stiiliga. Parimate tavade kohaselt peaksite CSS-i stiilide jaoks kasutama välist stiililehte.

Sisemist stiililehte, mis on stiilid, mis on kirjutatud otse teie dokumendi "päisesse", kasutatakse tavaliselt ainult väikeste, üheleheliste veebisaitide jaoks. Siseseid stiile tuleks vältida, kuna need sarnanevad vanade fontide siltidega, millega me aastaid tagasi tegelesime. Need sisesed stiilid muudavad fondi stiili haldamise väga raskeks, kuna peate neid muutma igal sisemise stiili puhul.