Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS rang qiymatlari

ULASHISH

CSS ranglari

CSS’da ranglarni quyidagi usullar bilan belgilash mumkin:

  • HEX ranglar
  • HEXA ranglar
  • RGB ranglar
  • RGBA ranglar
  • HSL ranglar
  • HSLA ranglar
  • Oldindan belgilangan rang nomlari
  • currentcolor kalit so‘zi bilan

HEX ranglar

HEX rang quyidagicha belgilanadi: #RRGGBB, bu yerda RR (qizil), GG (yashil) va BB (ko‘k) o‘n oltilik butun sonlari rang komponentlarini belgilaydi. Barcha qiymatlar 00 va FF oralig‘ida bo‘lishi kerak.

Masalan, #0000ff qiymati ko‘k rangda ko‘rsatiladi, chunki ko‘k komponent eng yuqori qiymatiga (ff), qolganlari esa 00 ga o‘rnatilgan.

Misol

Turli HEX ranglarini belgilang:

#p1 {background-color: #ff0000;}   /* red */ #p2 {background-color: #00ff00;}   /* green */ #p3 {background-color: #0000ff;}   /* blue */
O‘zingiz sinab ko‘ring »

HEXA ranglar

O‘n oltilik rang quyidagicha belgilanadi: #RRGGBB. Shaffoflik qo‘shish uchun 00 va FF oralig‘idagi yana ikkita raqam qo‘shing.

Misol

Shaffoflikka ega turli HEX ranglarini belgilang:

#p1a {background-color: #ff000080;}   /* red transparency */ #p2a {background-color: #00ff0080;}   /* green transparency */ #p3a {background-color: #0000ff80;}   /* blue transparency */
O‘zingiz sinab ko‘ring »

RGB ranglar

RGB rang qiymati rgb() funksiyasi bilan belgilanadi, uning sintaksisi quyidagicha:

rgb(red, green, blue)

Har bir parametr (red, green va blue) rang intensivligini belgilaydi va 0 dan 255 gacha bo‘lgan butun son yoki foiz qiymati (0% dan 100% gacha) bo‘lishi mumkin.

Masalan, rgb(0,0,255) qiymati ko‘k rangda ko‘rsatiladi, chunki blue parametri eng yuqori qiymatiga (255), qolganlari esa 0 ga o‘rnatilgan.

Shuningdek, quyidagi qiymatlar bir xil rangni belgilaydi: rgb(0,0,255) va rgb(0%,0%,100%).

Misol

Turli RGB ranglarini belgilang:

#p1 {background-color: rgb(255, 0, 0);}   /* red */ #p2 {background-color: rgb(0, 255, 0);}   /* green */ #p3 {background-color: rgb(0, 0, 255);}   /* blue */
O‘zingiz sinab ko‘ring »

RGBA ranglar

RGBA rang qiymatlari — RGB rang qiymatlarining alfa kanali bilan kengaytirilgan ko‘rinishi bo‘lib, alfa kanali obyektning noshaffofligini belgilaydi.

RGBA rang rgba() funksiyasi bilan belgilanadi, uning sintaksisi quyidagicha:

rgba(red, green, blue, alpha)

alpha parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq noshaffof) oralig‘idagi son.

Misol

Noshaffoflikka ega turli RGB ranglarini belgilang:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */ #p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */ #p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */
O‘zingiz sinab ko‘ring »

HSL ranglar

HSL — hue (tus), saturation (to‘yinganlik) va lightness (yorug‘lik) so‘zlarining qisqartmasi bo‘lib, ranglarning silindrik koordinatalardagi ifodasini bildiradi.

HSL rang qiymati hsl() funksiyasi bilan belgilanadi, uning sintaksisi quyidagicha:

hsl(hue, saturation, lightness)

Hue (tus) — rang g‘ildiragidagi gradus (0 dan 360 gacha): 0 (yoki 360) qizil, 120 yashil, 240 ko‘k. Saturation (to‘yinganlik) — foiz qiymati; 0% kulrang tusni, 100% esa to‘liq rangni bildiradi. Lightness (yorug‘lik) ham foiz qiymati; 0% — qora, 100% — oq.

Misol

Turli HSL ranglarini belgilang:

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */ #p2 {background-color: hsl(120, 100%, 75%);}   /* light green */ #p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */ #p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */
O‘zingiz sinab ko‘ring »

HSLA ranglar

HSLA rang qiymatlari — HSL rang qiymatlarining alfa kanali bilan kengaytirilgan ko‘rinishi bo‘lib, alfa kanali obyektning noshaffofligini belgilaydi.

HSLA rang qiymati hsla() funksiyasi bilan belgilanadi, uning sintaksisi quyidagicha:

hsla(hue, saturation, lightness, alpha)

alpha parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq noshaffof) oralig‘idagi son.

Misol

Noshaffoflikka ega turli HSL ranglarini belgilang:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */
O‘zingiz sinab ko‘ring »

Oldindan belgilangan rang nomlari

HTML va CSS rang spetsifikatsiyasida 140 ta rang nomi oldindan belgilangan.

Masalan: blue, red, coral, brown va hokazo:

Misol

Turli rang nomlarini belgilang:

#p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;}
O‘zingiz sinab ko‘ring »

Oldindan belgilangan barcha nomlar ro‘yxatini rang nomlari ma’lumotnomasida topishingiz mumkin.

currentcolor kalit so‘zi

currentcolor kalit so‘zi elementning color xususiyati qiymatiga ishora qiladi.

Misol

Quyidagi <div> elementining chegara rangi ko‘k bo‘ladi, chunki <div> elementining matn rangi ko‘k:

#myDIV {   color: blue; /* Blue text color */   border: 10px solid currentcolor; /* Blue border color */ }
O‘zingiz sinab ko‘ring »
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish