CSS - somo la 4: Aina za css selecto

CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Aina za selector

Katika css selectors unaweza kuzigawa katika makundi ma nne abayo ni kama:-

  1. Element selectors
  2. Class selectors
  3. Id selectors
  4. Group selectos
  5. Universal selector


 

1. Element selectors

Hizi ni zile selector ambazo zinatarget element za html, kama vile heading kwa <h1>, paragraph kwa <p>, bolding kwa <b> na kuendelea.

b{color: red;

 font-family: "Times New Roman";

 text-align: center;

}

Hii imetagget b

 

2. Class selectors

 

Hizi hutumika wakati ambapo unataka ku target element zaidi ya moja. Unapotumia class selector internal css na external css hazitaweza kufanya kazi katika element husika tu na sio kwa parent element ya hiyo child element. Hii ni nzuri sana kwa kuwa haiwezi kuathiri element nyinginezo kwani haifanyi kazi mpaka iitwe.

 

Uandishi wa class

Kwanza utaweka nukta yaani period (.) ama doti ilifuatiwa na jina la class likifuatiwa na mabano{} ambapo ndani ya mabano hayo ndipo utaweka code za css. Mfano tunatengeneza claaa tutakayoiita muhimu hii itakuwa na style hizi: rangi nyekundu, font 200%, font-family arial

No.muhimu{

   font-size: 200%;

   font-family: Arial;

   color: red;

}

 

Ili kuweza kuitumia class hiyo kwenye element unayo target utaiitwa kwa kuanza kuandika neno class likifuatiwa na alama ya = likufuatiwa na alama za kunukuu, ndani yake weka jina la class. 

<p class="muhimu">Karibu bongoclass</p>

Class hiyo unaweza kuitumia katika element yeyote ile unayohitaji iwe na style hiyo. Na hakuna kikomo juu ya matumiazi yake. Jambo la kuzingatia ni kuwa class itaathiriwa na parent style. Kwa mfano kwenye <body> tuliweka text background colo iwe red, sasa hiyo background color itaendelea kwenye class yetu lamda na sisi kwenye class tu set background ntingine.

 

Pia zingatia kuwa jina la class halitakiwi kuanza na namba ama space (empty space)

 

3. ID selectors

Hizi hutumika pale unapo target element moja tu. Element inaweza kuwa na class zaidi ya Moja, lak...

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: 1217

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina     👉2 kitabu cha Simulizi     👉3 web hosting     👉4 Bongolite - Game zone - Play free game     👉5 Sira ya Mtume Muhammad (s.a.w)     👉6 Dua za Mitume na Manabii    

Post zinazofanana:

CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

Soma Zaidi...
CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)

Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.

Soma Zaidi...
CSS - SOMO LA 17: Flexbox Advanced

Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.

Soma Zaidi...
CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css

Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css

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