CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS
Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
? 1. background-color
Inatumika kuweka rangi ya nyuma ya element.
div {
background-color: lightblue;
}
? 2. background-image
Inatumika kuweka picha kama background ya element.
body {
background-image: url("picha.jpg");
}
? 3. background-repeat
Kwa kawaida picha ya background hurudiwa (repeat). Kama hutaki irudiwe, tumia:
body {
background-image: url("picha.jpg");
background-repeat: no-repeat;
}
Chaguo zingine:
-
repeat-x: Rudiwa upande wa mlalo -
repeat-y: Rudiwa upande wa wima -
repeat: Rudiwa pande zote (default) -
no-repeat: Haijirudii
? 4. background-position
Inaelekeza picha iwekwe wapi. Mfano:
body {
background-image: url("picha.jpg");
background-position: center;
}
Chaguzi maarufu: top, bottom, left, right, center, au vipimo: 50px 100px
? 5. background-size
Inadhibiti ukubwa wa picha ya background.
body {
background-image: url("picha.jpg");
background-size: cover;
}
Chaguzi:
-
auto -
cover: picha inajaza eneo lote -
contain: picha inaingia yote ndani ya eneo -
px/percentage kama
100px 200px
? 6. background-attachment
Inadhibiti kama background inabaki palepale au inasogea pamoja na ukurasa.
body {
background-image: url("picha.jpg");
background-attachment: fixed;
}
Chaguzi:
-
scroll: Inasogea na ukurasa -
fixed: Inabaki...
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
Share On:
👉1 Simulizi za Hadithi Audio 👉2 Tafasiri ya Riyadh Swalihina 👉3 kitabu cha Simulizi 👉4 web hosting 👉5 Dua za Mitume na Manabii 👉6 Madrasa kiganjani
Post zinazofanana:
CSS - SOMO LA 18: Grid Layout
Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
Soma Zaidi...CSS - SOMO LA 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...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 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 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...