Marketing okhutira
Ma CSS3 Omwe Simungawadziwe: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, and Multiple Backgrounds
Mapepala amtundu wa Cascading (CSS) pitilizani kusinthika ndipo mitundu yaposachedwa ikhoza kukhala ndi zina zomwe mwina simukuzidziwa. Nazi zina mwazowongolera zazikulu ndi njira zomwe zidayambitsidwa ndi CSS3, pamodzi ndi zitsanzo zamakhodi:
- Masanjidwe a Bokosi Osinthika (Flexbox): mawonekedwe omwe amakulolani kuti mupange masanjidwe osinthika komanso omvera amasamba. Ndi flexbox, mutha kugwirizanitsa ndi kugawa zinthu mosavuta mu chidebe. n chitsanzo ichi,
.container
magalasi ogwiritsira ntchitodisplay: flex
kuti mutsegule mawonekedwe a flexbox. Thejustify-content
katundu wakhazikitsidwacenter
kuti horizontally pakati chinthu mwana mu chidebe. Thealign-items
katundu wakhazikitsidwacenter
kuti vertically pakati chinthu mwana. The.item
kalasi imayika mtundu wakumbuyo ndi padding kwa chinthu chamwana.
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;
}
chifukwa
Centered Element
- Kapangidwe ka gridi: njira ina yosinthira yomwe imakulolani kuti mupange masanjidwe ovuta a gridi amasamba. Ndi gridi, mutha kufotokoza mizere ndi zipilala, ndikuyika zinthu m'maselo enieni a gululi. Mu chitsanzo ichi, a
.grid-container
magalasi ogwiritsira ntchitodisplay: grid
kuti mutsegule mawonekedwe a grid. Thegrid-template-columns
katundu wakhazikitsidwarepeat(2, 1fr)
kupanga mizati iwiri yofanana m'lifupi. Thegap
katundu amakhazikitsa malo pakati pa ma cell a grid. The.grid-item
kalasi imayika mtundu wakumbuyo ndi zotchingira za zinthu za gridi.
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;
}
chifukwa
Nkhani 1
Nkhani 2
Nkhani 3
Nkhani 4
- Zosintha: CSS3 idabweretsa zatsopano zingapo ndi njira zopangira masinthidwe pamasamba. Mwachitsanzo, a
transition
katundu angagwiritsidwe ntchito kusintha kusintha kwa CSS katundu pakapita nthawi. Mu chitsanzo ichi, a.box
kalasi imayika m'lifupi, kutalika, ndi mtundu wakumbuyo wa chinthucho. Thetransition
katundu wakhazikitsidwabackground-color 0.5s ease
kupangitsa kusintha kwamtundu wakumbuyo kupitilira theka la sekondi ndikutha kugwiritsa ntchito nthawi. The.box:hover
class imasintha mtundu wakumbuyo wa chinthucho pomwe cholozera cha mbewa chili pamwamba pake, ndikuyambitsa makanema ojambula.
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;
}
chifukwa
fungatirani
Pano!
Pano!
- makanema ojambula pamanja: CSS3 idabweretsa zatsopano zingapo ndi njira zopangira makanema ojambula pamasamba. Mu chitsanzo ichi, tawonjezera makanema ojambula pogwiritsa ntchito fayilo ya
animation
katundu. Tafotokoza a@keyframes
lamulo la makanema ojambula, lomwe limatanthawuza kuti bokosi liyenera kuzungulira kuchokera ku madigiri 0 mpaka 90 pa nthawi ya masekondi 0.5. Pamene bokosi likusunthidwa pamwamba, ndispin
makanema ojambula amagwiritsidwa ntchito kuzungulira bokosi. Theanimation-fill-mode
katundu wakhazikitsidwaforwards
kuwonetsetsa kuti mawonekedwe omaliza a makanema amasungidwa akamaliza.
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;
}
chifukwa
fungatirani
Pano!
Pano!
- CSS Custom Properties: Amadziwikanso monga Zosintha za CSS, katundu wamba adayambitsidwa mu CSS3. Amakulolani kutanthauzira ndikugwiritsa ntchito zomwe mumakonda mu CSS, zomwe zitha kugwiritsidwa ntchito kusunga ndikugwiritsanso ntchito zikhalidwe pamapepala anu. Zosintha za CSS zimadziwika ndi dzina lomwe limayamba ndi mizere iwiri, monga
--my-variable
. Muchitsanzo ichi, timatanthauzira mtundu wa CSS wotchedwa -primary-color ndikuupatsa mtengo wake#007bff
, womwe ndi mtundu wa buluu womwe umagwiritsidwa ntchito kwambiri ngati mtundu woyamba muzojambula zambiri. Tagwiritsa ntchito variable iyi kukhazikitsabackground-color
katundu wa chinthu batani, pogwiritsa ntchitovar()
ntchito ndi kudutsa mu dzina losinthika. Izi zidzagwiritsa ntchito mtengo wosinthika ngati mtundu wakumbuyo kwa batani.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Mbiri Yakale: CSS3 imakulolani kuti mutchule zithunzi zakumbuyo zingapo za chinthu, ndikutha kuwongolera kayimidwe kake ndi masanjidwe ake. Kumbuyo kumapangidwa ndi zithunzi ziwiri,
red.png
ndiblue.png
, zomwe zimayikidwa pogwiritsa ntchitobackground-image
katundu. Chithunzi choyamba,red.png
, ili pansi kumanja kwa chinthucho, pomwe chithunzi chachiwiri,blue.png
, ili kumanzere kumanzere kwa chinthucho. Thebackground-position
katundu amagwiritsidwa ntchito kuwongolera malo a chithunzi chilichonse. Thebackground-repeat
katundu amagwiritsidwa ntchito kuwongolera momwe zithunzizo zimabwereza. Chithunzi choyamba,red.png
, yakhazikitsidwa kuti isabwereze (no-repeat
), pamene chithunzi chachiwiri,blue.png
, yakhazikitsidwa kuti ibwereze (repeat
).
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;
}