W3.CSS matn
W3.CSS matn klasslari
W3.CSS matnni tekislash va unga uslub berish uchun oddiy klasslarni taqdim etadi.
Matn klasslarini ranglar, shriftlar, o‘lchamlar va boshqa W3.CSS klasslari bilan birlashtirish mumkin.
Matnni tekislash
Element ichida matnni joylashtirish uchun W3.CSS tekislash klasslaridan foydalaning.
| Klass | Tavsif |
|---|---|
w3-left-align |
Matnni chapga tekislaydi. |
w3-center |
Matnni markazga tekislaydi. |
w3-right-align |
Matnni o‘ngga tekislaydi. |
Chapga tekislangan matn.
Markazga tekislangan matn.
O‘ngga tekislangan matn.
Misol
<p class="w3-left-align">Left aligned text.</p>
<p class="w3-center">Centered text.</p>
<p class="w3-right-align">Right aligned text.</p>
O‘zingiz sinab ko‘ring »
Kontentni markazlashtirish
w3-center klassi nafaqat matnni markazlashtira oladi.
U rasmlar va tugmalar kabi qatoriy (inline) kontentni ham markazlashtira oladi.
Markazlashtirilgan kontent
Markazlashtirilgan qisqa matn.
Misol
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="Car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
<button class="w3-button w3-black">Learn More</button>
</div>
O‘zingiz sinab ko‘ring »
w3-center element ichidagi kontentni markazlashtiradi.
Keng matn
w3-wide klassi harflar orasidagi masofani kattalashtiradi.
Bu oddiy matn.
Bu keng matn.
Misol
<p>This is normal text.</p>
<p class="w3-wide">This is wide text.</p>
O‘zingiz sinab ko‘ring »
Keng matn sarlavhalar, yorliqlar, menyular va boshqa qisqa matnlar uchun qulay.
Matn shaffofligi
w3-opacity klassi elementni qisman shaffof qiladi.
Undan matnni kamroq ko‘zga tashlanadigan qilish uchun foydalanish mumkin.
Asosiy sarlavha
Oddiy matn.
Kamroq muhim matn.
Misol
<h2>Main Heading</h2>
<p>Normal text.</p>
<p class="w3-opacity">Less important text.</p>
O‘zingiz sinab ko‘ring »
Matn klasslarini birlashtirish
Matn klasslarini shrift, o‘lcham va rang klasslari bilan birlashtirish mumkin.
TRAVEL
Explore the world.
New destinations every week.
Misol
<h2 class="w3-center w3-wide w3-text-blue">TRAVEL</h2>
<p class="w3-center w3-large">Explore the world.</p>
<p class="w3-center w3-opacity">New destinations every week.</p>
O‘zingiz sinab ko‘ring »
Katta kirish sarlavhasini (hero) yaratish
Matn yordamchi klasslari ayniqsa sarlavhalar va kirish qismidagi kontent uchun foydali.
DISCOVER
Explore Norway
Mountains, fjords, cities, and northern lights.
Misol
<div class="w3-container w3-black w3-center w3-padding-32">
<p class="w3-wide w3-opacity">DISCOVER</p>
<h1 class="w3-xxxlarge">Explore Norway</h1>
<p class="w3-large">Mountains, fjords, cities, and northern lights.</p>
<button class="w3-button w3-white">Start Exploring</button>
</div>
O‘zingiz sinab ko‘ring »
Ranglar bilan matn shaffofligi
w3-opacity klassi barcha ranglar bilan ishlashga mo‘ljallangan:
Matn shaffofligi
Matn shaffofligi
Matn shaffofligi
Misol
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
<div class="w3-panel w3-orange">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
<div class="w3-panel w3-black">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
O‘zingiz sinab ko‘ring »
Matn soyasi
Matn soyalari CSS’ning text-shadow xususiyati yordamida yaratiladi.
Matn soyasi
Maxsus matn effektlari
Matn shaffofligi + qalin
Sariq matn + soya + qalin
To‘q sariq matn + soya + qalin
Misol
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b>
</h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b>
</h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b>
</h1>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!