Kaip pakeisti svetainės šrifto spalvas naudojant CSS
Padarykite savo svetainės šriftus bet kokios spalvos
Ką žinoti
CSS suteikia galimybę valdyti teksto išvaizdą kuriamuose ir tvarkomuose tinklalapiuose. Šiame vadove parodysime, kaip pakeisti šrifto spalvas CSS naudojant spalvų raktinius žodžius, šešioliktainius spalvų kodus arba RGB spalvų numerius.
Kaip naudoti CSS stilius šrifto spalvai pakeisti
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, pridedamas prie to dokumento . Konkrečiai pažvelgsime į 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 tekstą p { } . Padėkite spalva savybė tokiu stiliumi, po kurio yra dvitaškis, pvz p { spalva: } . Tada po ypatybės pridėkite savo spalvos vertę, užbaigdami ją kabliataškiu. Šiame pavyzdyje pastraipos tekstas pakeistas į juodą spalvą:
p {
spalva: juoda;
}
Ashley Nicole DeLeon / Lifewire
Norėdami pakeisti šrifto spalvas, naudokite šešioliktaines reikšmes
Naudodami spalvų raktinius žodžius norėdami pakeisti tekstą į raudoną, žalią, mėlyną ar kitą pagrindinę spalvą, nesuteiksite tokio tikslumo, kokio galbūt ieškote kurdami skirtingus tų spalvų atspalvius. Tam skirtos šešioliktainės reikšmės.
Šis CSS stilius gali būti naudojamas pastraipoms nuspalvinti juodai, nes šešioliktainis kodas #000000 reiškia juodą. Jūs netgi galite naudoti trumpinį su ta šešioliktaine verte ir parašyti kaip #000 su tokiais pačiais rezultatais.
p {
spalva: #000000;
}
Hex vertės gerai veikia, kai reikia spalvos, kuri nėra tik juoda ar balta. Pavyzdžiui, šis šešioliktainis kodas suteikia galimybę nustatyti labai specifinį mėlynos spalvos atspalvį – vidutinės klasės, šiferį primenančią mėlyną:
p {
spalva: #2f5687;
}
Hex veikia atskirai nustatydamas spalvos RGB (raudona, žalia, mėlyna) reikšmes su šešiolikos bazinėmis reikšmėmis. Štai kodė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ė, tuo tarpu FF yra aukščiausias. Spalvos pateikiamos RGB tvarka šešioliktaine forma, todėl pirmieji du skaitmenys reiškia raudoną reikšmę ir pan.
Norėdami pakeisti šrifto spalvas, naudokite RGBA spalvų reikšmes
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 reikšmes neabejotinai, kad ji veiks daugumai žiūrinčiųjų, tačiau taip pat galite nustatyti paprastą atsarginį variantą.
Ši RGBA reikšmė yra tokia pati kaip anksčiau nurodyta šiferio 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 skaidrumo alfa nustatymas. Alfa nustatymas nustatytas į 1 ir reiškia 100 procentų, todėl ši spalva neturi skaidrumo. Jei šią reikšmę nustatysite į dešimtainį skaičių, pvz., 0,85, neskaidrumas bus 85 proc., o spalva būtų šiek tiek skaidri.
Jei norite apsaugoti savo spalvų reikšmes, nukopijuokite šį CSS kodą:
p {
spalva: #2f5687;
spalva: rgba(47,86,135,1);
}
Ši sintaksė pirmiausia nustato šešioliktainį kodą, o tada perrašo tą reikšmę RGBA numeriu. Tai reiškia, kad bet kuri senesnė naršyklė, kuri nepalaiko RGBA, gaus pirmąją reikšmę ir nepaisys antrosios.
Svarbu nepamiršti, kad spalvos ypatybė veikia bet kuriame CSS HTML teksto elemente. Pavyzdžiui, galite pakeisti visas nuorodų spalvas. Šis pavyzdys pavers jūsų nuorodas ryškiai žaliai:
a {
spalva: #16c616;
}
Tai taip pat veikia su keliais elementais vienu metu. Galite nustatyti visus pavadinimo lygius vienu metu. Pavyzdžiui, visi pavadinimo elementai bus vidurnakčio mėlynos spalvos:
h1, h2, h3, h4, h5, h6 {
spalva: #020833;
}
Ne visada lengva nustatyti savo spalvų šešiabriaunes arba RGBA vertes. Daugelis žiniatinklio dizainerių naudos vaizdų redagavimo programą, pvz., „Photoshop“ ar GIMP, kad sukurtų tikslius kodus. Taip pat internete galite rasti patogių spalvų parinkimo įrankių, pvz tai iš w3schools .
Kiti HTML puslapio stiliaus kūrimo būdai
Šrifto spalvas galima pakeisti naudojant išorinį stiliaus lapą, vidinį stiliaus lapą arba įterptą stilių HTML dokumente. Tačiau geriausia praktika reikalauja, kad savo CSS stiliams turėtumėte naudoti išorinį stiliaus lapą.
Vidinis stilių lapas, kuris yra stiliai, įrašyti tiesiai į jūsų dokumento „galvą“, paprastai naudojami tik mažoms vieno puslapio svetainėms. Reikėtų vengti eilutinių stilių, nes jie yra panašūs į senas šrifto žymas, kurias naudojome prieš daugelį metų. Dėl šių eilutinių stilių labai sunku valdyti šrifto stilių, nes juos reikia keisti kiekvienu eilutinio stiliaus atveju.