Color - Ranglar

Css da ranglar qiymatini yozishni bir nechta usuli mavjud. Ular oldindan belgilab qo'yilgan ranglar nomi yoki RGB, HEX, HSL, RGBA, HSLA ko'rinishida bo'lishi mumkin.

CSS Color Names

Css da ranglarni ularning oldindan yozib qo'yilgan nomlari bilan ishlatish mumkin.

Namuna

CSS Background Color

Background degani orqa fon deb tushinib olsak bo'ldi. Background color degani orqa fon rangi deb tarjima qilsak bo'ladi.

background-color xususiyati orqali html elementlarni orqa fon rangini o'zgartirish mumkin.

Namuna

  <h1 style="background-color:indianred;">h1 da background-color: indianred yozilgan</h1>
  <p style="background-color:aquamarine;"> p da background-color: aquamarine yozilgan</p>

CSS Text Color

color xususiyati orqali elementdagi teksning rangini o'zgartirish mumkin.

Namuna

  <h1 style="color: green"> Salom Dunyo</h1>
  <p style="color:blue"> Bu teksda  color:blue qiymati bozilgan </p>

CSS Border Color

Border chegara deb tarjima qilinadi. Elementning chegarasiga stillar berish mumkin. Border haqida alohida darsda batafsil tushintirilgan.

Css da Elementning chegarasini rangini o'zgartirish mumkin.

 Namuna

<h2 style="border: 2px solid green"> Salom Dunyo</h2>
<p style="border: 2px solid red"> Bu elementni chegarasi rangi red yozilgan</p>

CSS Color Values

Css da rangning qiymat ko'rinishi turlicha bo'lishi mumkin. RGB , HEX , HSL , RGBA , HSLA ko'rinishda rang qiymatini yozish mumkin.

Quyidagi namunada bitta rangni turlicha ko'rinishdagi qiymatlari yozilgan.

CSS RGB Colors

Css da ranglarni rgb ko'rinishida berish mumkin. RGB (Red, Green, Blue)

Sintaksis

 rgb (Red, Green, Blue) 

Namuna

<p style="background-color: rgb(255, 127, 31);"> rgb(255, 127, 31) </p>
<p style="background-color: rgb(255, 0, 0);"> rgb(255, 0, 0) </p>
<p style="background-color: rgb(106, 90, 205);"> rgb(106, 90, 205) </p>

RGBA Value

rgba (Red, Green, Blue, alpha)

Alpha bu rangni tiniqligini bildiradigan qiymat. 0.0 dan 1.0 gacha bo'lishi mumkin. 0.0 da umuman ko'rinmaydi. 1.0 da tiniklik 100% bo'ladi. 1.0 bu default holat.

Namuna

<p style="background-color:  rgba(255, 127, 31,0.1);"> rgba(255, 127, 31,0.1) </p>
<p style="background-color:  rgba(255, 127, 31,0.4);"> rgba(255, 127, 31,0.4) </p>
<p style="background-color:  rgba(255, 127, 31,0.8);"> rgba(255, 127, 31,0.8) </p>
<p style="background-color:  rgba(255, 127, 31,1.0);"> rgba(255, 127, 31,1.0) </p>

CSS HEX Colors

Css da ranglarni 16 lik sanoq sistemasida ifodalash mumkin

#CD5C5C

Namuna

CSS HSL Colors

css da ranglar HSL formatda yozilishi mumkin. HSL (Hue, Saturation, Lightness) (rangni tusi, to'yinganlik miqdori, yorug'lik miqdori)

Sintaksis

 hsl(hue, saturation, lightness) 

Namuna

<p style="background-color: hsl(0, 55%, 80%)"> hsl(0, 55%, 80%) </p>
<p style="background-color: hsl(0, 100%, 50%)"> hsl(0, 100%, 50%) </p>
<p style="background-color: hsl(270, 100%, 50%)"> hsl(270, 100%, 50%) </p>

Value

hsla(hue, saturation, lightness, alpha)

Alpha bu rangni tiniqligini bildiradigan qiymat. 0.0 dan 1.0 gacha bo'lishi mumkin. 0.0 da umuman ko'rinmaydi. 1.0 da tiniklik 100% bo'ladi. 1.0 bu defaul xolat.

Namuna

<p style="background-color: hsla(0, 100%, 50%,0.2)"> hsla(0, 100%, 50%,0.2) </p>
<p style="background-color:  hsla(0, 100%, 50%,0.6)"> hsla(0, 100%, 50%,0.6) </p>
<p style="background-color:  hsla(0, 100%, 50%,0.8)">hsla(0, 100%, 50%,0.8) </p>