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 hivy">...
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 Sira ya Mtume Muhammad (s.a.w) 👉2 kitabu cha Simulizi 👉3 Tafasiri ya Riyadh Swalihina 👉4 web hosting 👉5 ai web app 👉6 Kitabu cha Afya
Post zinazofanana:
CSS - SOMO LA 22: CSS Transition na Animation
Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya 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 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
Soma Zaidi...CSS - SOMO LA 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML
katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 16: Flexbox Basics
Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...CSS - SOMO LA 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...