1-Dars
Cssga kirish.
CSS( Cascading style sheets )- bu oddiy dizayn tilidir. Veb-sahifalarni taqdim qilish jarayonini soddalashtirish uning asosiy vazifasi hisoblanadi. CSS veb-sahifaning tashqi ko'rinishi va hissi bilan ishlov beradi. CSS-dan foydalanib, rangning rangini boshqarishingiz mumkin, matnning, shriftlarning uslubi, paragraflar orasidagi bo'shliq, ustunlarning o'lchami va joylashishi, qanday fon rasmlari yoki ranglari, shuningdek turli xil effektlardan foydalanishingiz mumkin. CSS-ni o'rganish va tushunish oson, ammo u HTML hujjati ustidan kuchli nazoratni ta'minlaydi. Ko'pincha CSS HTML markup languages yoki XHTML bilan birlashtiriladi.
Cssning afzalliklari shulardan iborat:
CSS vaqtni tejaydi- Siz CSS-ni bir marta yozib, keyin HTML-sahifasidagi bir varaqni ko'p marta ishlatishingiz mumkin. Har bir HTML elementi uchun uslubni aniqlab, uni veb-sahifalarda xohlaganingizcha, ko'pchiligi uchun qo'llashingiz mumkin .
Sahifalar tezroq yuklanadi - Agar CSS-dan foydalanayotgan bo'lsangiz, siz har safar HTML tag attributelarini yozishingiz shart emas. Bir tegning bitta CSS qoidasini yozing va uni barchasiga qo'llang
HTML'dan ustun bo'lgan uslublar - CSS -HTMLga qaraganda ko'proq xususiyatlarga ega. HTML atributlariga nisbatan sizning HTML sahifangizga yanada yaxshiroq ko'rinish berishingiz mumkin.
Global veb-standartlar - Hozir HTML-atributlar eskirmoqda va endi CSS-dan foydalanish tavsiya etiladi. Shunday qilib, CSS-ni barcha HTML sahifalarda ishlatishni boshlash yaxshi fikr, chunki ularni kelajakdagi brauzerlar bilan moslashtira olasiz.
Va hakazo.
Css sintaksisi.
CSS brauzer tomonidan sharhlanadigan , keyin qo'llaniladigan va hujjatlaringizga mos keladigan elementlar, style qoidalaridan iborat.
Style qoidasi uch qismdan iborat:
Selector:
Xususiyat:
Qiymat:
Bugun biz selektorlar haqida gaplashamiz.
Tur selektorlar. Tur selektorlari shundan iboratki, ma’lum bir turdagi (misol uchun:
,
,
, va hakazo) elementlar uchun qo’llaniladi.
h1 {
color: #36CFFF;
}
Yuqoridagi misoldan ko’rishimiz mumkinki, tur selektorlari aynan bir turdagi elementlar stilini o’zgartirish uchun xizmat qiladi, ya’ni barcha
tagidagi elementlarni rangini mana bu ko’rinishga olib keladi.
Farzand selektorlar. Farzand selektorlari shundan iboratki, malum bir teg ichidagi tegga ta’sir ko’rsatmoqchi bo’lsak ishlatamiz.
ul em {
color: purple;
}
Yuqoridagi misoldan ko’rishimiz mumkinki, farzand selektori
tegidagi faqat teglariga ta’sir ko’rsatadi.
3. Class selektorlari. Class selektorlari shundan iboratki, Elementlarning class atributi asosida style qoidalarini belgilashingiz mumkin. Barcha elementlarga ega
ushbu class belgilangan qoidaga muvofiq formatlanadi.
.black {
color: #000000;
}
Ushbu hujjat tarkibidagi class atributlari har bir element uchun qora rangda ko'rsatiladi. Siz uni yanada aniqroq qilishingiz mumkin. Misol uchun:
h1.black {
color: #000000;
}
1.
2.
3.
1-rasmdagi ko’rinishdan bilib olishimiz mumkinki, faqat HTMLning o’zi bilan sahifaning tanasini yaratib olamiz. 2-rasmda etibor beradigan narasmiz bu tegi hisoblanadi. Link tagi shu ko’rinishda yoziladi. Dars 1.html ni dars 1.css ga bog’lashimiz uchun href=”dars 1.css” deb yozish kifoya.
va
tegiga class=”” selektorini berayabmiz, hamda etibor bergan bo’lsangiz 3-rasmda sarlovha va matn so’zlaridan oldin (.) qo’ydik bu class=”” selektorining xususiyati hisoblandi.
Kanalimizga obuna bo’lishni unutmang!!!
Bizning kanalimiz: https://t.me/joinchat/AAAAAFIZbtTnDwRr-dCNYQ