-susbaint Margaideachd
Feartan CSS3 air nach fhaod thu a bhith mothachail: Bogsa Flex, Cruth Clèithe, Feartan Custom, Eadar-ghluasadan, Beothachaidhean, agus Ioma Cùl-fhiosrachadh
Bileagan stoidhle cascading (CSS) leantainn air adhart a’ tighinn air adhart agus dh’ fhaodadh gu bheil cuid de fheartan aig na dreachan as ùire air nach eil thu eadhon mothachail. Seo cuid de na prìomh leasachaidhean agus dòighean-obrach a chaidh a thoirt a-steach le CSS3, còmhla ri eisimpleirean còd:
- Cruth bogsa sùbailte (Flexbox): modh cruth a leigeas leat cruth sùbailte agus freagairteach a chruthachadh airson duilleagan lìn. Le flexbox, is urrainn dhut gu furasta eileamaidean a cho-thaobhadh agus a chuairteachadh taobh a-staigh soitheach. n eisimpleir seo, an
.container
cleachdadh clasdisplay: flex
gus modh cruth flexbox a chomasachadh. Tha anjustify-content
seilbh air a shuidheachadh gucenter
gus an eileamaid leanabh taobh a-staigh an t-soithich a mheadhanachadh gu còmhnard. Tha analign-items
seilbh air a shuidheachadh gucenter
gus eileamaid na cloinne a mheadhanachadh gu dìreach. Tha an.item
clas a’ suidheachadh dath cùl-raoin agus pleadhag airson eileamaid na cloinne.
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;
}
toradh
Earrann Meadhanach
- Cruth clèithe: modh cruth eile a leigeas leat dealbhadh iom-fhillte stèidhichte air cliath a chruthachadh airson duilleagan lìn. Le cliath, faodaidh tu sreathan agus colbhan a shònrachadh, agus an uairsin cuir eileamaidean taobh a-staigh ceallan sònraichte den ghriod. Anns an eisimpleir seo, tha an
.grid-container
cleachdadh clasdisplay: grid
gus modh cruth clèithe a chomasachadh. Tha angrid-template-columns
seilbh air a shuidheachadh gurepeat(2, 1fr)
gus dà cholbh den aon leud a chruthachadh. Tha angap
bidh seilbh a’ suidheachadh a’ bheàrn eadar ceallan clèithe. Tha an.grid-item
clas a’ suidheachadh dath cùl-raoin agus pleadhag airson nithean clèithe.
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;
}
toradh
Nì 1
Nì 2
Nì 3
Nì 4
- Eadar-ghluasadan: Thug CSS3 a-steach grunn fheartan agus dhòighean ùra airson eadar-ghluasadan a chruthachadh air duilleagan lìn. Mar eisimpleir, an
transition
faodar seilbh a chleachdadh gus atharrachaidhean ann an togalaichean CSS a bheothachadh thar ùine. Anns an eisimpleir seo, tha an.box
clas a’ suidheachadh leud, àirde, agus dath cùl-raoin tùsail an eileamaid. Tha antransition
seilbh air a shuidheachadh gubackground-color 0.5s ease
gus atharrachaidhean ann an seilbh dath cùl-raoin a bheothachadh thairis air leth diog le gnìomh ùineachaidh furasta a-steach. Tha an.box:hover
bidh clas ag atharrachadh dath cùl-raoin na h-eileamaid nuair a tha puing na luchaige thairis air, a’ piobrachadh beothachadh gluasaid.
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;
}
toradh
iadhadh
An seo!
An seo!
- beòthachaidhean: Thug CSS3 a-steach grunn fheartan agus dhòighean ùra airson beòthachaidhean a chruthachadh air duilleagan lìn. San eisimpleir seo, tha sinn air beòthalachd a chuir ris a’ cleachdadh an
animation
seilbh. Tha sinn air mìneachadh a@keyframes
riaghailt airson a’ bheothachadh, a tha a’ sònrachadh gum bu chòir don bhogsa a bhith a’ tionndadh bho 0 ceum gu 90 ceum thairis air 0.5 diog. Nuair a tha am bogsa air a dhol thairis air, bidh anspin
beothachadh ga chuir an sàs gus am bogsa a thionndadh. Tha ananimation-fill-mode
seilbh air a shuidheachadh guforwards
gus dèanamh cinnteach gu bheilear a 'gleidheadh staid mu dheireadh a' bheothachadh an dèidh dha crìochnachadh.
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;
}
toradh
iadhadh
An seo!
An seo!
- Feartan gnàthaichte CSS: Cuideachd aithnichte mar Caochlaidhean CSS, chaidh feartan àbhaisteach a thoirt a-steach ann an CSS3. Leigidh iad leat na feartan gnàthaichte agad fhèin a mhìneachadh agus a chleachdadh ann an CSS, a ghabhas cleachdadh gus luachan a stòradh agus ath-chleachdadh air feadh do dhuilleagan stoidhle. Tha caochladairean CSS air an comharrachadh le ainm a tha a’ tòiseachadh le dà dhreach, leithid
--my-variable
. San eisimpleir seo, bidh sinn a’ mìneachadh caochladair CSS ris an canar -bun-dath agus bheir sinn luach dha#007bff
, a tha na dath gorm air a chleachdadh gu cumanta mar phrìomh dhath ann an iomadh dealbhadh. Chleachd sinn an caochladair seo gus am faidhle a shuidheachadhbackground-color
seilbh eileamaid putan, le bhith a 'cleachdadh anvar()
gnìomh agus a’ dol seachad san ainm caochlaideach. Cleachdaidh seo luach an caochladair mar an dath cùl airson a’ phutan.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Ioma chùl-fhiosrachadh: Leigidh CSS3 leat grunn dhealbhan cùl-fhiosrachaidh a shònrachadh airson eileamaid, leis a’ chomas smachd a chumail air an òrdugh suidheachaidh agus cruachadh aige. Tha an cùl air a dhèanamh suas de dhà ìomhaigh,
red.png
agusblue.png
, a tha air an luchdachadh le bhith a’ cleachdadh anbackground-image
seilbh. A’ chiad dealbh,red.png
, suidhichte aig oisean gu h-ìosal air an làimh dheis den eileamaid, agus an dàrna ìomhaigh,blue.png
, suidhichte aig oisean gu h-àrd air an taobh chlì den eileamaid. Tha anbackground-position
tha seilbh air a chleachdadh gus smachd a chumail air suidheachadh gach ìomhaigh. Tha anbackground-repeat
Tha seilbh air a chleachdadh gus smachd a chumail air mar a bhios na h-ìomhaighean ag ath-aithris. A’ chiad dealbh,red.png
, air a shuidheachadh gun ath-aithris (no-repeat
), agus an dara dealbh,blue.png
, deiseil airson ath-aithris (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;
}