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 :-
- Kwa kutumia jina la rangi
- Kwa kutumia Hex color
- Kwa kutumia RGB
- Kwa kutumia HSL
- Kwa kutumia HSLA
- 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 ...
Umeionaje Makala hii.. ?
Share On:
👉1 Sira ya Mtume Muhammad (s.a.w) 👉2 ai web app 👉3 Bongolite - Game zone - Play free game 👉4 kitabu cha Simulizi 👉5 Madrasa kiganjani 👉6 Dua za Mitume na Manabii
Post zinazofanana:
CSS - SOMO LA 15: Float na Clear katika CSS
Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...CSS - SOMO LA 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition
Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
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 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...CSS - somo la 3: syntax za css yaani sheria za uandishi wa css
Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
Soma Zaidi...