W3.CSS bilan tanishuv
W3.CSS nima?
W3.CSS — zamonaviy va moslashuvchan veb-saytlar yaratish uchun mo‘ljallangan CSS freymvorki.
U ranglar, maketlar, kartochkalar, tugmalar, jadvallar, formalar va boshqa ko‘plab elementlar uchun tayyor klasslarni taqdim etadi.
W3.CSS standart CSS asosida yaratilgan va JavaScript kutubxonasini talab qilmaydi.
W3.CSS kichik, tez va undan foydalanish oson.
W3.CSS’dan foydalanishni boshlash
W3.CSS’dan foydalanish uchun HTML sahifangizning <head> bo‘limiga quyidagi qatorni qo‘shing:
Misol
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
Sizga kerak bo‘lgan hamma narsa shu.
Endi HTML kodingizda W3.CSS klasslaridan foydalanishingiz mumkin.
Birinchi W3.CSS sahifangiz
W3.CSS klasslari w3- bilan boshlanadi.
Quyidagi misolda sarlavha qismi, biroz kontent va tugma yaratish uchun W3.CSS klasslaridan foydalanilgan:
Misol
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
</head>
<body>
<div class="w3-container w3-teal">
<h1>My Website</h1>
</div>
<div class="w3-container">
<h2>Welcome</h2>
<p>This page is styled with W3.CSS.</p>
<button class="w3-button w3-black">Learn More</button>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
W3.CSS qanday ishlaydi
W3.CSS HTML elementlariga klass nomlarini qo‘shish orqali ularga uslub beradi.
Masalan, oddiy HTML tugmasi quyidagicha ko‘rinadi:
HTML tugmasi
<button>Click Me</button>
w3-button klassini qo‘shing:
W3.CSS tugmasi
<button class="w3-button w3-black">Click Me</button>
Uslub berish ishini W3.CSS o‘zi bajaradi.
W3.CSS klasslarini birlashtirish
W3.CSS klasslari birgalikda ishlashga mo‘ljallangan.
Element ko‘rinishini o‘zgartirish uchun bir nechta klassni birlashtirishingiz mumkin.
Hello W3.CSS
Ichki bo‘shliq va soyaga ega ko‘k kartochka.
Misol
<div class="w3-card w3-blue w3-padding">
<h2>Hello W3.CSS</h2>
<p>A blue card with padding and a shadow.</p>
</div>
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda:
w3-cardsoya qo‘shadiw3-blueko‘k rang beradiw3-paddingkartochka ichida bo‘shliq qo‘shadi
Ana shu oddiy g‘oya W3.CSS’ning asosini tashkil etadi.
Tabiatan moslashuvchan
Zamonaviy veb-saytlar har qanday o‘lchamdagi ekranlarda ishlashi kerak.
W3.CSS kompyuterlar, planshetlar va mobil telefonlar uchun moslashuvchan maketlar yaratishga mo‘ljallangan klasslarni o‘z ichiga oladi.
Eslatma
W3.CSS misollarini sinab ko‘rayotganda brauzer oynasining o‘lchamini o‘zgartirib ko‘ring.
Ko‘pincha maket avtomatik ravishda moslashayotganini ko‘rasiz.
Moslashuvchan dizaynni ushbu darslikning keyingi qismlarida batafsil o‘rganasiz.
Flexbox va Grid yordamida zamonaviy maketlar
W3.CSS ham CSS Flexbox’ni, ham CSS Grid’ni qo‘llab-quvvatlaydi.
Flexbox
Elementlarni qator yoki ustun bo‘ylab joylashtirish va tekislash uchun w3-flex klassidan foydalaning.
Grid
Qator va ustunlardan iborat maketlar yaratish uchun w3-grid klassidan foydalaning.
Hozircha Flexbox yoki Grid’ni o‘rganishingiz shart emas.
Darslikning keyingi qismlarida ular yordamida haqiqiy maketlar yaratamiz.
JavaScript kutubxonasi talab qilinmaydi
W3.CSS — CSS freymvorki.
U hech qanday JavaScript kutubxonasiga bog‘liq emas.
W3.CSS komponentlari faqat HTML va CSS yordamida ishlaydi.
Interaktiv xatti-harakat uchun JavaScript kerak bo‘lganda, standart JavaScript’dan bevosita foydalanishingiz mumkin.
W3.CSS’ni o‘z CSS kodingiz bilan birga ishlatish
W3.CSS o‘z CSS kodingizni yozishingizga to‘sqinlik qilmaydi.
Umumiy uslublar uchun W3.CSS’dan foydalanib, boshqacha narsa kerak bo‘lganda o‘z CSS kodingizni qo‘shishingiz mumkin.
Misol
<style>
.my-title {letter-spacing: 4px;}
</style>
<body class="w3-container">
<h1 class="w3-blue w3-padding my-title">My Website</h1>
</body>
O‘zingiz sinab ko‘ring »
W3.CSS bepul
W3.CSS’dan foydalanish bepul.
Hech qanday litsenziya talab qilinmaydi.
W3.CSS’ga to‘g‘ridan-to‘g‘ri havola berishingiz mumkin:
Misol
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
Yoki W3.CSS’ni yuklab olib, uni o‘z serveringizda joylashtirishingiz mumkin.
Boshlashga tayyormisiz?
Endi W3.CSS qanday ishlashini bilasiz:
- W3.CSS’ni HTML sahifangizga qanday qo‘shish
- HTML elementlariga W3.CSS klasslarini qanday qo‘shish
- Istalgan dizayn uchun klasslarni qanday birlashtirish
- W3.CSS’ni standart HTML va CSS bilan qanday ishlatish
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!