Veb-saytning ingl. Uslubi va tartibi CSS yoki Cascading Style Sheets tomonidan belgilanadi. Bu veb-sahifaning HTML formatlashini shakllantiradigan va veb-brauzerlarni ushbu formatlash natijasida paydo bo'lgan sahifalarni ko'rsatish bo'yicha ko'rsatmalar bilan ta'minlaydigan hujjatlar. CSS sahifaning tartibini, ranglarini, fon tasvirlarini, tipografiyani va boshqa ko'p narsalarni ko'rib chiqadi.
Agar siz CSS-ga qarasangiz, siz bu formatlash yoki kodlash tili kabi, bu fayllar uchun maxsus sintaksisga ega ekanligini ko'rasiz. Har bir uslub varaqasi CSS qoidalaridan iborat. Ushbu qoidalar, agar to'liq bo'lsa, saytning uslubi.
CSS qoidalarining qismlari
CSS qoidasi ikkita alohida qismdan iborat: selector va deklaratsiya. Selektor sahifada nimaga moslashtirilganligini aniqlaydi va deklaratsiya qanday qilib uslubni tanlash kerakligini belgilaydi. Masalan:
p {
rang: # 000;
}
Bu CSS qoidalaridir. Tanlangan qism "p", ya'ni "paragraflar" uchun element tanlagichi. Shuning uchun saytdagi barcha xatlarni tanlab, ularni shu tariqa taqdim etishi kerak (agar siz CSS hujjatingizning boshqa joylarida ko'proq o'ziga xos uslublar bilan belgilangan paragraflar bo'lmasa).
"Rang: # 000" deb nomlangan qoidaning bir qismi; deklaratsiya deb nomlanadi. Ushbu deklaratsiya ikki qismdan tashkil topgan - mulk va qiymat.
Mulk ushbu deklaratsiyani "rangi" qismidir. Vektorning qaysi tomoni ingliz tilida o'zgartirilishini belgilaydi.
Qiymat, tanlangan CSS xususiyatini o'zgartiradi. Bizning misolimizda, # 000 ning hex qiymati, ya'ni "qora" uchun CSS stenografiyasidan foydalanamiz.
Shunday qilib, ushbu CSS qoidani ishlatib, sahifamizda qora harflarning rangi ko'rsatilgan paragraflar bo'lishi kerak edi.
CSS mulkining asoslari
CSS xususiyatlarini yozganda, siz ularni moslashtirilgan tarzda ko'rasiz. Misol uchun, "rang" haqiqiy CSS xususiyatidir, shuning uchun uni ishlatishingiz mumkin. Bu xususiyat elementning matn rangini belgilaydi. Agar siz CSS-ning xususiyatlaridan biri sifatida "matn rangi" yoki "shrift rang" ni ishlatmoqchi bo'lsangiz, ular CSS tilining haqiqiy qismi emas, chunki ular muvaffaqiyatsiz bo'ladi.
Yana bir misol - "fon-rasm" mulki. Bu xususiyat quyidagi kabi fon uchun ishlatilishi mumkin bo'lgan rasmni o'rnatadi:
.logo {
background-image: url (/images/company-logo.png);
}
Agar "background-picture" yoki "background-graphic" xususiyatidan foydalanishga harakat qilsangiz, ular yana bir bor CSS-ning haqiqiy xususiyatlari emas, chunki ular muvaffaqiyatsizlikka uchraydi.
Ba'zi CSS xususiyatlari
Saytni yaratish uchun foydalanishingiz mumkin bo'lgan CSS-larning bir qator xususiyatlari mavjud. Ba'zi bir misollar:
- Chegara (chegara tarzi, chegara rangli va chegara kengligi)
- Ilovani to'ldirish (to'ldirish to'plami, to'ldirish-o'ng, padding-pastki va padding-chap)
- Marginalar (margin-top, margin-right, margin-bottom, margin-left)
- Shrift oilasi
- Shrift o'lchami
- Fon-rangi
- Kengligi
- Juda katta
CSS-ning bu xususiyatlari misollar sifatida ishlatiladigan ajoyib narsalardir, chunki ularning barchasi juda sodda va CSS-ni bilmasangiz ham, ularning ism-shariflari asosida nima qilishlarini taxmin qilishingiz mumkin.
Qanday qilib ular o'zlarining nomlari asosida ishlaydiganlari aniqlanmasligi mumkin bo'lgan boshqa CSS xususiyatlari ham bor:
- Float
- Tozalash
- Tiklash
- Matnni aylantirish
- Z-indeksi
Siz veb-dizaynga chuqur kirib borganingizdan so'ng, ushbu xususiyatlar va undan ko'p narsalarga duch kelasiz (va ulardan foydalanasiz)!
Xususiyatlar qiymati kerak
Mulkdan har foydalanganda siz unga qiymat berishingiz kerak va muayyan xususiyatlar faqat ma'lum qiymatlarni qabul qilishi mumkin.
"Rang" xususiyatining birinchi misolida biz rang qiymatini ishlatishimiz kerak. Bu hex qiymati , RGBA qiymati yoki hatto rangli kalit so'z bo'lishi mumkin . Biroq, bu qiymatlarning har biri ishlashi mumkin, ammo agar siz "muloyim" so'zni bu xususiyat bilan ishlatgan bo'lsangiz, u hech narsa qilmaydi, chunki bu so'zning tavsifiy bo'lishi CSSda tan olingan qiymat emas.
"Background-image" ning ikkinchi misoli, sizning saytingiz fayllaridan haqiqiy tasvirni olish uchun rasm yo'lini talab qiladi. Bu kerakli qiymat / sintaksis.
Barcha CSS xususiyatlari ular kutgan qiymatlarga ega. Masalan:
- Chegara rangi rang qiymatini kutadi
- Chegara kattaligi piksellar yoki foizlar kabi o'lchov qiymatini kutadi
- Chegara uslublari bu xususiyat uchun ishlatilgan ajratilgan uslublardan birini kutadi, masalan, "qattiq"
Agar siz CSS xususiyatlarining ro'yhatiga kirsangiz, ularning har birida ular uchun mo'ljallangan uslublarni yaratish uchun foydalanadigan aniq qadriyatlarga ega ekanligini bilib olasiz.
Jeremy Girard tomonidan tahrirlangan