Kaskadli uslublar jadvallari yoki CSS - bu veb-sahifani qanday ko'rish kerakligini aytadigan til. CSS veb-saytning oddiy tuzilishiga rang, uslub va tartibni qo'shadi. O'zingizni yaxshi his qilish va chiroyli ko'rinish uchun kiyimingizni tanlaganingizdek, CSS veb-sahifani kiyinish va jozibali ko'rinishga yordam beradi. Veb-ishlab chiqishda biz sahifadagi matn va qutilarning rangi, o'lchami va o'rnini o'zgartirish uchun CSS-dan foydalanamiz. Ushbu dars sizni oddiy tilda CSS asoslari bilan tanishtiradi. Biz CSS nima ekanligini, nima uchun muhimligini va HTML bilan qanday ishlashini bilib olamiz.
CSS qisqartmasi Cascading Style Sheets degan ma'noni anglatadi. Bu veb-sahifalarni uslublash uchun ishlatiladigan maxsus til. CSS-ni bino uchun bo'yoq va bezak sifatida tasavvur qiling. Bino HTML-dan yaratilgan va CSS uni chiroyli qiladi. CSS-dan foydalanib, veb-sahifangizdagi elementlar atrofidagi fon rangi, shrift uslublari va bo'sh joyni o'zgartirishingiz mumkin. CSS - bu veb-dizaynerlarga veb-saytlarni yaxshiroq va qiziqarli qilishiga yordam beradigan vosita.
Tasavvur qiling, siz rasmni bo'yayapsiz. Chizma chiziqlari veb-saytning asosiy tuzilishiga o'xshaydi. CSS chizmaga hayot qo'shadigan qalam va markerlarga o'xshaydi. Bir nechta oddiy qoidalar bilan siz butun chizilgan rasmingizni tekisdan rangligacha o'zgartirishingiz mumkin!
CSS veb-saytlarni jozibali va ulardan foydalanish oson qilish uchun ishlatiladi. U uslubni tarkibdan ajratib turadi. Bu shuni anglatadiki, sahifadagi so'zlar va rasmlar (HTML tomonidan taqdim etilgan) bir xil bo'lib qoladi, CSS esa ularning ko'rinishini boshqaradi. Uslubni yangilaganingizda, tarkibni o'zgartirishingiz shart emas. Bu ajratish veb-ishlab chiquvchilarning tezroq ishlashiga yordam beradi va saytlarga tashrif buyurishni yanada yoqimli qiladi.
CSS-ni siz tanlagan kiyim kabi o'ylab ko'ring. Agar siz boshqa kiyim kiysangiz, siz boshqacha ko'rinasiz, lekin siz hali ham bir xil odamsiz. CSS veb-sayt ko'rinishini undagi ma'lumotlarni o'zgartirmasdan o'zgartiradi. Bu faqat bitta CSS faylini tahrirlash orqali butun veb-sayt dizaynini yangilashni osonlashtiradi.
CSS HTML bilan birga ishlaydi. HTML - bu veb-sahifadagi narsalar qayerga borishini belgilaydigan asos. Keyin CSS ranglar, shriftlar va uslublarni qo'shish uchun keladi. Brauzer veb-sahifani yuklaganida, avval HTML bilan strukturani quradi va keyin CSS-da belgilangan uslublarni qo'llaydi.
CSS qoidalar to'plami sifatida yozilgan. Har bir qoida ikki qismdan iborat: selektor va deklaratsiya bloki. Selektor brauzerga qaysi HTML elementini uslublash kerakligini aytadi. Deklaratsiya blokida bir yoki bir nechta deklaratsiyalar mavjud. Har bir deklaratsiyaning o'ziga xos xususiyati va qiymati bor. Xususiyat siz o'zgartirmoqchi bo'lgan narsadir va qiymat uni qanday o'zgartirish kerakligini aytadi.
Masalan, sahifaning fon rangini ochiq ko'k rangga o'rnatish uchun siz shunday ko'rinadigan qoida yozishingiz mumkin:
<kod>tana {
fon rangi: ochiq ko'k;
}</code>Ushbu oddiy qoida butun sahifaning fonini o'zgartiradi.
Asosiy CSS qoidasi oddiy naqshga amal qiladi. U selektor va xususiyatlar va qiymatlar blokini ko'rsatadi. Shakl quyidagicha ko'rinadi:
<kod>tanlovchi {
mulk: qiymat;
}</code>Bu erda selektor qaysi HTML elementini maqsad qilib qo'yishni tanlaydi. Xususiyat siz o'zgartirmoqchi bo'lgan narsadir va qiymat siz uni qanday o'zgartirmoqchisiz.
Misol uchun, agar siz barcha paragraf matni ko'k rangda bo'lishini istasangiz, quyidagilarni yozasiz:
<kod>p {
rang: ko'k;
}</code>Ushbu qoida veb-brauzerga har bir <p> (paragraf) elementida ko'k matn bo'lishi kerakligini aytadi.
CSS selektorlari veb-sahifangizdagi qaysi elementlarga uslub qoidalari ta'sir qilishini tanlash imkonini beradi. Selektorlarning bir nechta turlari mavjud va ularning har biri biroz boshqacha ishlaydi.
Ushbu turli xil tanlovchilar veb-sahifangizning muayyan qismlarini uslublash uchun sizga katta kuch beradi. Ular sizga elementlarni aniq belgilashga va ular qanday ko'rinishini hal qilishga imkon beradi.
CSS veb-sahifangizni uslublash uchun foydalanishingiz mumkin bo'lgan turli xil xususiyatlarni taqdim etadi. Har bir xususiyat element tashqi ko'rinishining o'ziga xos tomonini o'zgartirish imkonini beradi. Ba'zi umumiy xususiyatlar:
Har bir CSS xususiyatidan keyin qiymat keladi. Masalan, matnga qizil rang berish uchun quyidagilarni yozishingiz mumkin:
<kod>p {
rang: qizil;
}</code>Ushbu oddiy qoida barcha paragraflarda qizil matn bo'lishini ta'minlaydi. Xususiyat rangi matn qanday ko'rinishini nazorat qiladi va qizil qiymat unga qanday rang bo'lishini aytadi.
CSS-dagi "kaskad" so'zi uslublar bir qoidadan ikkinchisiga o'tishi mumkinligini anglatadi. Agar bitta elementga ikkita qoida qo'llanilishi mumkin bo'lsa, buyurtma qaysi biri g'alaba qozonishini hal qilishi mumkin. Bu stacking bloklariga o'xshaydi, bu erda bir blok ba'zan boshqasining bir qismini qoplaydi.
Umumiy qoidalardan biri shundaki, to'g'ridan-to'g'ri HTML elementida yozilgan uslublar (inline uslublar deb ataladi) CSS faylingizdagi uslublarni bekor qiladi. Yana bir qoida shundaki, agar ota-ona elementi uslublangan bo'lsa, uning ichki elementlari, agar boshqacha aytilmagan bo'lsa, ushbu uslubni meros qilib olishi mumkin.
Misol uchun, agar siz <div> matn rangini yashil rangga o'rnatsangiz, meros tufayli <div> ichidagi matn ham yashil rangda ko'rinadi. Bu veb-sahifada izchil dizaynni saqlashga yordam beradi.
CSS yordamida siz ranglarni ko'p jihatdan o'zgartirishingiz mumkin. Qizil , ko'k va yashil kabi umumiy rang nomlaridan foydalanishingiz mumkin. Shuningdek, qizil rang uchun <code>#FF0000</code> kabi o'n oltilik kodlardan yoki <code>rgb(255, 0, 0)</code> kabi RGB qiymatlaridan foydalanishingiz mumkin.
Shriftlar CSS-ning yana bir muhim qismidir. Shrift daftarda tanlagan qo'l yozuvi uslubiga o'xshaydi. CSS-da siz shrift oilasini, hajmini, vaznini va uslubini o'zgartirishingiz mumkin. Misol uchun, agar siz paragraflaringiz Arialda paydo bo'lishini istasangiz, quyidagilarni foydalanishingiz mumkin:
<kod>p {
font-family: Arial, sans-serif;
}</code>Ushbu qoida brauzerga matnni Arial shriftida ko'rsatishni, agar mavjud bo'lmasa, boshqa shunga o'xshash shriftdan foydalanishni aytadi.
CSS yordamida ranglar va shriftlarni o'zgartirish matnni o'qishni osonlashtiradi va veb-sahifangizni ko'rishni yanada qiziqarli qiladi.
CSS Box modeli - bu elementning turli qismlari sahifada qanday joylashtirilganligini tushunishning bir usuli. Har bir element qutiga o'xshaydi. Quti modeli to'rt qismdan iborat:
Fotosuratni tasavvur qiling. Fotosuratning o'zi tarkibdir. Fotosuratni o'rab turgan gilam to'ldirishga o'xshaydi. Bularning barchasini ushlab turadigan ramka chegaradir. Va ramka atrofidagi bo'sh joy - bu chekka. Ushbu modeldan foydalanib, dizayningizning barcha qismlari to'g'ri joy va muvozanatga ega ekanligiga ishonch hosil qilishingiz mumkin.
CSS nafaqat ranglar va shriftlar haqida; shuningdek, veb-sahifadagi elementlarni tartibga solishga yordam beradi. Bu tartib va joylashishni aniqlash deb ataladi. CSS yordamida siz har bir element sahifada qaerda ko'rinishini tanlashingiz mumkin.
Veb-sahifa tartibini boshqarishning bir necha usullari mavjud, jumladan:
Ushbu tartib texnikasidan foydalanish o'yinchoqlarni javonga joylashtirishga o'xshaydi. Har bir o'yinchoq qaerga ketishini o'zingiz hal qilasiz, shunda ularning barchasida etarli joy bo'ladi va toza ko'rinadi. Bu sizning veb-sahifangizni yanada tartibli va jozibali qiladi.
Bu erda HTML va CSS qanday birgalikda ishlashiga misol. Ushbu namuna kodi ba'zi uslublar bilan oddiy veb-sahifani ko'rsatadi:
<kod><!DOCTYPE html>
<html>
<head>
<uslub>
tana {
fon rangi: ochiq ko'k;
}
h1 {
rang: ko'k;
shrift o'lchami: 24px;
}
p {
rang: yashil;
shrift o'lchami: 18px;
}
</style>
</head>
<tana>
<h1>Mening birinchi veb-sahifam</h1>
<p>Bu CSS yordamida yaratilgan oddiy veb-sahifa.</p>
</body>
</html></code>Ushbu kod ochiq ko'k fon rangi bilan veb-sahifani yaratadi. Sarlavha matni ko'k rangda va paragraf matni yashil rangda. <code><style></code> tegidagi CSS qoidalar qanday yozilishi va qo'llanilishini ko'rsatadi.
HTML-ga CSS-ni uchta asosiy usulda qo'shishingiz mumkin. Har bir usul vaziyatga qarab o'z qo'llanilishiga ega:
Tashqi usul professional veb-ishlab chiqishda eng keng tarqalgan hisoblanadi, chunki u HTML-ni toza saqlaydi va bir vaqtning o'zida bir nechta sahifalarda uslublarni yangilash imkonini beradi.
CSS ko'p jihatdan juda foydali. Veb-ishlab chiqishda CSS-dan foydalanishning ba'zi afzalliklari:
CSS-dan foydalanish maxsus asboblar qutisiga ega bo'lishga o'xshaydi. Asboblar qutisidagi har bir vosita veb-sahifangiz ko'rinishini osongina yaxshilashga yordam beradi. Amaliyot davomida siz CSS veb-saytlarni chiroyli va foydalanuvchilarga qulay qilishda qanchalik kuchli ekanligini ko'rasiz.
Siz tashrif buyurgan har bir veb-sayt qaysidir ma'noda CSS-dan foydalanadi. Sevimli multfilmlar saytlaridan maktab loyiha sahifalarigacha, CSS qiziqarli va o'qilishi oson tartibni yaratishga yordam beradi. Toza intervalli va aniq matnli rang-barang veb-sahifani ko'rsangiz, u ishlayotgan CSS.
O'yinlar, multfilmlar yoki onlayn hikoyalar kabi mashhur veb-saytlar dizaynini ko'rib chiqing. Ranglar, shriftlar va tartiblardan oqilona foydalanish ushbu veb-saytlarni hayajonli va jozibali qilishga yordam beradi. CSS ilovalar va mobil saytlarda ham qo'llaniladi, bu kontentning katta ekranlarda ham, kichik telefonlarda ham yaxshi ko'rinishini ta'minlaydi.
Kundalik hayotda CSS xonani bezashga o'xshaydi. Siz xonangiz uchun mavzuni tanlashingiz, rang-barang rasmlarni osib qo'yishingiz va mebelingizni chiroyli tartibga solishingiz mumkin. CSS veb-saytlar uchun xuddi shunday qiladi. Bu raqamli makonga tartib va go'zallik olib keladi va tashrif buyuruvchilar uchun yoqimli qiladi.
Mana CSS haqida bilib olgan asosiy fikrlarimiz:
CSS veb-ishlab chiqishning muhim qismi bo'lib, saytlarni chiroyli va oson navigatsiya qilish imkonini beradi. Ko'proq o'rganib, o'z veb-sahifalaringizni yaratishga harakat qilsangiz, CSS ijodkorlikni ifodalash uchun vosita ekanligini unutmang. Ranglar, shriftlar va tartiblar bilan tajriba o'tkazing, chunki har bir kichik o'zgarish yaxshi mo'ljallangan veb-sayt sehriga qo'shiladi.
Sevimli veb-saytlaringizni kuzatishda davom eting. Sizning e'tiboringizni jalb qilish va yoqimli tajriba yaratish uchun turli xil uslublar qanday qo'llanilishiga e'tibor bering. Vaqt o'tishi bilan siz oddiy HTML tuzilmalarini vizual jozibali veb-sahifalarga aylantirishda CSS qanchalik kuchli ekanligini ko'rasiz.