Casharka 3aad: Midabada iyo Magacyada Midabada CSS

CSS Basics: Colors and Color Names

CSS (Cascading Style Sheets) waa luuqad muhiim ah oo loo isticmaalo in lagu qurxiyo bogagga HTML. Midabada waa qayb muhiim ah oo CSS ka mid ah, waxayna kaa caawinayaan in aad boggaaga ka dhigto mid soo jiidasho leh. Maanta waxaan ku baran doonaa sida loo isticmaalo midabada iyo magacyada midabada ee CSS.

CSS Basics: Colors and Color Names

Midabada CSS

CSS waxay bixisaa siyaabo badan oo aad ku qeexi karto midabada. Hababka ugu caansan waxaa ka mid ah:

1. Magacyada Midabada (Color Names)
2. Hexadecimal Values
3. RGB Values
4. RGBA Values
5. HSL Values
6. HSLA Values

1. Magacyada Midabada (Color Names)

Magacyada midabada waa hab fudud oo midabada loogu isticmaalo CSS. Waxaa jira midabyo badan oo magacyadooda la yaqaan sida "red," "blue," "green," iyo kuwo kale oo badan. Magacyada midabada waa kuwo aad loo isticmaalo oo si fudud loo xasuusan karo.

Tusaale:

css

/* Midabada magacyadooda la yaqaan */
h1 {
  color: red;
}

p {
  color: blue;
}

div {
  background-color: green;
}

2. Hexadecimal Values

Midabada hexadecimal (hex) waa hab kale oo midabada loogu qeexo CSS. Waxaa la isticmaalaa calaamadaha # iyo lix nambar oo ah 0-9 iyo a-f. Laba nambar oo kowaad waxay tuseen red (casaan), labada dhexe waxay tuseen green (cagaar), iyo labada dambe waxay tuseen blue (buluug).

Tusaale:

css

/* Midabada hexadecimal */
h1 {
  color: #ff0000; /* red */
}

p {
  color: #0000ff; /* blue */
}

div {
  background-color: #00ff00; /* green */
}

3. RGB Values

Midabada RGB waxay isticmaalaan qiimayaasha red, green, iyo blue si loo abuuro midabyo kala duwan. Qiimayaashu waxay u dhexeeyaan 0 ilaa 255.

Tusaale:

css

/* Midabada RGB */
h1 {
  color: rgb(255, 0, 0); /* red */
}

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

div {
  background-color: rgb(0, 255, 0); /* green */
}

4. RGBA Values

Midabada RGBA waa isku mid sida RGB, laakiin waxay leedahay hal dheeraad oo alpha channel oo tuseya hufnaanta (opacity). Qiimaha alpha wuxuu u dhexeeyaa 0.0 (transparent) ilaa 1.0 (opaque).

Tusaale:

css

/* Midabada RGBA */
h1 {
  color: rgba(255, 0, 0, 0.5); /* red with 50% opacity */
}

p {
  color: rgba(0, 0, 255, 0.7); /* blue with 70% opacity */
}

div {
  background-color: rgba(0, 255, 0, 0.3); /* green with 30% opacity */
}

5. HSL Values

Midabada HSL waxay isticmaalaan hue, saturation, iyo lightness si loo abuuro midabyo. Hue wuxuu ka socdaa 0 ilaa 360, halka saturation iyo lightness ay ka soconayaan 0% ilaa 100%.

Tusaale:

css

/* Midabada HSL */
h1 {
  color: hsl(0, 100%, 50%); /* red */
}

p {
  color: hsl(240, 100%, 50%); /* blue */
}

div {
  background-color: hsl(120, 100%, 50%); /* green */
}

6. HSLA Values

Midabada HSLA waa isku mid sida HSL, laakiin waxay leedahay alpha channel oo tuseya hufnaanta (opacity).

Tusaale:

css

/* Midabada HSLA */
h1 {
  color: hsla(0, 100%, 50%, 0.5); /* red with 50% opacity */
}

p {
  color: hsla(240, 100%, 50%, 0.7); /* blue with 70% opacity */
}

div {
  background-color: hsla(120, 100%, 50%, 0.3); /* green with 30% opacity */
}

Gunaanad

Isticmaalka midabada iyo magacyada midabada ee CSS waa hab fiican oo lagu qurxiyo boggaaga. Adigoo isticmaalaya magacyada midabada, hexadecimal values, RGB, RGBA, HSL, iyo HSLA, waxaad si fudud u abuuri kartaa bogag midabo leh oo soo jiidasho leh. Ha ilaawin inaad tijaabiso midabada kala duwan si aad u hesho midka ugu habboon boggaaga. Maqaalkan waxaan ku barannay hababka kala duwan ee midabada loogu isticmaalo CSS, waxaadna hadda awoodi doontaa inaad si kalsooni leh u isticmaasho midabada boggaaga.

Maqaalkan waa kii saddexaad ee taxanaha CSS. Waxaan rajeynayaa in aad ka faa'iideysatay casharkaan oo aad isku dayi doonto inaad midabada kala duwan ku isticmaasho mashruucaaga. Haddii aad su'aalo qabto ama aad u baahan tahay caawimo dheeraad ah, fadlan ha ka laba labeyn inaad nala soo xiriirto.

Waxaan kugu dhiirigelineynaa in aad sii wado barashada CSS iyo ku celcelinta casharada si aad u noqoto khabiir CSS ah.