CSS селекторов. селекторов түрлері

Егер сіз белгілі бір түсін орнату қажет әрқайсысы, бар. Бұны қалай істейді? Стандартты CSS селекторы олар бірден барлық блоктар бойынша параметрлерді көрсетеді, тегтерді үшін қолайлы емес. шешім қарапайым. класс мүшелерін тағайындау. класс = 'көк' үшінші - - класс = «жасыл» Мысалы, бірінші, = 'қызыл' екінші DIV класс алды. Енді олар CSS кестелерді пайдаланып таңдауға болады.

төмендегідей синтаксисі бар: ( «.») нүктесін көрсетеді, сыныбының атын жазу арқылы шеңберi. Бірінші блок басқару үшін, .red құрылысын пайдаланыңыз. Екінші - т.б. .blue және.

Маңызды! Ол сынып төлсипатының мағыналы мәндерін пайдалану ұсынылады. It транслитерациясы (мысалы, krasiviy-Блок) немесе таңба / цифрлар (ojfh834871) кездейсоқ тіркесімдерін пайдалану жаман нысаны болып саналады. Осы Кодексте, сіз кейін жобаға айналысатын болады кім тап болады қиындықтар туралы айтпағанның, шатастырмау байланады. ең жақсы нұсқа - осындай ВЕМ сияқты, кез келген әдіснамасын пайдалану.

Артықшылықтары - салыстырмалы түрде жоғары икемділік.

Кемшіліктері - бірнеше элементтері, олар бір мезгілде өңдеген болады дегенді білдіреді, бір және сол класс, болуы мүмкін. Мәселе әдістемесін, сондай-ақ preprocessors мұра пайдалана шешіледі. олар айтарлықтай жұмысты жеңілдету, сіздің қолыңыз кем, Sass немесе қандай да бір басқа препроцессор алуға ұмытпаңыз.

ID селекторлық

Бұл нұсқа пікірі кодерлер мен бағдарламашылар туралы мағыналы болып табылады. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. дәл қолдану олар мұрагерлік проблемалар тудыруы мүмкін, себебі кейбір CSS оқулықтар, ID пайдалануды кеңес бермейді. Алайда, көптеген сарапшылар белсенді макет бойы оларды ұйымдастырады жатыр. Сіз шешеді. # »), затем имя блока. Содан кейін фунт белгісін ( «#»), блок атауы: төмендегідей синтаксисі. #red. Мысалы, #red.

отличается от класса по нескольким параметрам. ID бірнеше жолмен сыныптан бастап әр түрлі болып табылады. ID. Біріншіден, бет, екі бірдей ID болуы мүмкін емес. Олар бірегей атау беріледі. Екіншіден, мұндай селекторлық жоғары басымдыққа ие. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Бұл сіз қызыл бірлігі класын көрсету және CSS кестелерде қызыл көрсетсеңіз дегенді білдіреді фон түсін, содан кейін сол ID көк оған жүктелсін және түсі көк көрсетіңіз, бірлік көк түске боялады.

Артықшылықтары - Сіз тегтер мен сынып стильдер елемей, нақты элементті басқаруға болады.

ID и class. Кемшіліктері - ID және класс үлкен санының оңай адасқан.

Маңызды! ID вам, в общем-то, не нужны. Сіз BEM әдістемесін (немесе оның аналогы) пайдаланып жатсаңыз, сізге ID, жалпы, қажет емес. Бұл техника әлдеқайда ыңғайлы орналасуын бірегей сынып пайдалануды көздейді.

әмбебап селекторлық

{}. Синтаксис: жұлдыздары алға белгісі ( «*») және жақшаға, яғни, {*} ...

Беттің барлық элементтерінің бір рет белгілі бір атрибуттары тағайындау үшін пайдаланылады. Қашан осы пайдалы болуы мүмкін? box-sizing: border-box. Мысалы, сіз бет меншік терезесін-мөлшерін орнату керек болса: шекара-қорап. div *{}. ғана емес, Can құжаттың барлық компоненттер басқару үшін пайдалануға болады, сонымен қатар көрсетілген блок барлық балаларды бақылауға, мысалы, DIV * {}.

Артықшылықтары - Сіз бір уақытта элементтердің үлкен санын реттей аласыз.

Кемшіліктері - икемді опция жеткілікті емес. Сонымен қатар, кейбір жағдайларда бұл селектор пайдалану, бет жұмысын баяулатады.

атрибуттары

нақты элемент атрибуты басқаруға мүмкіндік береді. Мысалы, сіз түрлі атрибуты түріне енгізу тегтер бірқатар бар. Солардың бірі - мәтін, екінші - пароль, үшінші - нөмірі. Әрине, сіз әрбір класс немесе ID орната аласыз, бірақ ол әрқашан ыңғайлы емес. атрибуттарының CSS селекторы ол барынша дәлдікпен белгілі тегтер үшін мәндерді көрсету жеткізіңіз. Мысалы, осы сияқты:

Кіріс [түрі = 'мәтін'] {}

Бұл селекторлық кіріс мәтін түріне барлық атрибуттары таңдайды.

құралы өте икемді және тегтері кез келген пайдаланылуы мүмкін, атрибуттары болуы мүмкін, онда. Бірақ бұл бәрі емес! CSS ерекшелігі тіпті одан да көп ыңғайлы бар элементтерді басқару үшін мүмкіндігі бар!

Егер бет атрибуты толтырғыш = «атауын енгізіңіз» және енгізу толтырғыш = «Құпия сөзді енгізіңіз» бар кірісі бар делік. Олар сондай-ақ пайдаланып, селектор таңдауға болады! Бұл әрекетті орындау үшін, төмендегі құрылымын пайдаланыңыз:

Кіріс [толтырғыш = «атауын енгізіңіз»] {} немесе кіріс [толтырғыш = «Құпия сөзді енгізіңіз»]

атрибуттары бар Мүмкін көп икемді жұмыс. Сіз осыған ұқсас атрибуттары атағы (мысалы, «Каспий» және «Каспий») бар тегтер бірқатар бар делік. екі таңдау үшін, келесі таңдауларды пайдаланыңыз:

[Атауы * = «Каспий»]

CSS «Каспий», яғни. Е., және «Каспий» және «Каспий» нышандары бар атауында барлық элементтерді таңдайды.

Сіз сондай-ақ белгілі бір сипаты атрибуттары бастау тегтерін таңдай аласыз:

[Атауы ^ = «қажетті таңба»] {}

немесе оларды тоқтатуға:

[Атауы $ = «оң сипаты»] {}.

Артықшылықтары - барынша икемділік. Сынып бар возиться кез келген бар бет элементтерін таңдауға болады.

Кемшіліктері - тек белгілі бір жағдайларда, салыстырмалы сирек қолданылады. нүктесі класс көптеген ұйымдастыру қарағанда оңай, өйткені көптеген веб-дизайнерлер, әдістемесі қалайды жақшаларды «тең» және белгілері. Сонымен қатар, осы тізімдер төменде Internet Explorer нұсқалары 7 және жұмыс істемейді. Алайда, кім енді ескі Internet Explorer қажет?

жалған класс селекторы

псевдо-күйінің элементін білдіреді. Мысалы ,: Hover - сіз апарғанда қандай бетінің бөлігі жүреді ,: барып - аралады сілтемені. Бірінші-бала мен: соңғы-баланы Ол сондай-ақ сияқты элементтерді қамтиды.

оған арқасында сіз JavaScript қолданбай «тірі» бетті жасай аласыз, өйткені таңдау бұл түрі белсенді түрде, қазіргі заманғы орналасуында пайдаланылады. Мысалы, сіз көз сіз оның түсі өзгерді BTN сыныбы бар түймесі меңзегенде көз келеді. Бұл әрекетті орындау үшін, біз мынадай құрылымы пайдаланыңыз:

.btn: Hover {

өң-түсі: қызыл;

}

Beauty түймешігінің негізгі қасиеттері көрсетілуі мүмкін, өтпелі меншік, мысалы, 0.5S - бұл жағдайда, батырмасы бірден краснеть емес болады, және жарты секунд ішінде.

Ізгіліктері - кеңінен беттер «Возрождение» үшін пайдаланылады. пайдалану оңай.

Кемшіліктері - олар емес. Бұл шын мәнінде ыңғайлы құралы болып табылады. Алайда, тәжірибесіз веб дизайнерлер жалған сынып мол адасқан болады. Мәселе зерттеу және тәжірибе шешіледі.

жалған селекторы

«Жалған» - бұл HTML емес, беттің бөліктері болып табылады, бірақ олар әлі де басқаруға болады. Сіз түсінген жоқ? Ол, меніңше, әлдеқайда оңай. Мысалы, сіз басқа да шағын және қара мәтінді қалдырып үлкен және қызыл жолдың бірінші хат, шалғым келеді. Әрине, бұл белгілі бір класс бар аралығының осы хат жасалуы мүмкін, бірақ ол ұзақ және қызықсыз ғой. Бұл бірінші әріпті :: бүкіл тармақты таңдаңыз және жалған пайдалану әлдеқайда оңай. Ол бірінші хатында көрінісін бақылауға мүмкіндік береді.

жалған элементтерінің өте үлкен саны бар. табысқа жету үшін екіталай бір бапта Оларды атаңыз. Сіз сүйікті іздеу жүйеңізді тиісті ақпаратты таба аласыз.

Артықшылықтары - бетінің көрінісін теңшеу үшін икемділікті қамтамасыз етеді.

Кемшіліктері - оларға жаңа жиі шатастырып жатыр. тек белгілі бір браузерлерде жұмыстың осы түріне көптеген таңдаулар.

қорытындылау,

Селектор - құжат айналымы бақылау үшін қуатты құрал. Оның арқасында, сіз беттің әрбір компонентін таңдауға болады (тіпті тек ішінара бар). қолда бар барлық параметрлерді білу немесе тіпті оларды жазып ұмытпаңыз. Сіз интерактивті элементтерінің заманауи дизайн және көп күрделі беттерді жасау, егер Бұл әсіресе маңызды болып табылады.