picha

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

Sheria za uandishi wa css yaani syntax za css.

Css ni moja katika lugha za ki kompyuta (computer language) ambayo ina sheria zilizo rahisi sana na ni chache. Ukishazijuwa hizo basi mabo yote yatakuwa sawa. 

 

Sheria za kuandka css zimezama kwenye mambo makuu mawili tu ambayo ni selector na declaration. Yaani code zote za css unaweza kuzigawa kwenye sehemu kuu hizi mbili ambazo ni selector na declaration.

 

Selectors: hii ni sehemu ambayo yenyewe inahusisha element za html. Yaani hapa ndipo tunakwenda kujuwa je hizo code za css zinahud element gani. Mfano ukisema

haloo

katika code hizi selector ni

ambapo inaonesha kuwa tuna target paragraph.

 

Declaration: hii ni sehemu ambayo inakwenda kuweka code za css. Declaration yenyewe imegawanyika katika sehemu kuu mbili ambazo ni property  na value. Kwa mfano katika mfano niliotoa hapo juu declaration ni color:yellow ambapo tunapata color ni property na yellow ni value.

 

Kwa ufupi selector ina kuwa na tag husika ya html na declaration inakuwa na protery pamoja na value. Declaration inakuwa kwenye mabano ya {}  kama utatumia internal css ama external css.

credit: w3schools

 

Selector inaweza kuwa zaidi ya moja na declaration pia inawezakuwa zaidi ya moja. Jambo la kuzingatia nikiwa unapotumia selector zaidi ya Moja utatakiwa kuzitenganisha kwa alama ya koma (,). Na unapotumia declation zaidi ya Moja utatenganisha kwa kutumia semicolon (;). Angalia mfano hapo chini

p, h1, u, i, b{

   color:blue;

   font-size:200%;

   background: red;

}

Katika code hizi selectors ni p, h1, u, i na b hizi zinatarget tag za html. Tag hizo ni <p>, <h1>, <u>, <i> na <b>. Kwa pamoja element hizo zote zitafuata style hiyo popote zitakapotumiwa.

 

Pia hapo kuna declaration tatu ambazo ni color:blue yenye property color na value blue, font-size:100% yenye property font-size na value 100%, na ya mwisho ni background-color:red yenye property background-color na value red.

 

Baada ya kutambuwa...

Ingia sasa ili uweze kusoma makala hii yote.

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 1314

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Madrasa kiganjani     👉2 Sira ya Mtume Muhammad (s.a.w)     👉3 kitabu cha Simulizi     👉4 ai web app     👉5 Bongolite - Game zone - Play free game     👉6 web hosting    

Post zinazofanana:

CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Soma Zaidi...
Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni

Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.

Soma Zaidi...
CSS - SOMO LA 29: CSS z-index na Stacking Context

Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga

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...
CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)

Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.

Soma Zaidi...
CSS - SOMO LA 32: Custom Fonts na @font-face

Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.

Soma Zaidi...