Kaip pakeisti svetainės šrifto spalvas naudojant CSS

CSS suteikia galimybę valdyti teksto išvaizdą jūsų sukurtuose ir valdomuose tinklalapiuose. Šiame vadove mes parodysime, kaip pakeisti šrifto spalvas CSS naudojant spalvų raktinius žodžius, šešioliktainius spalvų kodus arba RGB spalvų numerius.

Kaip naudoti CSS stilius norint pakeisti šrifto spalvą

Spalvų reikšmės gali būti išreikštos spalvų raktiniais žodžiais, šešioliktainiais spalvų skaičiais arba RGB spalvų skaičiais. Šioje pamokoje turėsite turėti HTML dokumentą, kad pamatytumėte CSS pakeitimus ir a atskiras CSS failas, pridėtas prie to dokumento. Mes konkrečiai nagrinėsime pastraipos elementą.

Norėdami pakeisti šrifto spalvas, naudokite spalvų raktinius žodžius

Norėdami pakeisti kiekvienos HTML failo pastraipos teksto spalvą, eikite į išorinį stiliaus lapą ir įveskite p {}. Padėkite spalva nuosavybės stiliaus, po kurio yra dvitaškis, pvz p {spalva:}. Tada pridėkite savo spalvos vertę po ypatybės, baigdami kabliataškiu. Šiame pavyzdyje pastraipos tekstas pakeistas į juodą spalvą:

p {
spalva: juoda;
}

Norėdami pakeisti šrifto spalvas, naudokite šešioliktaines reikšmes

Spalvotų raktinių žodžių naudojimas norint pakeisti tekstą į raudoną, žalią, mėlyną ar kitą pagrindinę spalvą nesuteiks jums tikslumo, kurio galbūt ieškote kurdami skirtingus tų spalvų atspalvius. Tam ir yra šešioliktainės vertės.

Šis CSS stilius gali būti naudojamas juodoms pastraipoms nuspalvinti, nes šešioliktainis kodas # 000000 reiškia juodą. Jūs netgi galite naudoti trumpinį su ta šešiakampe reikšme ir užrašyti kaip # 000 su tokiais pačiais rezultatais.

p {
spalva: # 000000;
}

„Hex“ vertybės veikia gerai, kai reikia ne tik juodos ar baltos spalvos. Pvz., Šis šešiakampis kodas suteikia galimybę nustatyti labai specifinį mėlyną atspalvį - vidutinės klasės, panašų į skalūną, mėlyną:

p {
spalva: # 2f5687;
}

Hex veikia nustatant spalvos RGB (raudona, žalia, mėlyna) reikšmes atskirai su šešiolika pagrindinių. Todėl juose yra raidės A per F be skaitmenų 0 per 9.

Kiekviena spalva - raudona, žalia ir mėlyna - gauna savo dviženklę vertę. 00 yra mažiausia įmanoma vertė, o FF yra aukščiausias. Spalvos RGB tvarka išdėstytos šešiakampe, taigi pirmieji du skaitmenys reiškia raudoną vertę ir pan.

Norėdami pakeisti šrifto spalvas, naudokite RGBA spalvų vertes

Galiausiai, norėdami redaguoti šrifto spalvas, galite naudoti RGBA spalvų reikšmes. RGCA palaikoma visose šiuolaikinėse naršyklėse, todėl galite naudoti šias vertes užtikrintai, kad ji veiks daugumai žiūrovų, tačiau taip pat galite nustatyti lengvą atsarginę versiją.

Ši RGBA reikšmė yra tokia pati kaip pirmiau nurodyta skalūno mėlyna spalva:

p {
spalva: rgba (47,86,135,1);
}

Pirmosios trys reikšmės nustato raudoną, žalią ir mėlyną reikšmes, o galutinis skaičius yra alfa skaidrumo nustatymas. Alfa nustatymas yra 1, reiškiantis 100 proc., Todėl ši spalva nėra skaidri. Jei nustatysite šią vertę dešimtainiu skaičiumi, pvz., .85, tai reikštų 85 proc. Neskaidrumą ir spalva būtų šiek tiek skaidri.

Jei norite apsaugoti savo spalvas nuo spalvų, nukopijuokite šį CSS kodą:

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

Ši sintaksė pirmiausia nustato šešioliktainį kodą ir tada perrašo tą vertę RGBA skaičiumi. Tai reiškia, kad bet kuri senesnė naršyklė, nepalaikanti RGBA, gaus pirmąją vertę, o antrąją ignoruos.

Svarbu nepamiršti, kad spalva ypatybė veikia bet kurį HTML teksto elementą CSS. Pavyzdžiui, galite pakeisti visas savo nuorodų spalvas. Šis pavyzdys padarys jūsų nuorodas ryškiai žalias:

a {
spalva: # 16c616;
}

Tai taip pat veikia su keliais elementais vienu metu. Kiekvieną pavadinimo lygį galite nustatyti vienu metu. Pavyzdžiui, visi jūsų pavadinimo elementai bus nustatyti vidurnakčio mėlyna spalva:

h1, h2, h3, h4, h5, h6 {
spalva: # 020833;
}

Savo spalvų šešiakampės ar RGBA reikšmes sugalvoti ne visada lengva. Daugelis interneto dizainerių naudos vaizdų redagavimo programą, pvz., „Photoshop“ ar „GIMP“, kad sugeneruotų tikslius kodus. Taip pat internete galite rasti patogių spalvų rinkimo įrankių, pvz šis iš w3mokyklų.

Kiti HTML puslapio stiliaus būdai

Šrifto spalvas galima pakeisti naudojant išorinį stiliaus lapą, vidinį stiliaus lapą arba įterptinį HTML dokumento stilių. Tačiau geriausia praktika nurodo, kad CSS stiliams turėtumėte naudoti išorinį stiliaus lapą.

Vidinis stiliaus lapas, kuris yra stilius, įrašytas tiesiai į jūsų dokumento „galvą“, paprastai naudojamas tik mažoms vieno puslapio svetainėms. Reikėtų vengti įterptinių stilių, nes jie yra panašūs į senas „font“ žymas, su kuriomis susidūrėme prieš daugelį metų. Dėl tų įterptųjų stilių labai sunku valdyti šrifto stilių, nes juos reikia keisti kiekviename įterptojo stiliaus pavyzdyje.