Geras tipografinis dizainas yra svarbi sėkmingos svetainės dalis. CSS suteikia jums puikią kontrolę teksto išvaizdą tinklalapiuose, kuriuos kuriate. Tai apima galimybę pakeisti bet kokių naudojamų šriftų spalvą.
Šrifto spalvos gali būti pakeistos naudojant išorinį stiliaus lapą , vidinį stiliaus lapą arba jį galima pakeisti naudojantis inline stiliumi HTML dokumente. Geriausios praktikos diktuoja, kad turėtumėte naudoti savo CSS stilių išorinę stilių lentelę. Vidinis stiliaus lapas, kuris yra tiesiogiai dokumento "galva" parašytas stilius, dažniausiai naudojamas tik mažose vienos puslapio svetainėse. Reikėtų vengti įprastų stilių, nes jie yra panašūs į senus "šrifto" žymas, su kuriais susidūrėme daugelį metų. Šie įprasti stiliai labai apsunkina šriftų stiliaus valdymą, nes jums reikės juos keisti kiekviename inline stiliaus pavyzdyje.
Šiame straipsnyje sužinosite, kaip pakeisti šrifto spalvą naudojant išorinį stiliaus lapą ir stilių, kuris naudojamas fragmento žyme. Galite taikyti tą patį stiliaus savybę, kad pakeistumėte šrifto spalvą bet kokia žyma, kuri supa tekstą, įskaitant
žymą.Stilių pridėjimas norint pakeisti fonto spalvą
Pavyzdžiui, jums reikės turėti HTML dokumentą savo puslapio žymėjimui ir atskirą CSS failą, pridedamą prie šio dokumento. HTML dokumente greičiausiai bus keli elementai. Tai, dėl ko mes susiduriame šio straipsnio tikslais, yra pastraipos elementas.
Čia aprašoma, kaip pakeisti teksto šrifto spalvą, esančią elemento žymėse, naudojant išorinį stiliaus lapą.
Spalvų reikšmės gali būti išreikštos spalvinėmis raktinėmis žodžiais, RGB spalvų skaičiais arba šešioliktainiais spalvų skaičiais.
- Pridėkite elemento žymos stiliaus atributą:
- p {}
- Įdėkite spalvų nuosavybę į stilių. Įdėkite dvitaškį po to:
- p (spalva:)
- Tada pridėkite spalvų reikšmę po nuosavybės. Būtinai pabandykite šią vertę su pusiau dvitaškio:
- p {spalva: juoda;}
Jūsų puslapio pastraipos bus juodos.
Šiame pavyzdyje naudojamas spalvinis raktinis žodis - "juodas". Tai yra vienas iš būdų pridėti spalvų CSS, tačiau tai labai riboja. Raktinių žodžių naudojimas "juodai" ir "baltai" yra paprastas, nes šios dvi spalvos yra labai specifinės, bet kas atsitinka, jei naudojate raktinius žodžius "raudona", "mėlyna" ar "žalia"? Tiksliai, kokį raudonos, mėlynos ar žalios spalvos atspalvį gausite? Negalite tiksliai nurodyti, kokio spalvoto atspalvio norite su raktiniais žodžiais. Štai kodel dažnai naudojami šešioliktainės vertės vietoj spalvų raktinių žodžių.
p (spalva: # 000000; }
Šis CSS stilius taip pat nustatys jūsų taškų spalvą juodai, nes šešioliktas kodas # 000000 reiškia juodą. Jūs netgi galite naudoti stenografą su šia hex reikšme ir parašyti ją kaip tik # 000, ir jūs gausite tą patį.
Kaip jau minėjome, hex vertės veikia gerai, kai jums reikia ne tik juodos ar baltos spalvos. Štai pavyzdys:
p (spalva: # 2f5687; }
Ši šešioliktainio reikšmio reikšmė bus mėlyna, bet skirtingai nei raktinis žodis "mėlynas", šis šešiakampis kodas suteikia jums galimybę nustatyti labai specifinį mėlynos spalvos atspalvį - greičiausiai tą, kurį dizaineris pasirinko kurdami sąsają ši svetainė. Tokiu atveju spalva būtų vidutinio dydžio, panašiai kaip mėlyna.
Galiausiai galite naudoti RGBA spalvų vertes ir šrifto spalvoms. Dabar RGCA palaikomas visose šiuolaikinėse naršyklėse, taigi naudodamiesi šiomis vertybėmis galite šiek tiek nerimauti, kad ji nebus palaikoma žiniatinklio naršyklėje, bet jūs taip pat galėsite lengvai nustatyti atsargines kopijas.
p (spalva: rgba (47,86,135,1); }
Ši RGBA reikšmė yra tokia pati kaip anksčiau nurodyta šiferio mėlyna spalva. Pirmosios 3 vertės nustato raudoną, žalią ir mėlynąsias vertes, o galutinis skaičius yra alfa nustatymas. Jis nustatytas į "1", o tai reiškia "100%", todėl ši spalva neturėtų skaidrumo. Jei nustatysite dešimtainį skaičių, pvz., .85, tai išverstų į 85% neskaidrumą ir spalva būtų šiek tiek skaidri.
Jei norite, kad jūsų spalvų reikšmės būtų apsaugotos nuo bullet, atlikite šiuos veiksmus:
p {
spalva: # 2f5687;
spalva: rgba (47,86,135,1);
}
Ši sintaksė pirmiausia nustato šešioliktainį kodą. Tada ji perrašo šią vertę su RGBA numeriu. Tai reiškia, kad bet kuri senesnė naršyklė, kuri nepalaiko RGBA, gaus pirmąją vertę ir ignoruoja antrą. Šiuolaikinės naršyklės naudotų antrąjį CSS kaskadą.