CSS Sinchkovlik. tanlovchilar turlari

, ma'lum bir rang o'rnatish istagan har biri. Qanday qilib deysizmi? Standard CSS sinchkovlik ular birdaniga barcha bloklari uchun parametrlarini ko'rsatadi, teglar uchun mos emas. hal oddiy. sinf a'zolarini belgilash. class = "ko'k", uchinchi - - class = "yashil" Misol uchun, birinchi "qizil", ikkinchi = div class qabul qildi. Endi ular CSS jadvallarni yordamida tanlangan bo'lishi mumkin.

Matnni sintaksisi rang quyidagicha bo'ladi: sinf nomini yozib keyin nuqtasi ( "."), deb ko'rsatadi. Birinchi birlik boshqarish uchun, ekspertlarni qurish foydalaning. Ikkinchi - hokazo .Havo va.

Muhim! Bu sinf xususiyati mazmunli qadriyatlarni foydalanish tavsiya etiladi. Bu Transliteratsiya (masalan, krasiviy-blok) yoki harflar / raqamlar tasodifiy birlashmalari (ojfh834871) foydalanish yomon shakli hisoblanadi. ushbu Kodeksda, siz keyin loyiha bilan shug'ullanuvchi qilinadi qilganlar yuzma-yuz qiyinchiliklarga emas, balki so'z, turmadi bog'liq. eng yaxshi variant - masalan, BEM kabi, har qanday metodologiyasi foydalanish.

Afzalliklari - nisbatan yuqori moslashuvchan bo'lishi.

Kamchiliklari - bir necha elementlar bir va ular bir vaqtning o'zida tahrir qilinadi, degan ma'noni anglatadi Shu sinf, bo'lishi mumkin. muammo preprocessors uslubiyati shuningdek meros yordamida hal etiladi. Ular juda ishini soddalashtirish, Sass yoki boshqa önişlemci, qo'lingiz kamroq olish ishonch hosil qiling.

ID selektor

Ushbu versiyada haqida fikr kodlayıcılar va dasturchilar noaniq bo'ladi. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. noto'g'ri qo'llash, ular meros bilan bog'liq muammolar olib kelishi mumkin, chunki ba'zilari CSS tutorials, ID foydalanishni tavsiya qilmaymiz. Biroq, ko'p ekspertlari faol Dizaynning bo'ylab ularni tashkil. Siz qaror. # »), затем имя блока. funt oyat-mo''jiza ( "#"), blok keyin nomi: sintaktik quyidagicha bo'ladi. #red. Misol uchun, #red.

отличается от класса по нескольким параметрам. ID necha yo'llar bilan sinf farq qiladi. ID. Birinchidan, sahifa, ikki xil ID bo'lishi mumkin emas. Ular yagona nom beriladi. Ikkinchidan, bunday selektor yuqori ahamiyatliligi ega. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Bu sizga, qizil bir birligi sinfini belgilash va CSS jadvallar qizil belgilash, agar, degan ma'noni anglatadi fon rangini, va keyin ko'k unga shu id belgilashingiz va ko'k rangini belgilash, birligi ko'k yonadi.

Afzalliklari - Agar teglar va sinflari tarzini pisand, aniq elementi nazorat qilish mumkin.

ID и class. Kamchiliklari - oson ID va sinf ko'p kaybolmak.

Muhim! ID вам, в общем-то, не нужны. Agar sizga BEM metodologiya (yoki uning o'xshashi), ID foydalanayotgan bo'lsangiz, umuman, zarur emas. Bu uslub tartibi, noyob sinflar ancha qulay foydalanishni o'z ichiga oladi.

universal selektor

{}. Syntax: Starlets belgisi ( "*") va tolasi, ya'ni, {*} ...

ma'lum bir marta sifatlari sahifaning barcha elementlarini tayinlash uchun ishlatiladi. Bu foydali bo'lishi mumkin? box-sizing: border-box. Misol uchun, sahifa mulk quti-o'lchamlarini belgilash bo'lsangiz: chegara-quti. div *{}. faqat hujjatning barcha qismlarining, boshqarish uchun foydalanish mumkin emas, balki, masalan belgilangan blokda barcha bolalarni nazorat qilish, div * {}.

Afzalliklari - Agar bir vaqtning o'zida unsurlar, bir qator nazorat qilish mumkin.

Kamchiliklari - etarli emas moslashuvchan variant. Bundan tashqari, bu qay foydalanish, ayrim hollarda sahifa ishini pasaytirishi.

sifatlari bilan

imkon ma'lum bir fazilat bilan elementi nazorat qiling. Misol uchun, siz bir xil Xususiyat turi bilan kiritish teglar bir qator bor. Ulardan biri - matn, ikkinchi - parol, uchinchi - raqami. Albatta, har bir sinf yoki ID o'rnatishingiz mumkin, lekin har doim qulay emas. sifatlaridan CSS selektsionerlari imkon maksimal aniqlik bilan ma'lum teglar uchun qiymatlarni tanlashingiz qilish. Misol uchun, bu kabi:

Kirish [turi = 'matn'] {}

Bu selektor kiritish matni turi bilan barcha xususiyatlarini tanlang qiladi.

vositasi juda moslashuvchan va sifatlari bor bo'lishi mumkin bo'lgan teglar, har qanday bilan foydalanish mumkin. Lekin bu hammasi emas! CSS spetsifikatsiyasi ham ko'proq qulaylik bilan elementlarni nazorat qilish imkoniga ega!

"Nomini kiriting" va kiritish, er qattiq qo'l = "Parolni kiriting" = sizning sahifa xususiyati er qattiq qo'l bilan kiritishni ega ekanligini tasavvur qiling. Ular, shuningdek, tugmasi bilan tanlab mumkin! Buning uchun quyidagi tuzilishga foydalanish:

Kirish [tutucudur = "nomini kiriting"] {} yoki kiritish [tutucudur = "Parolni kiriting"]

sifatlari bilan Balki yanada moslashuvchan ish. Siz shunga o'xshash sifatlar unvoni (masalan, "Kaspiy" va "Caspian") bilan teglar bir qator bor deylik. Har ikki tanlash uchun, quyidagi saylovlari foydalaning:

[Nomi * = "Kaspiysk"]

CSS "Kaspiy", ya'ni. E., Va "Kaspiy" va "Kaspiy" ramzi bor qaysi unvoni barcha ma'lumotlar tanlaydi.

Bundan tashqari, ma'lum bir belgi sifatlari bilan boshlanadi teglar tanlashingiz mumkin:

[Nomi ^ = "belgi siz istagan"] {}

yoki ularni bekor:

[Nomi $ = "o'ng belgi"] {}.

Afzalliklari - maksimal moslashuvchan bo'lishi. Siz sinflar karıştırmasını holda har qanday mavjud sahifa elementlarini tanlash mumkin.

Kamchiliklari - faqat muayyan hollarda, nisbatan kamdan-kam hollarda ishlatiladi. nuqta sinf ko'p tashkil ko'ra osonroq, chunki ko'p veb-dizaynerlar, metodologiyasi afzal burchakli Qavslar "teng" va oyatlarimizni. Bundan tashqari, bu selektsionerlari Internet Explorer versiyalarida 7 va quyida ishlash emas. Biroq, endi eski Internet Explorer kerak kimlar?

psevdo-sinf selektsionerlari

a psevdo-holat elementi anglatadi. misol ,: hover uchun - siz qaytsangiz sahifaga doirasida nima ,: tashrif buyurdi - tashrif buyurilgan havola. birinchi bola va: o'tgan-bola Shuningdek, kabi elementlarni o'z ichiga oladi.

unga rahmat sizga JavaScript foydalanish holda, bir sahifa "Jonli" qilish mumkin, chunki qay bu turi faol, zamonaviy tartibini ishlatiladi. Misol uchun, siz uning rangi o'zgarib btn sinfida bilan tugmasi ustida qaytsangiz ishonch hosil qilish istayman. Buning uchun, biz quyidagi tuzilishini foydalanish:

.btn: hover {

background-color: qizil;

}

Bu holda, tugmasini bir zumda uyaltirish bo'lmaydi, va yarim soniya ichida - Go'zallik masalan, 0.5S, tugmasini, o'tish mulkini asosiy xususiyatlari ko'rsatilgan bo'lishi mumkin.

Fazilati - keng sahifalar "tiklash" uchun ishlatiladi. foydalanish oson.

Kamchiliklari - ular emas. Bu, albatta, qulay vosita hisoblanadi. Biroq, tajribasiz veb dizaynerlar psevdo-sinflar-osoyishtalikda yoqotib mumkin. muammo o'rganish va amaliyotini hal etiladi.

psevdo selektsionerlari

"So'zda" - bu HTML emas sahifaning qismlari bor, lekin ular hali ham boshqarilishi mumkin. Siz tushunmadim? Bu ko'rinadi ancha osonroq. Misol uchun, siz boshqa kichik va qora matn qoldirib, mag'lubiyatga birinchi harfi katta, qizil qilish istayman. Albatta, u ma'lum bir sinf bilan vaqt bu xatni tuzilishi mumkin, lekin bu uzoq va zerikarli ekan. Bu butun xat-ni tanlang va so'zda :: birinchi maktub foydalanish ancha osondir. Bu birinchi harfi ko'rinishini nazorat qilish imkonini beradi.

psevdo-elementlar juda katta raqam bor. bitta maqolada ularni sanab muvaffaqiyatga erishish amri mahol. Siz sevimli qidiruvi tegishli ma'lumotlarni topishingiz mumkin.

Afzalliklari - sahifaning ko'rinishini sozlash uchun moslashuvchan beradi.

Kamchiliklari - ularga yangi ko'pincha qorishgan bo'ladi. faqat ayrim brauzerlarda ish bu turi ko'pchiligi saylovlar.

Ichiga uchun

Selektor - hujjat aylanish nazorat qilish uchun kuchli vosita. Unga rahmat, sizga sahifaning har bir komponentining tanlashingiz mumkin (faqat qisman ham bor). mavjud bo'lgan barcha variantlarni o'rganish, yoki hatto ularni yozib ishonch hosil qiling. Agar murakkab zamonaviy dizayni bilan sahifalar va interaktiv elementlar ko'p yaratish, agar bu ayniqsa muhim ahamiyatga ega.