Krāsas norādīšana, izmantojot rgb CSS

Pašā mācību grāmatas sākumā, kad mēs mācījāmies par krāsām, es jums pastāstīju, ka krāsu var norādīt vai nu ar angļu vārdu, vai ar rgb, vai ar #. Pēdējie divi formāti ļauj iegūt jebkādas nokrāsas krāsu. Tagad apskatīsim, kā tieši šie formāti strādā.

Lai saprastu šīs metodes, vispirms mums jāizprat, kā iegūst vajadzīgo krāsu datora ekrānā.

Patiesībā atsevišķs ekrāna punkts (pikselis) nevar spīdēt ar visām krāsām, kuras vajadzīgas, jo tas tehniski būtu ļoti sarežģīti. Katrs ekrāna punkts var spīdēt tikai ar trīs krāsām: sarkanu, zaļu un zilganzaļu. Bet vienlaikus un dažādās proporcijās.

Kombinējot šīs krāsas, mēs varam iegūt jebkuru vajadzīgo krāsu, līdzīgi kā to dara mākslinieki ar krāsām: sajaucot vairākas krāsas, viņi iegūst vēl vienu jaunu.

Lai sajauktu krāsas CSS, ir jānorāda īpašības vērtībā atslēgvārds rgb, pēc kura jāuzskaita ar komatu atdalītas vērtības, kas nosaka, kādās proporcijās jāņem šīs trīs pamatkrāsas. Pašas krāsas var mainīties no 0 līdz 255. Turklāt nulle - ir krāsas neesamība, bet 255 ir tīra krāsa (piemēram, tīri sarkana).

Paši burti rgb tiek atšifrēti kā red, green, blue.

Apskatīsim piemēros.

Piemērs

Sajauksim tīri sarkanu un tīri zilganzaļu krāsu. Lai to izdarītu, pirmo vērtību iestatām uz 255, otro uz 0, bet trešo - uz 255. Mēs iegūsim violetu krāsu:

<p>
	teksts
</p>

p {
	color: rgb(255, 0, 255);
}

Piemērs

Tagad iestatīsim pirmo vērtību uz 255, bet visas pārējās - uz nullēm. Rezultātā iegūsim tīri sarkanu krāsu:

<p>
	teksts
</p>

p {
	color: rgb(255, 0, 0);
}

Piemērs

Šādi iegūsim tīri zaļu krāsu:

<p>
	teksts
</p>

p {
	color: rgb(0, 255, 0);
}

Piemērs

Un, ja zaļajai krāsai iestatīs nevis 255, bet 100, tad iegūsies daļēji zaļa krāsa:

<p>
	teksts
</p>

p {
	color: rgb(0, 100, 0);
}

Piemērs

Sajauksim visas trīs krāsas patvaļīgās proporcijās. Skatieties, kas sanāca:

<p>
	teksts
</p>

p {
	color: rgb(200, 100, 125);
}

Piemērs

Ja iestatīsiet visas vērtības uz 255, tad iegūsiet tīri baltu krāsu:

p {
	color: rgb(255, 255, 255);
}

Piemērs

Ja iestatīsiet visas vērtības uz 0, tad iegūsiet tīri melnu krāsu:

p {
	color: rgb(0, 0, 0);
}

Praktiskie uzdevumi

Norādot krāsu ar rgb, padariet visus rindkopas sarkanas.

Norādot krāsu ar rgb, padariet visus h2 zaļus.

Norādot krāsu ar rgb, padariet visus h3 zilganzaļus.

Sajauciet tīri sarkanu un tīri zaļu. Kāda krāsa iegūsies?