Ранггузории ранги RGB дар CSS

Дар аввали китоби дарсӣ, вақте ки мо рангҳоро меомӯхтем, ман ба шумо гуфтам, ки ранг метавонад ё бо калимаи англисӣ, ё бо истифода аз rgb, ё бо истифода аз # муайян карда шавад. Ду формати охирин имконияти гирифтани рангҳои ҳар гуна ранготиро медиҳанд. Биёед фаҳмем, ки ин форматҳо чӣ гуна кор мекунанд.

Барои фаҳмидани ин роҳҳо, аввал ба мо зарур аст, ки чӣ гуна рангҳои дархост дар экрани компютер ба даст меоянд.

Дар асл як нуқтаи алоҳидаи экран (пиксел) наметавонад ҳама рангҳои заруриро равшана кунад, зеро ин аз ҷиҳати техникӣ хеле мушкил мебуд. Ҳар як нуқтаи экран метавонад фақат се рангро равшан кунад: сурх, сабз ва кабуд. Аммо ҳамзамон ва дар нисбатҳои гуногун.

Бо омезиши ин рангҳо мо метавонем ҳар гуна рангеро ки ба мо лозим аст, ба даст орем, монанди он чӣ ки рассомон бо рангашон мекунанд: бо омехтани чанд ранг онҳо рангҳои нави дигарро ба даст меоранд.

Барои омезиши рангҳо дар CSS бояд дар қимати хосият калимаи калидӣ rgb-ро гузоред, пас аз он ба вергул ҷудо карда, қиматҳоеро, ки мегӯянд, ин се рангҳои асосӣ дар кадом нисбат гирифта шаванд, гузоред. Худи рангҳо метавонанд аз 0 то 255 тағйир кунанд. Ва сифр - ин набудани ранг аст, ва 255 - ин рангҳои холис (масалан, сурхи холис).

Худ ҳарфҳои rgb инҳоянд: red, green, blue.

Биёед бо мисолҳо нигарем.

Мисол

Биёед сурхи холис ва кабуди холисро омезем. Барои ин қимати аввалро ба 255, дуввумро ба 0, ва сеюмро - ба 255 гузорем. Ба мо ранг арғувонӣ ба даст хоҳад омад:

<p>
	матн
</p>

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

Мисол

Биёед ҳоло қимати аввалро ба 255 гузорем, ва ҳамаи дигарҳоро - ба сифр. Дар натиҷа рангҳои сурхи холисро хоҳем гирифт:

<p>
	матн
</p>

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

Мисол

Ин тавр рангҳои сабзи холисро хоҳем гирифт:

<p>
	матн
</p>

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

Мисол

Ва агар барои сабз 255-ро гузорем на, балки 100, пас рангҳои қисман сабз ба даст хоҳад омад:

<p>
	матн
</p>

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

Мисол

Биёед ҳама се рангро дар нисбатҳои ихтиёрӣ омезем. Бингаред, чӣ ба даст омад:

<p>
	матн
</p>

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

Мисол

Агар ҳама қиматҳоро ба 255 гузорем, пас рангҳои сафеди холис ба даст хоҳад омад:

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

Мисол

Агар ҳама қиматҳоро ба 0 гузорем, пас рангҳои сиёҳи холис ба даст хоҳад омад:

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

Вазифаҳои амалӣ

Бо рангузорӣ аз тариқи rgb ҳама абзасҳоро ба ранги сурх гузоред.

Бо рангузорӣ аз тариқи rgb ҳама h2-ҳоро ба ранги сабз гузоред.

Бо рангузорӣ аз тариқи rgb ҳама h3-ҳоро ба ранги кабуд гузоред.

Сурхи холис ва сабзи холисро омезед. Кадом ранг ба даст хоҳад омад?