picha

CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css

Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css

Tumesha jifunza katika masomo ya nyuma jinsi ya kuweka rangi. Rangi inaweza kuwa ni kwa ajilia backround ama kwa ajii ya text. Kama tulivyojifunza huko awali, property background hutumika kwa ajili ya ku set rangi kwa ajili ya background, na propert ya color hutumika ku set rangi ya text

p{

   background: black;

   color: blue;

}

 

Tofauti na hizo mbili kuna nyingine ya kuweka rangi kwenye borders. Hii inaitwa border 

Mfano:

p{

   border: solid #d00c0c;

}

 

Namna za uwekaji warangi

Katika css kuna aina tano za kuweka rangi kwenye faii la html. Njia hizo ni :-

 

  1. Kwa kutumia jina la rangi
  2. Kwa kutumia Hex color
  3. Kwa kutumia RGB
  4. Kwa kutumia HSL
  5. Kwa kutumia HSLA


 

  1. Kwa kutumia jina la rangi:

Kwa kutumia jina la rangi ni kama tulivyofanya hapo juu. Utaitaja rangi hyo kwa jina. Jambo la msingi ni kujuwa tu majina ya hizo rangi kwa ufasaha. Mfano red, blue, black, yellow, green, purple n.k. Nikama tulivyofanya hapo juu.

p{

   background: black;

   color: blue;

}

 

2. Kwa kutumia Hex color

Kuna baadhi ya rangi majina yake huyajui, saa utatumia thamani zake za hex color. Hex color zipo katika namna mbili ambzo ni kwa kutumia herufi ama kwa kutumia namba. Njia yeyote utakayotumia utaanza na alama ya reli yaani hash #. Baada ya kuandika # itafuatiwa na character 6 kama ni herufi ziwe 6 na kama ni namba ziwe 6. 

Mfano:

p{

   background: #000000;

   color: #160ee7;

}

Unaweza kuzi generate mwenyewe kwenye text editor. Ama w3schools wanayo system ya ku generate hex color free.

 

3. Kwa kutumia RGB

RGB ni kifupisho cha maneno Red, Green, Blue. kwa hiyo ni kitendo cha kuchanganya rangi hizo tatu ili kupata rangi nyingine. Kwa mfano ukicanganya rangi nyekundu, ya kijani na buluu kwa uwiano sawa utapata rangi nyeupe.

p{

   background: rgb(255, 255, 255);

   color: rgb(0,0,0);

}

 

Kwenye css editor itaonekana hivyo

 

Thamani za RGB huwekwa kutoka 0 hadi 255. Yeyote itakayokuwa kubwa kuliko wenzie ndio itaonekana sana. Kwa mfano ...

Ingia sasa ili uweze kusoma makala hii yote.

Jiunge nasi WhatsApp kupata update zetu
Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2024-05-10 14:53:23 Topic: CSS Main: Masomo File: Download PDF Views 2155

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Kitabu cha Afya     👉2 Simulizi za Hadithi Audio     👉3 Bongolite - Game zone - Play free game     👉4 Tafasiri ya Riyadh Swalihina     👉5 kitabu cha Simulizi     👉6 Sira ya Mtume Muhammad (s.a.w)    

Post zinazofanana:

CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)

Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.

Soma Zaidi...
CSS - SOMO LA 28: CSS Timing Functions

Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.

Soma Zaidi...
CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Soma Zaidi...
CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

Soma Zaidi...
CSS - SOMO LA 27: Kutumia @import Katika CSS

Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.

Soma Zaidi...
CSS - SOMO LA 20: Media Queries na Responsive Design

Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.

Soma Zaidi...