CSS-те rgb арқылы түс беру

Оқулықтың ең басында, біз түстерді зерттеген кезде, мен сіздерге түсті ағылшын сөзімен, не rgb арқылы, не # арқылы беруге болатынын айтқан болатынмын. Соңғы екі формат кез келген реңктің түсін алуға мүмкіндік береді. Бұл форматтардың қалай жұмыс істейтінін түсінейік.

Бұл әдістерді түсіну үшін, алдымен компьютер экранында қажетті түстің қалай алынатынын түсінуіміз қажет.

> Шын мәнінде, экранның жеке нүктесі (пиксель) қажет барлық түстермен жарқырай алмайды, себебі бұл техникалық тұрғыдан өте қиын болар еді. Экранның әрбір нүктесі тек үш түспен жарқырай алады: қызыл, жасыл және көк. Бірақ бір уақытта және әртүрлі пропорцияларда.

Бұл түстерді біріктіре отырып, біз кез келген қажетті түсті ала аламыз, сол сияқты бояушылар бояулармен істейді: бірнеше түсті араластырып, олар тағы бір жаңа түс алады.

CSS-те түстерді араластыру үшін, қасиет мәні ретінде rgb кілт сөзін көрсету керек, содан кейін үтір арқылы осы үш негізгі түсті қандай пропорцияларда алу керектігін көрсету керек. Түстердің өздері 0-ден 255-ке дейін өзгеруі мүмкін. Сонымен қатар, нөл - бұл түстің жоқтығы, ал 255 - бұл таза түс (мысалы, таза қызыл).

rgb әріптерінің өзі red, green, blue деп шешіледі.

Мысалдармен қарастырайық.

Мысал

Таза қызыл және таза көк түсті араластырайық. Ол үшін бірінші мәнді 255, екіншісін 0, ал үшіншісін - 255 етіп қоямыз. Бізде күлгін түс шығады:

html<p>
  мәтін
</p>

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

Результат:

Мысал

Енді бірінші мәнді 255, ал қалғандарын - нөлге қояйық. Нәтижеде таза қызыл түс аламыз:

html<p>
  мәтін
</p>

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

Результат:

Мысал

Осылайша таза жасыл түс аламыз:

html<p>
  мәтін
</p>

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

Результат:

Мысал

> Ал егер жасыл үшін 255 емес, 100 қойылса, онда ішінара жасыл түс шығады:

html<p>
  мәтін
</p>

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

Результат:

Мысал

Үш түсті де еркін пропорцияларда араластырайық. Қараңызшы, нені шығарды:

html<p>
  мәтін
</p>

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

Результат:

Мысал

Егер барлық мәндерді 255 қойсақ, онда таза ақ түс шығады:

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

Мысал

Егер барлық мәндерді 0 қойсақ, онда таза қара түс шығады:

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

Практикалық тапсырмалар