CSS selectors. aina ya selectors

, ambapo kila unataka kuweka rangi maalum. Jinsi ya kufanya hivyo? Standard CSS selectors haifai kwa vitambulisho, wao zinaonyesha vigezo kwa ajili ya vitalu wote mara moja. ufumbuzi ni rahisi. Hawawajui wanachama darasa. Kwa mfano, kwanza kupokea darasa div = 'nyekundu', ya pili - class = 'bluu', ya tatu - class = 'kijani'. Sasa inaweza kuchaguliwa kwa kutumia meza CSS.

syntax ni kama ifuatavyo: Inaonyesha hatua ( "."), ikifuatiwa na kuandika jina la darasa. Kusimamia kitengo kwanza, kutumia ujenzi .red. Pili - .blue na kadhalika.

Muhimu! Inapendekezwa kutumia maadili ya maana ya sifa ya darasa. Ni kuchukuliwa kama njia mbaya ya kutumia tafsiri kwa (mfano, krasiviy-blok) au mchanganyiko random ya barua / idadi (ojfh834871). Katika kanuni hii, wewe ni wajibu wa kupata kuchanganyikiwa, sembuse matatizo ambayo uso wale ambao watakuwa kushiriki katika mradi baada ya wewe. chaguo bora - kutumia mbinu yoyote, kama vile BEM.

Manufaa - ya juu kiasi kubadilika.

Hasara - mambo mbalimbali inaweza kuwa moja na darasa moja, ambayo ina maana kwamba wao kuhaririwa kwa pamoja. tatizo ni kutatuliwa kwa kutumia mbinu kama vile urithi wa preprocessors. Kuwa na uhakika wa kupata mikono yako chini, Sass au baadhi kabla ya processor mengine, kwa kiasi kikubwa kurahisisha kazi.

ID selector

Kuhusu hili toleo maoni coders na programmers ni utata. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Baadhi tutorials CSS wala kupendekeza matumizi ya kitambulisho, kwa sababu katika maombi sahihi unaweza kusababisha matatizo ya urithi. Hata hivyo, wataalam wengi ni kikamilifu kupanga yao katika mpangilio. Unaamua. # »), затем имя блока. syntax ni kama ifuatavyo: pauni ishara ( "#"), kisha jina la kuzuia. #red. Kwa mfano, #red.

отличается от класса по нескольким параметрам. ID ni tofauti kutoka darasa kwa njia kadhaa. ID. Kwanza, ukurasa inaweza kuwa mawili ya kufanana ID. Wao ni kupewa jina la kipekee. Pili, kama selector ina kipaumbele juu. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Hii ina maana kwamba kama wewe taja kitengo darasa nyekundu na kutaja katika meza CSS nyekundu background rangi, na kisha hawawajui ni kitambulisho kimoja bluu na kutaja rangi ya bluu, kitengo kurejea bluu.

Manufaa - unaweza kudhibiti kipengele maalum, kupuuza mitindo ya vitambulisho na madarasa.

ID и class. Hasara - rahisi kupotea kwa idadi kubwa ya ID na darasa.

Muhimu! ID вам, в общем-то, не нужны. Kama ni kutumia BEM mbinu (au analogues yake), ID na wewe, kwa ujumla, si inahitajika. Mbinu hii inahusisha matumizi ya madarasa mpangilio kipekee kwamba rahisi zaidi.

selector wote

{}. Syntax: Starlets ishara ( "*") na braces, yaani, {*} ...

Kutumika hawawajui vipengele fulani mara moja mambo yote ya ukurasa. Wakati hii inaweza kuwa muhimu? box-sizing: border-box. Kwa mfano, kama unataka kuweka ukurasa mali sanduku-sizing: mpaka sanduku. div *{}. Hawawezi tu kutumika kusimamia sehemu zote za hati, lakini pia kudhibiti watoto wa kuzuia maalum, kwa mfano, div * {}.

Manufaa - unaweza kudhibiti idadi kubwa ya vitu kwa wakati.

Africa - kutosha rahisi chaguo. Aidha, matumizi ya selector hii, wakati mwingine kupunguza kasi ya ukurasa kazi.

na sifa

Kufanya hivyo inawezekana kudhibiti kipengele na sifa maalum. Kwa mfano, unaweza kuwa na idadi ya vitambulisho pembejeo na aina mbalimbali sifa. Mmoja wao - Nakala, pili - password, wa tatu - Idadi. Bila shaka, unaweza kuweka kila darasa au ID, lakini si mara zote kwa urahisi. CSS selectors ya sifa ya kufanya hivyo inawezekana kubainisha maadili kwa baadhi ya vitambulisho kwa usahihi upeo. Kwa mfano, kama hivi:

pembejeo [ 'text' aina =] {}

selector hiki kuchagua sifa zote na aina ya maandishi.

chombo ni rahisi kubadilika sana na inaweza kutumika kwa yoyote ya vitambulisho, ambapo kuna inaweza kuwa na sifa. Lakini si kwamba wote! CSS vipimo ina uwezo wa kudhibiti mambo na urahisi hata zaidi!

Fikiria kwamba ukurasa wako una pembejeo na sifa kishika = "Weka jina" na pembejeo kishika = "Weka nenosiri". Wanaweza pia kuchaguliwa kwa kutumia selector! Ili kufanya hivyo, kutumia mfumo wa zifuatazo:

pembejeo [kishika = "Weka jina"] {} au pembejeo [kishika = "Weka nenosiri"]

Labda rahisi zaidi kufanya kazi na sifa. Tuseme una idadi ya vitambulisho na sawa sifa jina (kwa mfano, "Caspian" na "Caspian"). Kuchagua wote, kutumia chaguo zifuatazo:

[Jina * = "Kaspiysk"]

CSS kuchagua vitu vyote katika cheo ambapo kuna alama ya "Caspian", yaani. E., Na "Caspian" na "Caspian".

Unaweza pia kuchagua vitambulisho yanayoanza kwa kibambo fulani sifa:

[Jina ^ = "tabia unataka"] {}

au kusitisha yao:

[Jina $ = "tabia kulia"] {}.

Manufaa - upeo kubadilika. Unaweza kuchagua yoyote zilizopo vipengele vya bila messing na madarasa.

Hasara - kutumika mara chache, ni katika hali maalum. Wengi mtandao wabunifu wanapendelea mbinu, tangu darasa uhakika ni rahisi kuliko kupanga mbalimbali mabano mraba na ishara "sawa". Aidha, selectors hii si kazi katika Internet Explorer versions 7 na chini. Hata hivyo, ambao ni sasa wanahitaji zamani Internet Explorer?

selectors Pseudo darasa

Inaashiria kipengele Pseudo-hali. Kwa mfano ,: hover - nini kinatokea kwa sehemu ya ukurasa wakati hover ,: alitembelea - kiungo alitembelea. Pia ni pamoja na mambo kama vile: kwanza mtoto na: mwisho wa watoto.

Aina hii ya selector hutumiwa kikamilifu katika mpangilio wa kisasa, kwa sababu shukrani kwa hiyo unaweza kufanya ukurasa "live" bila ya matumizi ya JavaScript. Kwa mfano, unataka kuhakikisha kwamba wakati hover juu ya kifungo na darasa la btn rangi yake iliyopita. Ili kufanya hivyo, sisi kutumia mfumo ufuatao:

.btn: hover {

background-color: nyekundu;

}

Beauty inaweza maalum katika mali ya msingi ya kifungo, mpito mali, kwa mfano, 0.5s - katika kesi hii, kifungo si kuona haya usoni mara moja, na ndani ya kipindi cha pili.

Fadhila - ni sana kutumika kwa ajili ya "uamsho" ya kurasa. Rahisi kutumia.

Hasara - ni la. Hii ni zana kweli Handy. Hata hivyo, uzoefu wabunifu mtandao unaweza kupata waliopotea katika wingi wa madarasa Pseudo. tatizo ni kutatuliwa utafiti na mazoezi.

Pseudo-selectors

"Pseudo" - hizi ni sehemu ya ukurasa ambayo si katika HTML, lakini bado inaweza kusimamiwa. Hakuwa kuelewa? Ni rahisi sana kuliko inavyoonekana. Kwa mfano, unataka kufanya herufi ya kwanza katika mfululizo kubwa na nyekundu, na kuacha wengine wadogo na nyeusi maandishi. Bila shaka, inaweza kuhitimishwa kwamba barua katika span na darasa fulani, lakini ni muda mrefu na boring. Ni rahisi zaidi ya kuchagua aya nzima na kutumia Pseudo :: kwanza barua. Inakupa fursa ya kudhibiti muonekano wa barua ya kwanza.

Kuna kabisa idadi kubwa ya pseudo-vipengele. Orodha yao katika makala moja ni uwezekano wa kufanikiwa. Unaweza kupata taarifa muhimu katika favorite search injini yako.

Manufaa - kutoa kubadilika Customize ya kuangalia ya ukurasa.

Hasara - mpya kwao mara nyingi kuchanganyikiwa. uchaguzi wengi wa aina hii ya kazi tu katika browsers fulani.

kwa kifupi

Selector - chombo nguvu kwa ajili ya kudhibiti hati kati yake. Shukrani kwake, unaweza kuchagua kila sehemu moja ya ukurasa (kuna hata sehemu tu). Kuwa na uhakika wa kujifunza chaguzi zote zilizopo, au hata kuandika yao chini. Hii ni muhimu hasa kama wewe kujenga kurasa tata na kubuni kisasa na kura ya mambo ya maingiliano.