Агуулга маркетинг
Таны мэдэхгүй байж болох CSS3-ийн онцлогууд: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, and Multiple Backgrounds
Загварын каскадын хүснэгтүүд (CSS) үргэлжлүүлэн хөгжиж байгаа бөгөөд сүүлийн үеийн хувилбарууд нь таны мэдэхгүй ч зарим онцлог шинж чанартай байж магадгүй юм. CSS3-д нэвтрүүлсэн томоохон сайжруулалт, аргачлалуудын заримыг кодын жишээнүүдийн хамт энд оруулав.
- Уян хайрцагны зохион байгуулалт (Flexbox): вэб хуудасны уян хатан, хариу үйлдэл үзүүлэх байршлыг бий болгох боломжийг олгодог байршлын горим. Flexbox-ийн тусламжтайгаар та контейнер доторх элементүүдийг хялбархан зэрэгцүүлж, тарааж болно. Энэ жишээн дээр
.container
ангийн хэрэглээdisplay: flex
flexbox байршлын горимыг идэвхжүүлэх. Thejustify-content
өмч гэж тохируулсанcenter
Контейнер доторх хүүхэд элементийг хэвтээ байдлаар төвлөрүүлэх. Thealign-items
өмч гэж тохируулсанcenter
хүүхэд элементийг босоо байдлаар төвлөрүүлэх. The.item
анги нь хүүхдийн элементийн дэвсгэр өнгө, дэвсгэрийг тохируулдаг.
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;
}
үр дүн
Төвлөрсөн элемент
- Сүлжээний зохион байгуулалт: вэб хуудсуудын сүлжээнд суурилсан нарийн төвөгтэй бүдүүвчийг үүсгэх боломжийг олгодог өөр нэг зохион байгуулалтын горим. Сүлжээний тусламжтайгаар та мөр, баганыг тодорхойлж, дараа нь сүлжээний тодорхой нүднүүдэд элементүүдийг байрлуулж болно. Энэ жишээнд,
.grid-container
ангийн хэрэглээdisplay: grid
сүлжээний байршлын горимыг идэвхжүүлэх. Thegrid-template-columns
өмч гэж тохируулсанrepeat(2, 1fr)
ижил өргөнтэй хоёр багана үүсгэх. Thegap
шинж чанар нь торны нүднүүдийн хоорондох зайг тохируулна. The.grid-item
анги нь торны зүйлсийн дэвсгэр өнгө, дэвсгэрийг тохируулдаг.
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;
}
үр дүн
1 зүйл
2 зүйл
3 зүйл
4 зүйл
- Шилжилтүүд: CSS3 нь вэб хуудсууд дээр шилжилт хийх хэд хэдэн шинэ шинж чанар, техникийг нэвтрүүлсэн. Жишээлбэл,
transition
шинж чанарыг цаг хугацааны явцад CSS шинж чанарт өөрчлөлт оруулахад ашиглаж болно. Энэ жишээнд,.box
анги нь элементийн өргөн, өндөр, анхны дэвсгэр өнгийг тохируулдаг. Thetransition
өмч гэж тохируулсанbackground-color 0.5s ease
арын дэвсгэрийн өнгөний шинж чанарт өөрчлөлт оруулахад хялбар оруулах хугацаа функцээр хагас секундын дотор хөдөлгөөн хийх. The.box:hover
класс нь хулганы заагч дээр байрлах үед тухайн элементийн дэвсгэр өнгийг өөрчилдөг бөгөөд шилжилтийн хөдөлгөөнт дүрсийг идэвхжүүлдэг.
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;
}
үр дүн
Hover
Энд!
Энд!
- Зургууд: CSS3 нь вэб хуудсан дээр хөдөлгөөнт дүрс үүсгэх хэд хэдэн шинэ шинж чанар, техникийг нэвтрүүлсэн. Энэ жишээнд бид хөдөлгөөнт дүрсийг ашиглан нэмсэн
animation
өмч. Бид тодорхойлсон@keyframes
0 секундын турш хайрцгийг 90 градусаас 0.5 градус хүртэл эргүүлэхийг заасан хөдөлгөөнт дүрсийн дүрэм. Хайрцгийг дээш нь аваачихадspin
хайрцгийг эргүүлэхийн тулд хөдөлгөөнт дүрсийг ашигладаг. Theanimation-fill-mode
өмч гэж тохируулсанforwards
Хөдөлгөөн дууссаны дараа түүний эцсийн төлөвийг хадгалахыг баталгаажуулах.
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;
}
үр дүн
Hover
Энд!
Энд!
- CSS-ийн захиалгат шинж чанарууд: Мөн түүнчлэн CSS хувьсагч, захиалгат шинж чанаруудыг CSS3 дээр нэвтрүүлсэн. Эдгээр нь танд CSS-д өөрийн хувийн шинж чанаруудыг тодорхойлж, ашиглах боломжийг олгодог бөгөөд энэ нь таны загварын хүснэгтэд утгыг хадгалах, дахин ашиглахад ашиглагдана. CSS хувьсагч нь хоёр зураасаар эхэлсэн нэрээр тодорхойлогддог
--my-variable
. Энэ жишээнд бид –primary-color нэртэй CSS хувьсагчийг тодорхойлж, түүнд утгыг өгнө#007bff
, энэ нь цэнхэр өнгө нь олон загварт үндсэн өнгө болдог. Бид энэ хувьсагчийг тохируулахдаа ашигласанbackground-color
товчлуурын элементийн шинж чанарыг ашигланvar()
функц ба хувьсагчийн нэрээр дамжуулна. Энэ нь хувьсагчийн утгыг товчлуурын дэвсгэр өнгө болгон ашиглах болно.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Олон дэвсгэр: CSS3 нь элементийн байрлал, давхарлах дарааллыг хянах чадвартай олон дэвсгэр зургийг зааж өгөх боломжийг олгодог. Арын дэвсгэр нь хоёр зургаас бүрдэх,
red.png
болонblue.png
ашиглан ачаалагдсанbackground-image
өмч. Эхний зураг,red.png
, элементийн баруун доод буланд байрладаг бол хоёр дахь зураг нь,blue.png
, элементийн зүүн дээд буланд байрлана. Thebackground-position
шинж чанар нь зураг бүрийн байршлыг хянахад ашиглагддаг. Thebackground-repeat
шинж чанар нь зургууд хэрхэн давтагдахыг хянахад ашиглагддаг. Эхний зураг,red.png
, давтахгүй байхаар тохируулсан (no-repeat
), хоёр дахь зураг ньblue.png
, давтахаар тохируулсан (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;
}