Aina za selector
Katika css selectors unaweza kuzigawa katika makundi ma nne abayo ni kama:-
- Element selectors
- Class selectors
- Id selectors
- Group selectos
- 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, lakini haiwezi kuwa na Id zaidi ya Moja.
Pia id huzingatiwa mwanzo kuliko class wakati ukurasa wa wavuti unapofunguliwa kwenye browser.
Aw
Uandishi wa Id
Uandishi wa ID Haina utofauti sana na class, tifauti ni kuwa wakati class inaanza na nukta yaani period huku kwenye ID utaanza na alama ya reli yaani hash (#).
Na wakati wa kuuuta kwenye hiyo element ni sawa kama ulivyoiita kwenye class.
#muhimu{
font-size: 200%;
font-Rw: Arial;
color: red;
}
Mfano
<html lang="sw">
<head>
<title>Bongoclass</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="muhimu">Karibu bongoclass</p>
</body>
</html>
4. Group selectors
hizi ni selector ambazo Zina target element zaidi ya Moja. Tulisha zungunzia hili kwenye somo lililopita. Hapa nitakuletea mifano TU uone.
Kwa mfano unataka ku target element hizi tu (p, u, b, i) na unataka zote ziwe na style Moja. Hapa ndipo tutatumia group selectors
p,b,u,i{
font-size: 200%;
font-family: Arial;
color: red;
}
Kwenye html weka hizi
<html lang="sw">
<head>
<title>Bongoclass</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>Karibu <i>bongoclass</i></div>
</body>
</html>
5. Universal selectors
Hii hutumika ku target element zote kwenye faili la html. Hii huandikwa kwa kuanza na alama ya nyota (*).
*{
font-size: 100%;
font-family: Arial;
color: red;
}
Mwisho:
Katika somo linalofuata tutakwenda kujifunza kuhusu matumizi ya rangi.
