ЦСС селектора. врсте селектора

Језик за описивање изглед ЦСС документа се стално развија. Током времена, повећава не само снагу и функционалност, такође повећава флексибилност и лакоћу коришћења.

ЦСС селектори

Почињемо да разумемо. Отворите било који ЦСС туториал, бар један део ње ће бити посвећена врстама селектора. То није изненађујуће, јер су један од највише одговара начина да управљају стране садржаја. Уз њихову помоћ, можете комуницирати са апсолутно било ХТМЛ елемената. Сада постоји 7 врста селектори:

• у таговима;

• за класе;

• фор ИД;

• универзална;

• атрибути;

• да реагује са псеудо-класа;

• за контролу псеудо.

Синтакса је једноставна. Да бисте сазнали како да користите ЦСС селектори, прочитајте доста о њима. Која опција је најбоља за контролу садржаја у вашем случају? Покушајте да разумете.

Селектори ознаке

Ово је најједноставнији верзија, која не захтева специјално знање да напише. Да би управљали ознакама, треба да користе своје име. Претпоставимо да је "капа", сајт је умотана у ознаци <хеадер>. Да га контролише у ЦСС морате да користите заглавља {} селектора.

Предности - једноставност употребе, разноврсност.

Мане - потпуни недостатак флексибилности. У горњем примеру биће изабрана када све тагс заглавља. Али, шта ако је потребно да управљате само један?

цласс селектори

Најчешћи варијанта. Дизајниран за управљање ознаке са атрибута класе. Претпоставимо, на коду, постоје три блока: <див>, од којих је свака желите да подесите одређену боју. Како се то ради? Стандардни ЦСС селектори нису погодне за ознаке, они показују параметре за све блокове одједном. Решење је једноставно. Доделити чланова класе. На пример, први примио див цласс = 'црвено', други - класа = 'плаве', трећи - класа = 'зелено'. Сада могу да се изабере помоћу ЦСС табеле.

Синтакса је следећа: Указује на тачку ( "."), А затим писање име класе. За управљање прву јединицу, користите изградњу .ред. Друго - .блуе и тако даље.

Важно! Препоручује се коришћење смислене вредности атрибута класе. Сматра се лоше образац за коришћење транскрипције (нпр красивии-блок) или случајних комбинација слова / бројева (ојфх834871). У овом коду, ви сте дужни да се збунити, а да не помињемо тешкоће које ће се суочити они који ће бити ангажовани на пројекту за тобом. Најбоља опција - да користи било који методологију, као што је бем.

Предности - релативно висока флексибилност.

Недостаци - Вишеструки елементи могу бити једна и иста класа, што значи да ће бити измењено истовремено. Проблем се решава коришћењем методологије као наслеђивање препроцессорс. Будите сигурни да се руке мање, Сасс или нека друга Претпроцесор, они су у великој мери поједноставити посао.

ИД селектор

О овој верзији мњења кодере и програмери су нејасни. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Неки ЦСС туториали не препоручују употребу ИД, јер у непрецизно апликације могу довести до проблема са наследства. Међутим, многи стручњаци су активно организовати их кроз распоред. Ви одлучујете. # »), затем имя блока. Синтакса је следећа: знак фунте ( "#"), затим име блока. #red. На пример, #ред.

отличается от класса по нескольким параметрам. ИД је разликује од класе на неколико начина. ID. Прво, страна не може бити два идентична карту. Њима се приписује јединствено име. Друго, таква селектор има већи приоритет. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. То значи да ако наведете јединице цласс црвена и навести у ЦСС табелама црвену боју позадине, а затим доделите на то исто ид плаво и одредити боју плаву, уређај ће постати плава.

Предности - можете контролисати конкретан елемент, игноришући стилове тагова и класа.

ID и class. Мане - лако је изгубити се у великом броју ИД и класе.

Важно! ID вам, в общем-то, не нужны. Ако користите БЕМ методологију (или његове аналоге), ИД за вас, уопште, нису потребни. Ова техника подразумева употребу распоред јединствених класа која много згодније.

универзални селектор

{}. Синтакса: Старлетс знак ( "*") и протезе, односно, {*} ...

Користи се доделити одређене атрибуте једном све елементе странице. Када то може бити корисно? box-sizing: border-box. На пример, ако желите да поставите страну имовину бок-димензионисање: бордер-бок. div *{}. не може да се користи само за управљање све компоненте документа, али и да контролише сва деца из одређеног блока, на пример, ДИВ * {}.

Предности - можете контролисати велики број предмета у исто време.

Цонс - није довољно флексибилан опција. Поред тога, употреба овог селектора, у неким случајевима успорити рад странице.

од атрибута

Нека буде могуће контролисати елемент са посебним атрибутом. На пример, имате велики број улазних ознака са различитим врстама атрибута. Један од њих - текст, други - лозинка, трећа - број. Наравно, можете да подесите сваку класу или ИД, али то није увек згодно. ЦСС селектори атрибута омогућавају да се прецизира вредности за поједине ознаке са максималном прецизношћу. На пример, овако:

инпут [типе = 'тект'] {}

Овај селектор ће изабрати све атрибуте са врстом унос текста.

Алат је прилично флексибилан и може се користити са било којим од ознака, у које се може атрибути. Али то није све! ЦСС спецификација има способност да контролише елементе са још више удобности!

Замислите да ваша страница има улаз са атрибутом плацехолдер = "Унесите име" и улаз чувар места = "Унесите лозинку". Они такође могу бити изабрани помоћу селектора! Да бисте то урадили, користите следећу структуру:

инпут [плацехолдер = "Унесите име"] {} ор инпут [плацехолдер = "Унесите лозинку"]

Можда флексибилнији рад са атрибутима. Рецимо да имате велики број ознака са сличним атрибутима насловом (на пример, "Цаспиан" и "Каспијском"). Да бисте изабрали како, користите следеће изборе:

[Титле * = "Каспииск"]

ЦСС ће изабрати све ставке у наслову од којих су симболи "Каспијског мора", тј. Е., "Цаспиан" и "Каспијан".

Такође можете да изаберете ознаке које почињу са одређени карактер атрибуте:

[Наслов ^ = "знак не"] {}

или прекине их:

[Наслов $ = "лефт карактер"] {}.

Предности - максимална флексибилност. Можете одабрати било које постојеће елементе страница без петљају са часовима.

Мане - користи релативно ретко, само у посебним случајевима. Многи Веб дизајнери воле да методологији, јер је класа ствар је лакше него да се организују бројне квадратних заграде и знака "једнако". Поред тога, ови селектори не раде у интернет верзијама Екплорер 7 и испод. Међутим, који су сада треба стари Интернет Екплорер?

Псеудо-цласс селектори

Означава псеудо-статус елемент. На пример ,: ховер - шта се дешава са делу странице када пређете ,: посетили - на посетио везу. То такође укључује елементе као што су: првог детета и: ласт-дете.

Овај тип селектор се активно користи у модерној изгледу, јер је захваљујући њој можете направити страницу "уживо" без употребе ЈаваСцрипт. На пример, желите да се уверите да када пређете преко дугмета са класе бтн, његова боја промењена. Да би то урадили, користимо следећу структуру:

.бтн: линк {

бацкгроунд-цолор: ред;

}

Лепота се може одредити у основним својствима дугме, транзициони имовине, на пример, 0.5с - у овом случају, дугме неће руменило одмах, а у року од пола секунде.

Врлине - се широко користе за "оживљавање" страница. Једноставан за употребу.

Мане - нису. Ово је заиста корисна алатка. Међутим, веб неискусни дизајнери могу да се изгуби у обиљу псеудо-класе. Проблем је решен студију и праксу.

псеудо-селектори

"Псеудо" - то су делови странице које нису у ХТМЛ-у, али се и даље могу управљати. Нисте разумели? То је много лакше него што изгледа. На пример, желите да се прво слово у низу велики и црвени, остављајући други мали и црни текст. Наравно, може се закључити да је писмо у распону са одређене класе, али је дуго и досадно. То је много лакше да бисте изабрали цео пасус и користе псеудо :: прве писмо. То даје могућност да контролише изглед прво слово.

Постоји прилично велики број псеудо-елемената. Мало је вероватно да успе листу их у један чланак. Можете пронаћи релевантне информације у омиљеном претраживача.

Предности - пружају флексибилност да прилагодите изглед странице.

Мане - нови њима су често збуњени. Многи селекције ову врсту посла само у појединим бровсерима.

da резимирамо

Селектор - моћно средство за контролу протока докумената. Захваљујући њему, можете да изаберете сваку компоненту странице (чак постоје само делимично). Будите сигурни да науче све опције на располагању, или чак да их напише. Ово је посебно важно ако правите сложене странице са модерним дизајном и много интерактивних елемената.