CSS - somo la 3: syntax za css yaani sheria za uandishi wa css

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 Rajabu
Tarehe: 2024-05-10 14:53:23 Topic: CSS Main: Masomo File: Download PDF Views: 1378

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina     👉2 Kitabu cha Afya     👉3 ai web app     👉4 Simulizi za Hadithi Audio     👉5 Kitau cha Fiqh     👉6 Sira ya Mtume Muhammad (s.a.w)    

Post zinazofanana:

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 12: Width, Height, Max/Min Width na Overflow

Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.

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 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 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...