W3.CSS standart uslublar
Standart holatda chiroyli uslublar
W3.CSS HTML elementlariga toza va o‘qilishi oson standart uslublarni beradi.
Hech qanday W3.CSS klassini qo‘shmasdan turib ham chiroyli ko‘rinishdagi sahifa yaratishingiz mumkin.
Standart holatda o‘qilishi oson
W3.CSS matnni o‘qishni osonlashtirish uchun mo‘ljallangan oddiy standart sozlamalardan foydalanadi.
- Standart shrift o‘lchami — 15px
- Standart shrift — Verdana
- Standart qator balandligi — 1.5
Misol
<h1>My Website</h1>
<h2>Welcome</h2>
<p>This page uses the default W3.CSS styles.</p>
O‘zingiz sinab ko‘ring »
HTML sarlavhalari
W3.CSS barcha HTML sarlavhalariga bir xil uslubdagi shrift va o‘lcham beradi.
Sarlavhalardan ularning ma’nosi va hujjat tuzilmasiga muvofiq foydalaning.
1-sarlavha (36px)
2-sarlavha (30px)
3-sarlavha (24px)
4-sarlavha (20px)
5-sarlavha (18px)
6-sarlavha (16px)
Misol
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
O‘zingiz sinab ko‘ring »
| Sarlavha | Standart o‘lcham |
|---|---|
<h1> |
36px |
<h2> |
30px |
<h3> |
24px |
<h4> |
20px |
<h5> |
18px |
<h6> |
16px |
Shrift o‘lchami klasslari
Sarlavhalar matnni kattalashtirish uchun emas, sarlavha sifatida ishlatilishi kerak.
Boshqa matnlarning o‘lchamini o‘zgartirish kerak bo‘lsa, W3.CSS shrift o‘lchami klasslaridan foydalaning.
w3-tiny
w3-small
w3-medium (standart)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Misol
<p class="w3-tiny">w3-tiny</p>
<p class="w3-small">w3-small</p>
<p class="w3-medium">w3-medium</p>
<p class="w3-large">w3-large</p>
<p class="w3-xlarge">w3-xlarge</p>
<p class="w3-xxlarge">w3-xxlarge</p>
<p class="w3-xxxlarge">w3-xxxlarge</p>
<p class="w3-jumbo">w3-jumbo</p>
O‘zingiz sinab ko‘ring »
Standart uslublar va klasslar
W3.CSS standart uslublari boshlang‘ich ko‘rinishni belgilaydi.
W3.CSS klasslari esa kerak bo‘lganda bu ko‘rinishni o‘zgartirish imkonini beradi.
Standart 1-sarlavha
Standart paragraf matni.
Kattaroq 1-sarlavha
Kattaroq paragraf matni.
Misol
<h1>Default Heading</h1>
<p>Default paragraph text.</p>
<h1 class="w3-xxxlarge">Larger Heading</h1>
<p class="w3-large">Larger paragraph text.</p>
O‘zingiz sinab ko‘ring »
Standart uslublarni qayta belgilash
W3.CSS foydali standart uslublarni taqdim etadi, lekin siz ularni istalgan vaqtda o‘zgartirishingiz mumkin.
Standart uslublarni qayta belgilash uchun o‘z CSS kodingizni W3.CSS’dan keyin qo‘shing.
Misol
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
h1 {font-size: 64px;}
</style>
O‘zingiz sinab ko‘ring »
Eslatma
Agar bitta elementga ikkita CSS qoidasi qo‘llansa, keyinroq yuklangan qoida ustunlik qiladi.
O‘z uslublar jadvalingizdan foydalaning
Kattaroq veb-saytlarda o‘z uslublaringizni alohida CSS faylida saqlang.
Uslublar jadvalingizni W3.CSS’dan keyin yuklang:
Misol
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="myStyle.css">
Endi sizning uslublar jadvalingiz kerak bo‘lganda W3.CSS uslublarini qayta belgilay oladi.
Standart shriftni o‘zgartirish
Standart Verdana shriftini o‘zingizning shriftlar to‘plamingiz (font stack) bilan almashtirishingiz mumkin.
Misol
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
O‘zingiz sinab ko‘ring »
Sarlavhalarning maxsus o‘lchamlari
Misol
h1 {font-size:64px;}
h2 {font-size:48px;}
h3 {font-size:36px;}
h4 {font-size:24px;}
h5 {font-size:20px;}
h6 {font-size:18px;}
O‘zingiz sinab ko‘ring »
Standart shriftni o‘zgartirish
Misol
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: cursive, sans-serif;
}
</style>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!