Marketing ihirangi
Ko nga ahuatanga CSS3 Kare pea koe e Mohio: Flexbox, Tahora Matiti, Tikanga Ritenga, Whakawhitinga, Hangarite, me nga Papamuri Maha
Ngā Rau Kāhua Ripapa (CSS) kei te whanake tonu, kei nga putanga hou pea etahi ahuatanga kaore koe i te mohio. Anei etahi o nga whakapainga nui me nga tikanga i whakauruhia ki te CSS3, me nga tauira waehere:
- Tahora Pouaka Hangore (Flexbox): he aratau tahora e taea ai e koe te hanga i nga whakatakotoranga ngawari me te urupare mo nga wharangi tukutuku. Ma te flexbox, ka taea e koe te whakatika me te tohatoha huānga ki roto i te ipu. n tnei tauira, te
.container
whakamahi akomangadisplay: flex
kia taea ai te aratau tahora flexbox. Ko tejustify-content
kua whakaritea te taonga kicenter
ki te whakamau whakapae i te huānga tamaiti ki roto i te ipu. Ko tealign-items
kua whakaritea te taonga kicenter
ki te whakatekau i te huānga tamaiti. Ko te.item
ka whakatauhia e te karaehe te tae papamuri me te whariki mo te huānga tamaiti.
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;
}
hua
Huānga Pokapū
- Tahora Mātiti: tetahi atu aratau tahora e taea ai e koe te hanga i nga whakatakotoranga matiti-maiti mo nga wharangi paetukutuku. Mā te mātiti, ka taea e koe te whakapūtā i ngā haupae me ngā tīwae, kātahi ka waiho ngā huānga ki roto i ngā pūtau motuhake o te mātiti. I tenei tauira, ko te
.grid-container
whakamahi akomangadisplay: grid
kia taea ai te aratau tahora matiti. Ko tegrid-template-columns
kua whakaritea te taonga kirepeat(2, 1fr)
kia rua nga pou kia rite te whanui. Ko tegap
Ka tautuhia e te taonga te mokowā i waenga i nga pūtau mātiti. Ko te.grid-item
ka whakatauhia e te karaehe te tae papamuri me te papamuri mo nga mea matiti.
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;
}
hua
Te nama take 1
Te nama take 2
Te nama take 3
Te nama take 4
- Whakawhiti: I whakauruhia e CSS3 etahi ahuatanga hou me nga tikanga mo te hanga whakawhitinga i runga i nga wharangi tukutuku. Hei tauira, ko te
transition
Ka taea te whakamahi taonga ki te whakakorikori i nga huringa i roto i nga taonga CSS i roto i te waa. I tenei tauira, ko te.box
ka whakatauhia e te akomanga te whanui, te teitei, me te tae papamuri tuatahi mo te huānga. Ko tetransition
kua whakaritea te taonga kibackground-color 0.5s ease
ki te whakakorikori i nga huringa ki te taonga tae papamuri i roto i te haurua hekona me te mahi ngawari ki roto ki waho. Ko te.box:hover
ka huri te karaehe i te tae papamuri o te huānga ka eke te tohu kiore ki runga, ka puta te hākoritanga whakawhiti.
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;
}
hua
whakaparo
Anei!
Anei!
- hākoritanga: I whakauruhia e CSS3 te maha o nga ahuatanga me nga tikanga hou mo te hanga pakiwaituhi i runga i nga wharangi paetukutuku. I tenei tauira, kua taapirihia he hākoritanga ma te whakamahi i te
animation
taonga. Kua tautuhia e matou a@keyframes
ture mo te hākoritanga, e tohu ana me huri te pouaka mai i te 0 nga nekehanga ki te 90 nga nekehanga mo te roanga o te 0.5 hēkona. Ka whakairihia te pouaka ki runga ake, ko tespin
ka whakamahia te hākoritanga hei huri i te pouaka. Ko teanimation-fill-mode
kua whakaritea te taonga kiforwards
kia mau tonu te ahua whakamutunga o te hākoritanga i muri i tona otinga.
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;
}
hua
whakaparo
Anei!
Anei!
- Ngā Āhuatanga Ritenga CSS: E mohiotia ano ko Taurangi CSS, i whakauruhia nga ahuatanga ritenga ki CSS3. Ka taea e koe te tautuhi me te whakamahi i o ake ake ahuatanga i roto i te CSS, ka taea te whakamahi ki te penapena me te whakamahi ano i nga uara puta noa i o pepa ahua. Ko nga taurangi CSS ka tautuhia e tetahi ingoa ka timata ki nga tohu e rua, penei
--my-variable
. I roto i tenei tauira, ka tautuhia e matou he taurangi CSS e kiia nei ko –tuatahi-tae ka hoatu he uara o#007bff
, he tae puru e whakamahia ana hei tae tuatahi i roto i nga hoahoa maha. Kua whakamahia e matou tenei taurangi hei tautuhi i tebackground-color
āhuatanga o te huānga pātene, mā te whakamahi i tevar()
mahi me te whakawhiti i te ingoa taurangi. Ka whakamahia te uara o te taurangi hei tae papamuri mo te paatene.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Papamuri Maha: Ko te CSS3 ka taea e koe te tautuhi i nga whakaahua papamuri maha mo tetahi huānga, me te kaha ki te whakahaere i tana tuunga me te raupapa o te raupapa. Ko te papamuri e rua nga whakaahua,
red.png
ablue.png
, ka utaina ma te whakamahi i tebackground-image
taonga. Ko te ahua tuatahi,red.png
, kei te kokonga matau o raro o te huānga, ko te ahua tuarua,blue.png
, kei te kokonga maui o runga o te huānga. Ko tebackground-position
Ka whakamahia nga taonga ki te whakahaere i te tuunga o ia ahua. Ko tebackground-repeat
Ka whakamahia nga taonga ki te whakahaere me pehea te tukurua o nga whakaahua. Ko te ahua tuatahi,red.png
, kua whakaritea kia kaua e tukurua (no-repeat
), ko te whakaahua tuarua,blue.png
, kua whakaritea ki te tukurua (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;
}