akoonu Marketing
Awọn ẹya CSS3 O Le Ma Mọ Nipa: Flexbox, Awọn ipilẹ Asopọmọra, Awọn ohun-ini Aṣa, Awọn iyipada, Awọn ohun idanilaraya, ati Awọn ipilẹda Ọpọ
Awọn iwe ara Cascading (CSS) tẹsiwaju lati dagbasoke ati awọn ẹya tuntun le ni diẹ ninu awọn ẹya ti o le ma ṣe akiyesi paapaa. Eyi ni diẹ ninu awọn ilọsiwaju pataki ati awọn ilana ti a ṣe pẹlu CSS3, pẹlu awọn apẹẹrẹ koodu:
- Apoti Apoti Rọ (Flexbox): ipo ipalẹmọ ti o fun ọ laaye lati ṣẹda iyipada ati awọn ipilẹ idahun fun awọn oju-iwe wẹẹbu. Pẹlu flexbox, o le ni rọọrun ṣe deede ati pinpin awọn eroja laarin eiyan kan. n yi apẹẹrẹ, awọn
.container
kilasi ipawodisplay: flex
lati mu ipo ifilelẹ flexbox ṣiṣẹ. Awọnjustify-content
ohun ini ti ṣeto sicenter
lati nâa aarin omo ano laarin awọn eiyan. Awọnalign-items
ohun ini ti ṣeto sicenter
to inaro aarin omo ano. Awọn.item
kilasi kn lẹhin awọ ati òwú fun ano ọmọ.
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;
}
esi
Ano aarin
- Ifilelẹ akoj: Ipo ipalemo miiran ti o fun ọ laaye lati ṣẹda awọn ipilẹ-ipilẹ akoj eka fun awọn oju-iwe wẹẹbu. Pẹlu akoj, o le pato awọn ori ila ati awọn ọwọn, ati lẹhinna gbe awọn eroja sinu awọn sẹẹli kan pato ti akoj. Ni yi apẹẹrẹ, awọn
.grid-container
kilasi ipawodisplay: grid
lati mu ipo ifilelẹ akoj ṣiṣẹ. Awọngrid-template-columns
ohun ini ti ṣeto sirepeat(2, 1fr)
lati ṣẹda awọn ọwọn meji ti iwọn dogba. Awọngap
ohun-ini ṣeto aaye laarin awọn sẹẹli akoj. Awọn.grid-item
kilasi ṣeto awọ abẹlẹ ati fifẹ fun awọn ohun akoj.
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;
}
esi
Nkan 1
Nkan 2
Nkan 3
Nkan 4
- Awọn iyipada: CSS3 ṣafihan nọmba awọn ohun-ini titun ati awọn ilana fun ṣiṣẹda awọn iyipada lori awọn oju-iwe wẹẹbu. Fun apẹẹrẹ, awọn
transition
ohun-ini le ṣee lo lati ṣe igbesi aye awọn ayipada ninu awọn ohun-ini CSS lori akoko. Ni yi apẹẹrẹ, awọn.box
kilasi ṣeto iwọn, giga, ati awọ abẹlẹ ibẹrẹ fun eroja naa. Awọntransition
ohun ini ti ṣeto sibackground-color 0.5s ease
lati ṣe ere awọn ayipada si ohun-ini awọ abẹlẹ lori idaji iṣẹju-aaya pẹlu iṣẹ akoko irọrun-jade. Awọn.box:hover
kilasi ayipada awọn lẹhin awọ ti awọn ano nigbati awọn Asin ijuboluwole jẹ lori o, nfa iwara orilede.
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;
}
esi
Pababa
Nibi!
Nibi!
- awọn ohun idanilaraya: CSS3 ṣafihan nọmba awọn ohun-ini tuntun ati awọn ilana fun ṣiṣẹda awọn ohun idanilaraya lori awọn oju-iwe wẹẹbu. Ninu apẹẹrẹ yii, a ti ṣafikun iwara nipa lilo awọn
animation
ohun ini. A ti sọ asọye a@keyframes
ofin fun iwara, eyi ti o pato wipe apoti yẹ ki o n yi lati 0 iwọn si 90 iwọn lori kan iye ti 0.5 aaya. Nigbati awọn apoti ti wa ni nràbaba lori, awọnspin
iwara ti wa ni loo lati yi apoti. Awọnanimation-fill-mode
ohun ini ti ṣeto siforwards
lati rii daju pe ipo ikẹhin ti ere idaraya ti wa ni idaduro lẹhin ti o pari.
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;
}
esi
Pababa
Nibi!
Nibi!
- Awọn ohun-ini Aṣa ti CSS: Tun mọ bi CSS oniyipada, Awọn ohun-ini aṣa ni a ṣe ni CSS3. Wọn gba ọ laaye lati ṣalaye ati lo awọn ohun-ini aṣa tirẹ ni CSS, eyiti o le ṣee lo lati fipamọ ati tun lo awọn iye jakejado awọn iwe aṣa rẹ. Awọn oniyipada CSS jẹ idanimọ nipasẹ orukọ kan ti o bẹrẹ pẹlu dashes meji, gẹgẹbi
--my-variable
. Ninu apẹẹrẹ yii, a ṣe asọye oniyipada CSS kan ti a pe ni -primary-color ati fun ni iye ti#007bff
, eyi ti o jẹ awọ buluu ti a lo gẹgẹbi awọ akọkọ ni ọpọlọpọ awọn aṣa. A ti lo oniyipada yii lati ṣetobackground-color
ohun ini ti a bọtini ano, nipa lilo awọnvar()
iṣẹ ati ki o ran ni ayípadà orukọ. Eyi yoo lo iye ti oniyipada bi awọ abẹlẹ fun bọtini naa.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Awọn Ipilẹṣẹ Ọpọ: CSS3 faye gba o lati pato ọpọ awọn aworan lẹhin fun ohun ano, pẹlu awọn agbara lati sakoso awọn oniwe-ipo ati stacking ibere. Ipilẹlẹ jẹ ti awọn aworan meji,
red.png
atiblue.png
, eyi ti o ti kojọpọ lilo awọnbackground-image
ohun ini. Aworan akọkọ,red.png
, ti wa ni ipo ni igun apa ọtun ti nkan naa, lakoko ti aworan keji,blue.png
, wa ni ipo ni igun oke osi ti eroja. Awọnbackground-position
A lo ohun-ini lati ṣakoso ipo ti aworan kọọkan. Awọnbackground-repeat
ohun ini ti lo lati sakoso bi awọn aworan tun. Aworan akọkọ,red.png
, ti ṣeto lati ma tun ṣe (no-repeat
), lakoko ti aworan keji,blue.png
, ti ṣeto lati tun (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;
}