Ukukhangisa Okuqukethwe
Izici ze-CSS3 Ongeke Uzazi Ngazo: I-Flexbox, Izakhiwo Zegridi, Izakhiwo Zangokwezifiso, Ushintsho, Opopayi, Nezingemuva Eziningi
AmaSpredishithi esitayela se-Cascading (CSS) qhubeka nokushintsha futhi izinguqulo zakamuva zingase zibe nezici ongase ungazi nakancane ngazo. Nazi ezinye zentuthuko enkulu kanye nezindlela ezethulwe nge-CSS3, kanye nezibonelo zekhodi:
- I-Flexible Box Layout (Flexbox): imodi yesakhiwo ekuvumela ukuthi udale izakhiwo eziguquguqukayo neziphendulayo zamakhasi ewebhu. Nge-flexbox, ungakwazi ukuqondanisa kalula futhi usabalalise izinto ngaphakathi kwesiqukathi. n lesi sibonelo, i
.container
ukusetshenziswa kwekilasidisplay: flex
ukuze unike amandla imodi yesakhiwo se-flexbox. Ijustify-content
impahla isethwe ukuzecenter
ukubeka phakathi nendawo i-elementi yengane phakathi kwesiqukathi. Ialign-items
impahla isethwe ukuzecenter
ukuze umise phakathi ngokuqondile into yengane. I.item
ikilasi lisetha umbala wangemuva kanye ne-padding ye-elementi yengane.
i-HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Result
Isici Esimaphakathi
- Isakhiwo segridi: enye imodi yesakhiwo ekuvumela ukuthi udale izakhiwo eziyinkimbinkimbi ezisekelwe kugridi zamakhasi ewebhu. Ngegridi, ungacacisa imigqa namakholomu, bese ubeka izici ngaphakathi kwamaseli athile wegridi. Kulesi sibonelo, i-
.grid-container
ukusetshenziswa kwekilasidisplay: grid
ukuze unike amandla imodi yesakhiwo segridi. Igrid-template-columns
impahla isethwe ukuzerepeat(2, 1fr)
ukwakha amakholomu amabili anobubanzi obulinganayo. Igap
impahla isetha isikhala phakathi kwamaseli egridi. I.grid-item
ikilasi libeka umbala wangemuva kanye nokuphediswa kwezinto zegridi.
i-HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Result
Into 1
Into 2
Into 3
Into 4
- Izinguquko: I-CSS3 yethule inani lezakhiwo ezintsha namasu okudala izinguquko emakhasini ewebhu. Ngokwesibonelo, i
transition
impahla ingasetshenziswa ukwenza izinguquko kuzakhiwo ze-CSS ngokuhamba kwesikhathi. Kulesi sibonelo, i-.box
ikilasi libeka ububanzi, ubude, nombala wangemuva wokuqala wesici. Itransition
impahla isethwe ukuzebackground-color 0.5s ease
ukuze uphilise izinguquko kumbala ongemuva ngaphezu kwesigamu sesekhondi ngokusebenza kwesikhathi sokungena kalula. I.box:hover
ikilasi lishintsha umbala wangemuva we-elementi uma isikhombi segundane siphezu kwaso, okucupha ukugqwayiza koshintsho.
i-HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Result
I-Hover
Lapha!
Lapha!
- Izithombe: I-CSS3 yethule inani lezakhiwo ezintsha namasu okudala izithombe ezinyakazayo emakhasini ewebhu. Kulesi sibonelo, sengeze ukugqwayiza sisebenzisa i-
animation
impahla. Sichaze a@keyframes
umthetho wokugqwayiza, ocacisa ukuthi ibhokisi kufanele lijikeleze ukusuka ku-0 degrees ukuya ku-90 degrees esikhathini esingamasekhondi angu-0.5. Lapho ibhokisi lihanjiswa phezulu, i-spin
ukugqwayiza kusetshenziselwa ukuzungezisa ibhokisi. Ianimation-fill-mode
impahla isethwe ukuzeforwards
ukuqinisekisa ukuthi isimo sokugcina sokugqwayiza siyagcinwa ngemva kokuqeda.
i-HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Result
I-Hover
Lapha!
Lapha!
- Izakhiwo Zangokwezifiso ze-CSS: Obeye aziwe njengo Izinguquko ze-CSS, izakhiwo ngokwezifiso zethulwa ku-CSS3. Zikuvumela ukuthi uchaze futhi usebenzise izakhiwo zakho zangokwezifiso ku-CSS, ezingasetshenziswa ukugcina nokusebenzisa kabusha amanani kuwo wonke amashidi akho esitayela. Okuguquguqukayo kwe-CSS kukhonjwa ngegama eliqala ngamadeshi amabili, njengokuthi
--my-variable
. Kulesi sibonelo, sichaza okuguquguqukayo kwe-CSS okubizwa -primary-color futhi sikunikeze inani#007bff
, okuwumbala oluhlaza okwesibhakabhaka ovame ukusetshenziswa njengombala oyinhloko kumiklamo eminingi. Sisebenzise lokhu okuguquguqukayo ukusetha i-background-color
impahla yesici senkinobho, ngokusebenzisa i-var()
umsebenzi nokudlulisa egameni eliguquguqukayo. Lokhu kuzosebenzisa inani lokuguquguquka njengombala ongemuva wenkinobho.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Izizinda Eziningi: I-CSS3 ikuvumela ukuthi ucacise izithombe eziningi zangemuva ze-elementi, enekhono lokulawula ukuma kwayo nokuhleleka kwesitaki. Ingemuva lakhiwe izithombe ezimbili,
red.png
futhiblue.png
, ezilayishwa kusetshenziswa ibackground-image
impahla. Isithombe sokuqala,red.png
, ibekwe ekhoneni elingezansi kwesokudla le-elementi, kuyilapho isithombe sesibili,blue.png
, ibekwe ekhoneni eliphezulu kwesokunxele le-elementi. Ibackground-position
impahla isetshenziselwa ukulawula ukuma kwesithombe ngasinye. Ibackground-repeat
impahla isetshenziselwa ukulawula ukuthi izithombe ziphinda kanjani. Isithombe sokuqala,red.png
, isethwe ukuthi ingaphindi (no-repeat
), kuyilapho isithombe sesibili,blue.png
, isethwe ukuthi iphinde (repeat
).
i-HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}