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.
Baada ya kujifunza jinsi ya kudhibiti fonti kwenye CSS, hatua inayofuata ni kupamba maandishi ili yawe na mvuto na usomaji bora. Upambaji huu hufanywa kwa kutumia properties za CSS kama text-decoration
, text-shadow
, letter-spacing
, word-spacing
, na text-align
. Hizi husaidia kufanya maandishi yaonekane kwa mtindo maalum au wa kipekee.
text-decoration
Inatumika kuweka mistari kwenye maandishi kama vile mstari wa chini, juu, au mstari wa kupitisha kati.
a {
text-decoration: underline;
}
Chaguzi:
none
– Hakuna mistari
underline
– Mistari ya chini ya maandishi
overline
– Mistari ya juu ya maandishi
line-through
– Mistari katikati ya maandishi
text-shadow
Inatumika kuongeza kivuli kwenye maandishi.
h1 {
text-shadow: 2px 2px 5px gray;
}
Format:text-shadow: horizontal vertical blur-radius color;
horizontal
– umbali wa kivuli upande wa kulia au kushoto
vertical
– umbali wa kivuli juu au chini
blur-radius
– kipenyo cha kivuli
color
– rangi ya kivuli
letter-spacing
Hudhibiti nafasi kati ya kila herufi.
p {
letter-spacing: 2px;
}
Thamani hasi hupunguza nafasi
Thamani chanya huongeza nafasi
word-spacing
Hudhibiti nafasi kati ya maneno.
p {
word-spacing: 10px;
}
text-align
Hudhibiti mpangilio wa maandishi katika mstari.
div {
text-align: center;
}
Chaguzi:
left
– Maandishi yanapangwa upande wa kushoto
right
– Maandishi yanapangwa upande wa kulia
Jiunge nasi WhatsApp kupata update zetu Umeionaje Makala hii.. ? 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. 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. Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia. Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi. Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap. 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. 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. Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
help_outlineZoezi la Maswali
👉1
Kitabu cha Afya
👉2
Madrasa kiganjani
👉3
Simulizi za Hadithi Audio
👉4
Bongolite - Game zone - Play free game
👉5
Sira ya Mtume Muhammad (s.a.w)
👉6
Kitau cha Fiqh
Post zinazofanana:
CSS - SOMO LA 20: Media Queries na Responsive Design
CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
CSS - SOMO LA 24: CSS Variables (Custom Properties)
CSS - somo la 3: syntax za css yaani sheria za uandishi wa css
CSS - SOMO LA 28: CSS Timing Functions
CSS - SOMO LA 16: Flexbox Basics
CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements
CSS - SOMO LA 32: Custom Fonts na @font-face
CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css
CSS - SOMO LA 33: CSS Frameworks