CSS selektor klassi va id o'rtasidagi farq nima? HTMLda id va sinfdan foydalanish

CSS selektor klassi va id o'rtasidagi farq nima? HTMLda id va sinfdan foydalanish

Chen Weiliang yaqinda veb-saytning WordPress mavzusini optimallashtirish uchun SEO ustida ishlamoqda .

Oldin HTML va CSS bo'yicha asosiy bilimlarni o'rgangan bo'lsam-da, lekin uni bir muncha vaqt ishlatmagan bo'lsam ham, ayniqsa CSS qismidan foydalanishni unutish oson.

Shunday qilib, bu erda CSS selektor identifikatori va sinfining farqi va ishlatilishini yozib oling va umumlashtiring:

• id #div ga mos keladi
• sinf .div ga mos keladi

Id va sinf o'rtasidagi farq

id tavsifi

• id - bu #div ko'rinishida aniqlangan veb-sahifadagi kattaroq uslubni aniqlash uchun ishlatiladigan sobit teg.
• Masalan: ustunlarni ajratish, yuqori, tana, pastki va boshqalar ...
• Muayyan elementni aniqlash uchun foydalaniladi, u har bir sahifada faqat bir marta paydo bo'lishi mumkin va uni qayta-qayta chaqirib bo'lmaydi.

sinf tavsifi

• Class - bu uslublar guruhi bo'lib, u veb-sahifadagi batafsil uslublarni aniqlash uchun ishlatiladi.U .div ko'rinishida aniqlanadi va takrorlanishi mumkin.
• Masalan: ma'lum bir menyu, matn qatori va hokazo...
• Xuddi shu sahifada uni bir nechta elementlar tomonidan qayta-qayta chaqirish mumkin

Div selektorining o'zi hech qanday xususiyatga ega emas.CSS-ni belgilash orqali u divning kengligi, balandligi, fon rangi va matn o'lchami kabi ba'zi tartiblarni boshqaradi.

Veb-sayt yaratish dasturlari tomonidan yaratilgan odatiy elektron tijorat veb-saytlari va HTML veb-sahifalar sahifa tartibini amalga oshirish uchun CSS-dan foydalanadi.

Selektor nima?

Har bir CSS uslubining ta'rifi 2 qismdan iborat:

选择器 {样式}

• {} dan oldingi qism "selektor" dir.
• "Tanlash" {} ning qaysi "uslubi" ni ko'rsatadi.
• Ya'ni, bu "uslub" veb-sahifaning qaysi elementida ishlaydi?

Kod misoli

Class="sidebar" elementini qanday tanlash va uslublash mumkin:

.sidebar
{ 
background-color:black;
}

Id="footer" bilan elementni qanday tanlash va uslublash mumkin:

#footer
{ 
background-color:black;
}