Kā mainīt vietnes fontu krāsas, izmantojot CSS

CSS ļauj kontrolēt teksta parādīšanos izveidotajās un pārvaldītajās tīmekļa lapās. Šajā rokasgrāmatā mēs parādīsim, kā mainīt fonta krāsas CSS, izmantojot krāsu atslēgvārdus, heksadecimālos krāsu kodus vai RGB krāsu numurus.

Kā izmantot CSS stilus, lai mainītu fonta krāsu

Krāsu vērtības var izteikt kā krāsu atslēgvārdus, heksadecimālus krāsu skaitļus vai RGB krāsu numurus. Šajā nodarbībā jums būs nepieciešams HTML dokuments, lai redzētu CSS izmaiņas un a atsevišķs CSS fails, kas pievienots šim dokumentam. Mēs īpaši aplūkosim rindkopas elementu.

Izmantojiet krāsu atslēgvārdus, lai mainītu fonta krāsas

Lai mainītu teksta krāsu katrai HTML faila rindkopai, dodieties uz ārējo stila lapu un ierakstiet p {}. Novietojiet krāsa īpašums stilā, kam seko kols, piemēram p {krāsa:}. Pēc tam pievienojiet krāsas vērtību pēc rekvizīta, beidzot to ar semikolu. Šajā piemērā rindkopas teksts tiek mainīts uz melnu krāsu:

p {
krāsa: melna;
}

Izmantojiet heksadecimālās vērtības, lai mainītu fonta krāsas

Krāsu atslēgvārdu izmantošana, lai tekstu mainītu uz sarkanu, zaļu, zilu vai kādu citu pamata krāsu, nedos jums tādu precizitāti, kādu varētu meklēt, veidojot dažādus šo krāsu toņus. Tam ir paredzētas heksadecimālās vērtības.

Šo CSS stilu var izmantot, lai krāsas iekrāsotu melnā krāsā, jo sešstūra kods # 000000 tiek tulkots kā melns. Jūs pat varētu izmantot stenogrāfiju ar šo sešpadsmito vērtību un ierakstīt to kā # 000 ar tādiem pašiem rezultātiem.

p {
krāsa: # 000000;
}

Hex vērtības darbojas labi, ja jums ir nepieciešama krāsa, kas nav vienkārši melna vai balta. Piemēram, šis sešstūra kods ļauj iestatīt ļoti specifisku zilu nokrāsu - vidēja līmeņa, šīferim līdzīgu zilu:

p {
krāsa: # 2f5687;
}

Hex darbojas, iestatot krāsas RGB (sarkanā, zaļā, zilā) vērtības atsevišķi ar bāzes sešpadsmit vērtībām. Tāpēc tajos ir burti A cauri F papildus cipariem 0 cauri 9.

Katra krāsa - sarkana, zaļa un zila - iegūst savu divciparu vērtību. 00 ir zemākā iespējamā vērtība, savukārt FF ir visaugstākais. Krāsas ir uzskaitītas RGB secībā ar sešstūri, tāpēc pirmie divi cipari apzīmē sarkano vērtību utt.

Izmantojiet RGBA krāsu vērtības, lai mainītu fonta krāsas

Visbeidzot, lai rediģētu fonta krāsas, varat izmantot RGBA krāsu vērtības. RGCA tiek atbalstīts visās mūsdienu pārlūkprogrammās, tāpēc jūs varat izmantot šīs vērtības ar pārliecību, ka tas darbosies lielākajai daļai skatītāju, taču jūs varat arī iestatīt vieglu atkāpi.

Šī RGBA vērtība ir tāda pati kā iepriekš norādītā šīfera zilā krāsa:

p {
krāsa: rgba (47,86,135,1);
}

Pirmās trīs vērtības nosaka sarkanās, zaļās un zilās vērtības, un pēdējais skaitlis ir alfa iestatījums pārredzamībai. Alfa iestatījums ir 1, kas nozīmē 100 procentus, tāpēc šai krāsai nav caurspīdīguma. Ja iestatāt šo vērtību līdz decimāldaļai, piemēram, .85, tas nozīmē 85% necaurredzamību un krāsa būtu nedaudz caurspīdīga.

Ja vēlaties nepietiekami izturēt krāsu vērtības, nokopējiet šo CSS kodu:

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

Šī sintakse vispirms iestata sešstūra kodu un pēc tam šo vērtību pārraksta ar RGBA numuru. Tas nozīmē, ka jebkurš vecāks pārlūks, kas neatbalsta RGBA, iegūs pirmo vērtību un ignorēs otro.

Ir svarīgi paturēt prātā, ka rekvizīts krāsa darbojas ar jebkuru CSS HTML teksta elementu. Jūs varat, piemēram, mainīt visas saites krāsas. Šis piemērs padarīs jūsu saites spilgti zaļas:

a {
krāsa: # 16c616;
}

Tas darbojas arī ar vairākiem elementiem vienlaikus. Katru nosaukuma līmeni var iestatīt vienlaicīgi. Piemēram, tas visiem jūsu nosaukuma elementiem iestatīs pusnakts zilu krāsu:

h1, h2, h3, h4, h5, h6 {
krāsa: # 020833;
}

Ne vienmēr ir viegli nākt klajā ar krāsu vai sešstūra vērtību. Lielākā daļa tīmekļa dizaineru izmantos attēlu rediģēšanas programmu, piemēram, Photoshop vai GIMP, lai ģenerētu precīzus kodus. Ērtus krāsu atlasītāja rīkus varat atrast arī tiešsaistē, piemēram, šis no w3skolām.

Citi veidi, kā veidot HTML lapu

Fonta krāsas var mainīt ar ārēju stila lapu, iekšējo stila lapu vai iekšējo stilu HTML dokumentā. Tomēr paraugprakse nosaka, ka CSS stiliem jāizmanto ārēja stila lapa.

Iekšējā stila lapa, kas ir stils, kas ierakstīts tieši dokumenta "galvā", parasti tiek izmantots tikai mazām vietnēm ar vienu lapu. Jāizvairās no ievietotajiem stiliem, jo ​​tie ir līdzīgi vecajiem "font" tagiem, ar kuriem mēs strādājām pirms daudziem gadiem. Šie ievietotie stili apgrūtina fonta stila pārvaldību, jo jums tie ir jāmaina visos iekšējā stila gadījumos.