Katika somo hili utajifunza jinsi ya kuweka style mbalimbali kwenye ukurasa wa html
ATTRIBUTE AU TAG YA STYLE
Katika somo lililotangulia tuliweza kuona namna ambavyo attribute zinavyofanya kazi. Pia tuliona aina mbalimbali za attributes na mifano yake. Katika somo hili tutakwenda kuangalia attribute ya style tu. Hii ni moja kati ya mwanzo mzuri wa kujifunza CSS.
Style inaweza kuwekwa ndani ya element na nje ya element. Stayle ikiwa nje ya element inaweza kutumika kwa element zaidi ya moja. Na ikiwa ndani ya element hutumika kwa element husika tu. Wakati mwingine kama kumetokea ufungaji mbaya wa style inaweza kuathiri element nyingi tofauti na makusudiwa.
STYLE INAYOWEKWA NJE YA ELEMENT:
Style ikiwa nje ya element huwekwa kwa kutumia tag ya CSS ambayo ni <style> kisha tribute zote zinakuwa ndani ya tag hii. Kuna faida kubwa ya kutumia style hii ya nje ya element kuliko ya ndani ya element.
Kwa mfano style ya nje ya element hufanya code ziwe nzuri, hupunguza mrundikano wa code ndani ya element pia huweza kuweka stayle kwenye element zaidi ya moja. Hapo chini nitakuletea mifano ya style za nje:-
1.JINSI YA KUWEKA RANGI
Tume jifunza katika masomo yaliotangulia kuwa unapotaka kuweka rangi utatumia attribute ya color. Kwa mfano: <p style=”color:yellow”>hellow</p> katika mfano huu neno hellow litakuwa na rangi nyekundu. Sasa ninataka kuweka kila element na rangi yake. Chukulia mfano una element tag hizi <b>, <p>, <h1> kila moja uwe na rangi yake. Kwa mfano kama huu wa style ya ndani utafanya hivi:-
<b style=”color:yellow”>hellow</b>
<p style=”color:red”>hellow</p>
<h1 style=”color:blue”>hellow</h1>
Sasa kwa kutumia style ya nche utafanya hivi:-
1.Kwanza utaweka tag ya style
2.Utaandika tag mfano p
3.Utaweka bano hili {}
4.Attribute zote ziwe ndani ya hayo mabano
5.Kama utakuwa na attribute zaidi ya moja tengenisha kwa alama hii ;
6.Usisahau kufunga tag ya style.
7.Kisha andika element zako.
MFANO:
<html>
<style>
b {color: yellow}
p {color: red}
h1 {color: blue}
</style>
<b>hellow i'm yellow</b><br>
<p>hellow i'm red</p>
<h1>hellow I'm blue</h1>
</html>
Katika mfano huo utaona maandishi yaliyo kwenye tag ya b ni ya njano, na ya kwenye <p> ni ya wekundu na ya kwenye <h1> ni ya buluu.
2.KUWEKA BACKGROUND COLOR
Kama tulivyoona kwenye mfano wa hapo juu jinsi ya kuweka rangi kwa kutumia style iliyo nje ya element. Na hapa tutaona jinsi ya kutumia style ya nje ya element kueweka background color.
Katika hali ya kawaida background color kwenye element huwekwa kwa kutumia style= kisha utaweka value ya atribute style. Kwa mfano
<p style=”background-color:green”>Hellow I’m green</p> Katika mfano huu maneno haya yatakuwa na rangi ya kijani. Sasa ikiwaninataka kutumia background color moja kwenye element zaidi ya moja, mfano kwenye tag ya <p>, <b> na <I>. Hapa nitatumia kwanza tag ambayo inaweza kubeba tag zote hizo kw amfano unaweza kutumia tag ya <body> lakini hii itaweka backrond kwenye ukurasamzina. Ama unaweza kutumia tag kama <div> hii inaweza kubeba tag nyingi ndani yake. Katika mfano wa hapo chini nitatumia zote mbili <body> na <div>
<html>
<style>
body {background-color: pink;}
</style>
<body>
<p>hellow i'm paragraph</p>
<b>hrllow I'm bolded text</b>
<i>hellow I'm italic</i>
</body>
</html>
Kwa kutumia <div> mfano:-
<html>
<style>
div {background-color: purple;}
</style>
<div>
<p>hellow i'm paragraph</p>
<b>hrllow I'm bolded text</b">...
Je! umeipenda hii post?
Ndio Hapana Save post
Rajabu 
Tarehe 2024-05-10 14:53:23 Topic: HTML
Main: Masomo
File: Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 354
Sponsored links
👉1 kitabu cha Simulizi
👉2 Madrasa kiganjani
👉3 Kitau cha Fiqh
👉4 Sira ya Mtume Muhammad (s.a.w)
👉5 Simulizi za Hadithi Audio
👉6 Kitabu cha Afya
Jinsi ya kutengeneza cheti kwa kutumia HTML
Katika post hii utakwenda kujifunz ajinsi ya kutengeneza cheti kwa kutumia html na css. Soma Zaidi...
HATML - somo la 4: Jinsi ya kutumia tag za html
Katka somo hi utakwenda kujifunza jinsi ya kutumia tag za html ili kupangilia muonekano wa maudhui Soma Zaidi...
haloo word
all haloo Soma Zaidi...
HTML - somo la 7: Vitu vya kuzingatia unapoandika HTML
Katika somo hili utajifunza sehemu muhimu katika faili la HTML kama vile tag, attribute na element Soma Zaidi...
HTML - somo la 12: Sehemu kuu za faili la HTML
Katika somo hili utajifunza kuhusu sehemu kuu za faili la HTML Soma Zaidi...
HTML-somo la 5: Jinsi ya kupangilia munekano wa maudhui kwenye website
Katika somo hili utajifunza Kuweka picha Kuweka rangi Kuweka linki Kupangilia position na alignment ya maandishi Kuongeza ukubwa wa herufi Kukoment Soma Zaidi...
HTML - somo la 16: Jinsi ya ku host website bure
Katika somo hili utakwenda kujifunza jinsi ya ku host website yako bila malipo Soma Zaidi...
HTML - somo la 10: Maana ya HTML attribute na jinsi zinavyofanya kazi
Katika somo hili utakwenda kijifunza kuhusu HTML attributes na jinsi ambavyo zinafanya kazi Soma Zaidi...
HTML - somo la 6: Jinsi ya kuweka menyu kwenye faili la HTML
Katika somo hili utakwenda kujifunza jinsi ya kuweka menyu kwenye faili la html na kuweka rangi ya background. Pia utajifunza kufanya ukurasa uwe responsive yaani uendani na ukubwa wa kifaa. Soma Zaidi...
HTML - somo la 14: Hatua za kutengeneza website
Katika somo hili utakwenda kujifunza jinsi ya kutengeneza website hatuwa kwa hatuwa Soma Zaidi...
HTML - somo la 13: Jinsi ya kugawa ukurasa wa HTML
Katika somo hili utajifunza jinsi ya kugawanya ukurasa wa HTML katika column Soma Zaidi...
HTML - somo la 1: Maana ya HTML na kazi zake
Katika somo hili utajifunza maana ya HTML na jinsi inavyofanya kazi Soma Zaidi...