ЦСС селектори и њихови типови

ЦСС селектори су специфична ЦСС структура која вам омогућава да изаберете одређени елемент у ХТМЛ коду и да га стилизујете. Свака од њих има своју специфичност, тј. Може преклапати друге, „слабије“ особине.

ЦСС селектор по ознаци и класи

Најједноставнији селектори су по ознакама и по класама. Означивач је најчешћи и одабире све ставке са одређеном ознаком. На пример, у својствима можете да напишете следећи ЦСС код: "п {цолор: блуе}", где је "п" ознака пасуса, а "цолор: блуе" ознака боја текста. Као резултат, текст у свим параграфима ће постати плав. Ознаке селектора се могу раздвојити зарезима, а не морате писати двапут.

Ако су неким параграфима додељена класа, на пример „плава“, онда се одговор ЦСС селектора може још прецизније конфигурисати. Али његов унос у својствима ће бити другачији - тачка ће се појавити испред имена класе. То јест, да бисте изабрали све ставке којима је додељена “плава” класа и обојили их плавом бојом, морате да напишете следећи код у ЦСС својствима: “.блуе: {цолор: блуе}”. Овај селектор је специфичнији од ЦСС селектора по ознаци и јачи је од њега, али је један од најједноставнијих. Постоје сложенија правила која вам омогућују да одаберете мале групе елемената.

Садржи селекторе по ИД-у

Селектори по ид или ид су специфичнији за класу и атрибут. То јест, када се користи у каскади, они ће "надмашити" остале сличне селекторе. Идентификатори такође помажу да се тачно изабере одређени елемент у коду, али се њихова употреба у дизајну страница сматра лошом праксом међу веб дизајнерима. Само у врло ријетким случајевима, на примјер при креирању клизача на ЦСС-у, ова пракса је прихватљива. Чињеница је да унутар једне странице може бити само један елемент са одређеним ид. Сходно томе, због јединствености ЦСС селектора по ид, може се користити само за један елемент. У овом случају, много је логичније користити класе, а не идентификаторе.

Различита мишљења о селектору ид-а

Али постоји и супротно мишљење да идентификатор помаже да се идентификује тај део кода на страници, који треба да буде у једној копији. Истовремено, иако га селектори класа могу замијенити, требали би се користити за велике групе елемената, ау оним мјестима гдје је потребна прецизност, боље је користити ид. Свака писаћа машина има право да развије своје лично мишљење о овом питању и да напише код у свом стилу. Приликом писања селектора на ид испред њега, користи се симбол "#". То јест, линија кода ће изгледати овако: "#блуе: {цолор: блуе}". Са таквим записом, елемент са идентификатором "# плаво" ће бити обојен у плаво.

Цасцаде усе

Када користите ЦСС селекторе по иду у ХТМЛ-у, можете користити и каскадно својство. На пример, ако је потребно да изаберете неку подређену ознаку унутар ознаке са идентификатором и промените њена својства, прво морате да напишете име идентификатора са мрежом, затим дете ознаку и њена својства. Такви селектори се називају угњеждени. То значи да линија кода изгледа овако: "#ид п {цолор: блуе}". Затим унутар родитељског елемента са овим идентификатором у детаљем, боја текста се мења у плаву.

Коришћење детектора за децу

Друга опција за кориштење каскаде за промјену својстава подређених елемената се користи ако требате одабрати само одређени дио кода. Такође се назива селектор насљедника. На пример, да бисте изабрали пасус унутар реда табеле, користите следећи ЦСС селекторски унос: “ул ли> п: {цолор: блуе}”. Вриједи обратити пажњу на чињеницу да што је дужи запис, то је већа вјероватноћа да ћете моћи промијенити неку специфичну особину елемента, јер она постаје приоритет за каскаду. На пример, елементи са неким другим својством ЦСС селектора на класи која је родитељ неће у потпуности променити њихова својства. Само ће се одређени део текста унутар листе префарбати.

Систер Елемент Селецтор

Још један интересантан начин за кориштење каскадног су сусједни ЦСС селектори. Они се снимају као збир селектора: “спан + а {цолор блуе}”. У овом случају, сусјед је онај под којим постоји још један који одговара потребним параметрима. Према томе, ако у коду постоје три елемента, онда се имовина неће примијенити на прву од њих, јер она нема сусједну, и све наредне, да. То је због иконе суме, када се додају следећи селектори, а не претходних. Такав запис помаже да се смањи код, а не да се напише неколико ЦСС селектора за различите ознаке, примењујући исте особине на њих. Ако је други елемент листе такође подешен на класу, а запис је промењен на “.цласс + а {цолор блуе}”, онда ће одбројавање почети од њега и својства ће бити промењена за следеће елементе који одговарају правилу, а прва два ће остати иста.

Претпоставимо да у нашем коду постоје три идентичне ознаке са различитим класама и да морате изабрати све елементе након неке специфичне. У овом случају, примена само ЦСС таг селектора неће помоћи. Да бисте то урадили, користите следећи селектор: ".цласс ~ див". Овим се бирају елементи са ознаком ДИВ која прати наведену класу. Ако желимо да изаберемо не само елементе са ознаком ДИВ-а, него и све наредне, уместо ознаке после знака тилде, треба да ставимо звездицу - “*”. Такав запис ће значити да морате да изаберете све што следи после дате класе. Опћенито можете одабрати све елементе на страници, ако као селектор оставите само звјездицу.

ЦСС селектори атрибута

Претпоставимо да у нашем коду постоје елементи са неким атрибутима, али они се разликују једни од других и пишу се цртицом, и морамо изабрати све оне чије име класе почиње са одређеном речју, на пример, “селектор”, и класе су одвојене. знак "-". Шта учинити у овом случају? Секторски унос почиње са угластим заградама, где се прво уписује име атрибута, затим вертикална коса црта, знакови "=" и "селектор": "дата- | = селектор". Затим напишите жељено својство које желите да промените. Као резултат, изабран је елемент са специфицираним параметрима. Промјеном класа, можете промијенити својства одређених дијелова кода. Ако имена класа нису написана цртицом, већ једном речју, онда се могу и изабрати, али користећи мало другачији унос. У овом случају, вертикална коса црта се замењује симболом "^": "подаци ^ = селектор". Овај селектор бира подниз са почетком имена класе.

Како одабрати елемент са дефинитивним завршетком у називу класе

Сада ћемо поступити другачије и изабрати дијелове кода не на почетку описа класе, већ на посљедња слова у његовом имену. За ово нам је потребна икона долара. Ставимо га уместо цхецкбок-а, а после знака једнакости пишемо крај назива класе: “дата $ = цтор”. Елементи са овом комбинацијом слова сада ће изабрати одређена својства и применити их. Можете одабрати било који атрибут. Хајде да анализирамо шта да радимо ако треба да пронађемо елемент са неком комбинацијом слова у средини речи. У овом случају, знак долар мијењамо на звјездицу, а након знака једнакости уписујемо потребна слова: "дата * = цт".

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

За везе, обично се користе специјални ЦСС селектори, који приказују њихова различита стања: мирно, фокусирано, активно, прошло - називају се псеудо-класе. Псеудо-класа за активну везу на којој курсор показује је написана на следећи начин: “а: ацтиве”. Даље, постоје нека својства, најчешће се позадина мења или се додаје сенка. Ако додате ово својство за линк и кликнете на њега, он мења боју у наведену. Још једна псеудо-класа - ховер показује да је веза већ прошла. Писано је овако: "а: ховер".

Карактеристике активних и фокусних стања

Активно је често збуњено са другим стањем - фокусом. Снима се овако: "а: фокус" и означава активно стање дугмета када радите са тастатуре. То јест, ако користите ТАБ тастер, активна веза ће бити означена посебном бојом. Ово својство мора да се користи, јер не могу сви корисници да користе миш за кретање по сајту. Неки могу имати слаб вид или друга здравствена ограничења, тако да се крећу по страници помоћу кључева или посебних уређаја. Игнорисање стања дугмета у фокусу представља велики недостатак за такав параметар у дизајну веб сајта као приступачности и има значајан утицај на његову присутност од стране одређене категорије корисника. Са нормалном навигацијом мишем, веза постаје активна и фокусирана. Због тога је при обликовању елемената важно обратити пажњу на то.

Псеудо-елементи

Псеудо-елементи вам омогућавају да дефинишете одређене стилове без дефинисања у самој ХТМЛ структури. Они се пишу овако: име селектора, знак "::", име псеудо-елемента. Најчешћи елементи су "пре" и "послије". Они имају својство "садржај", не могу се примијенити на интерне стилове. “Након” је потребно за додавање садржаја након садржаја одређене ставке. Шта тачно треба да буде убачено бележи се у својству "садржаја". Слично томе, псеудо-елемент "пре" додаје садржај пре садржаја елемента. Употреба ових специјалних селектора вам омогућава да смањите код и да не напишете нову структуру сваки пут за неки његов део, ако треба да додате мали детаљ на одређено место у контејнеру. Врло се често користе приликом обликовања страница и додавања неке врсте декоративних елемената. Комбинације свих ових опција помажу у стварању необичних ефеката на страници и увелико помажу дизајнеру изгледа.