css տարրի տեսակի ընտրիչ: Ընտրիչներ. Ընտրիչներ CSS-ում
Ինչ է ընտրիչը css-ումայդ տարրի կամ տարրերի խմբի նկարագրությունն է, որը զննարկիչին ցույց է տալիս, թե որ տարրը պետք է ընտրել՝ ոճը կիրառելու համար։ Եկեք նայենք հիմնական CSS ընտրիչներին:
1) .X
.թեմա-վերնագիր (ֆոնի գույնը՝ դեղին; )CSS ընտրիչ ըստ X դասի. ID-ի և դասի միջև տարբերությունն այն է, որ էջի մի քանի տարրեր կարող են ունենալ նույն դասը, և id-ը միշտ եզակի է: Դասերը պետք է օգտագործվեն մի քանի տարրերի վրա նույն ոճը կիրառելու համար:
- Chrome
- Firefox
- սաֆարի
- Օպերա
2) #X
#բովանդակություն (լայնություն՝ 960px; լուսանցք՝ 0 ավտոմատ; )CSS ընտրիչ ըստ ID-ի. CSS ընտրիչի դիմաց գտնվող ֆունտի նշանը ընտրում է այն տարրը, որի id = X է: ID-ով ոճավորելիս միշտ պետք է հիշել, որ այն պետք է լինի եզակի. էջում պետք է լինի միայն մեկ այդպիսի id: Հետևաբար, ավելի լավ է օգտագործել ընտրիչները ըստ դասերի, դասերի համակցությունների կամ պիտակների անունների: Այնուամենայնիվ, id ընտրիչները հիանալի են ավտոմատացված թեստավորման համար, քանի որ դրանք թույլ է տալիս անմիջապես շփվել ճիշտ տարրի հետ և վստահ լինել, որ այն միակն է էջում:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
3) *
* (լուսանցք՝ 0; լիցք՝ 0; )CSS ընտրիչ բոլոր տարրերի համար. Աստղանիշը ընտրում է բոլոր տարրերը, որոնք գտնվում են էջում: Շատ մշակողներ այն օգտագործում են էջի բոլոր տարրերի լուսանցքները (լուսանցքը և լիցքավորումը) հեռացնելու համար (զրոյացնել): Այնուամենայնիվ, գործնականում ավելի լավ է դա չանել, քանի որ այս CSS ընտրիչը բավականին ծանրաբեռնում է զննարկիչը՝ կրկնելով էջի բոլոր տարրերը:
* խորհրդանիշը կարող է օգտագործվել նաև բոլոր մանկական տարրերն ընտրելու համար.
#header * ( եզրագիծը՝ 5px ամուր մոխրագույն; )
Այս օրինակը ընտրում է #header-ով տարրի բոլոր երեխաներին (հետնորդներին): Բայց միշտ արժե հիշել, որ այս ընտրիչը բավականին ծանր է բրաուզերի համար:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
4) X
a (գույնը՝ կանաչ;) ol (լուսանցք-ձախ՝ 15px;)CSS տեսակի ընտրիչ. Ինչպե՞ս ընտրել նույն տեսակի բոլոր տարրերը, եթե դրանք չունեն ոչ id, ոչ դաս: Դուք պետք է օգտագործեք CSS ընտրիչը ըստ տարրի տեսակի: Օրինակ, էջի բոլոր պատվիրված ցուցակները ընտրելու համար օգտագործեք ol (...), ինչպես ցույց է տրված վերևում:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
5) X Y
li a (տառատեսակի քաշը՝ թավ; տեքստի ձևավորում՝ ոչ մեկը;)CSS երեխայի ընտրիչկամ CSS երեխայի ընտրիչօգտագործվում է առավել հաճախ: Այն օգտագործվում է, երբ անհրաժեշտ է ընտրել որոշակի տեսակի տարրեր մանկական տարրերի հավաքածուից: Օրինակ, դուք պետք է ընդգծեք բոլոր հղումները, որոնք գտնվում են li տարրում: Այս դեպքում օգտագործեք այս ընտրիչը: Նման ընտրիչների շղթաներ օգտագործելիս միշտ հարցրեք ինքներդ ձեզ՝ կարո՞ղ եք ընտրել ընտրիչների էլ ավելի կարճ հաջորդականություն տվյալ տարրն ընտրելու համար:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
6) X + Y
div + p ( տառատեսակի ընտանիք՝ «Helvetica Neue», Arial, sans-serif; տառաչափ՝ 18px;)Հարակից տարրի ընտրիչընտրում է միայն Y տիպի տարր, որը գալիս է X տարրից անմիջապես հետո: Այս դեպքում, յուրաքանչյուր div տարրից անմիջապես հետո հաջորդող յուրաքանչյուր պարբերություն կստանա հատուկ տառատեսակի տեսակ և չափ:
- Ինչ բրաուզերներ են աջակցվում.
- IE7+
- Firefox
- Chrome
- սաֆարի
- Chrome
7) X > Y
#content > ul ( եզրագիծը՝ 1px ամուր կանաչ; )CSS երեխայի ընտրիչ. X Y և X > Y ընտրիչների միջև տարբերությունն այն է, որ խնդրո առարկա CSS ընտրիչը կընտրի միայն անմիջական զավակ տարրերը (ընտրեք միայն ուղիղ ժառանգները): Օրինակ՝
- Ցանկի տարր
- Ցանկի առաջին տարրի հետնորդը
- Ցանկի տարր
- Ցանկի տարր
#content > ul CSS ընտրիչը կընտրի միայն ul-ը, որը id="container"-ով div-ի ուղղակի երեխա է: Այն չի ընտրի մի ul, որը առաջին li-ի երեխա է: Սա բավականին արագ CSS ընտրիչ է:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
8) X ~ Y
ol ~ p (լուսանցք-ձախ՝ 10px;)Քույր (ենթալեզու) տարրերի ընտրիչավելի քիչ խիստ, քան X + Y-ը: Այն կընտրի ոչ միայն առաջինը, այլ նաև p-ի մյուս բոլոր տարրերը, որոնք հետևում են ol-ին:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
Կեղծ-դաս: հղումօգտագործվում է բոլոր հղումները ընտրելու համար, որոնք դեռ չեն սեղմվել: Եթե Ձեզ անհրաժեշտ է որոշակի ոճ կիրառել արդեն այցելած հղումների վրա, ապա սա օգտագործվում է կեղծ դասարան:այցելված.
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
10) X
ա (գույնը՝ կարմիր; )CSS ընտրիչ ըստ հատկանիշի. Այս օրինակում ընտրված են միայն այն հղումները, որոնք ունեն վերնագրի հատկանիշ:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
11) X
ա (գույնը՝ դեղին;)- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
12) X
ա (գույնը՝ #dfc11f;)Աստղանիշը նշանակում է, որ ձեր փնտրած արժեքը պետք է լինի ինչ-որ տեղ հատկանիշի մեջ (href հատկանիշի ցանկացած մաս): Այսպիսով, կընտրվեն նաև https://www..stijit.-ի հղումները, իսկ բոլոր ընտրված հղումների վրա կկիրառվի ոսկե գույն:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
13) X
a (ֆոն՝ url(path/to/external/icon.png) առանց կրկնության; padding-left՝ 15px; )Որոշ կայքեր այլ կայքերի հղումների կողքին ունեն փոքր սլաքների պատկերակներ, որոնք ցույց են տալիս, որ դրանք արտաքին հղումներ են: Կարատ «^» տողի սկիզբը նշելու նշան է: Այսպիսով, բոլոր թեգերն ընտրելու համար, որոնց href-ը սկսվում է http-ով, անհրաժեշտ է օգտագործել CSS ընտրիչը կարատով, ինչպես ցույց է տրված վերը նշված օրինակում:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
14) X
ա (գույնը՝ կանաչ; )Սա օգտագործում է կանոնավոր արտահայտություն և $ խորհրդանիշ՝ տողի վերջը նշելու համար: Այս օրինակում մենք փնտրում ենք բոլոր հղումները, որոնք կապում են պատկերներին .jpg ընդլայնմամբ:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
15) X
ա (գույնը՝ կանաչ; )Այստեղ մենք դիմում ենք CSS ընտրիչ ըստ հատուկ հատկանիշի. Մենք յուրաքանչյուր հղմանը ավելացնում ենք մեր սեփական տվյալների ֆայլի ատրիբուտը.
հղում
Այժմ, օգտագործելով վերը նշված CSS ընտրիչը, կարող եք ընտրել ցանկացած ընդլայնմամբ պատկերներ տանող բոլոր հղումները:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
16) X
Տիլդը (~) թույլ է տալիս ընտրել որոշակի հատկանիշ ատրիբուտների բացատով առանձնացված ցանկից: Դուք կարող եք գրել մեր սեփական data-info հատկանիշը, որում կարող եք նշել մի քանի հիմնաբառեր՝ բաժանված բացատով: Այս կերպ դուք կարող եք նշել, որ հղումը արտաքին է և տանում է դեպի պատկեր:
հղում
Օգտագործելով այս տեխնիկան՝ մենք կարող ենք տարրեր ընտրել մեզ անհրաժեշտ ատրիբուտների համակցություններով.
/* Ընտրեք այն տարրը, որի data-info հատկանիշը պարունակում է արտաքին արժեք */ a (գույնը՝ կանաչ; ) /* Ընտրեք այն տարրը, որի data-info հատկանիշը պարունակում է արժեքի պատկեր */ a ( եզրագիծը՝ 2px գծիկ սև; )
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
17) X:ստուգված
մուտքագրում՝ ստուգված ( եզրագիծը՝ 3px սկզբից սև; )Այս կեղծ դասը ընդգծում է միայն այնպիսի տարրեր, ինչպիսիք են վանդակը կամ ռադիոկոճակը, և միայն այն ժամանակ, երբ դրանք արդեն նշված վիճակում են:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
18) X: հետո
:before և :after կեղծ դասերը շատ օգտակար են. դրանք ստեղծում են բովանդակություն ընտրված տարրից առաջ և հետո:
Clearfix:after (բովանդակությունը՝ «»; ցուցադրում՝ արգելափակում; հստակ՝ երկուսն էլ; տեսանելիություն՝ թաքնված; տառաչափը՝ 0; բարձրություն՝ 0; ) .clearfix ( *ցուցադրում՝ inline-block; _բարձրությունը՝ 1%;
Այստեղ, օգտագործելով :after pseudo-class, .clearfix դասով բլոկից հետո ստեղծվում է դատարկ տող, որից հետո այն մաքրվում է։ Այս մոտեցումն օգտագործվում է, երբ հնարավոր չէ կիրառել գերհոսքը՝ թաքնված հատկությունը։
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
19) X: սավառնել
div:hover (ֆոնի գույնը՝ rgba (11,77,130,0.5); )Կիրառում է որոշակի ոճ տարրի վրա, երբ մկնիկի կուրսորը սավառնում է դրա վրա: Internet Explorer-ի հին տարբերակները կիրառվում են միայն հղումների վրա:
A: սավառնել (սահմանի ներքևում. 1px կետավոր կապույտ;)
- Ինչ բրաուզերներ են աջակցվում.
- IE6+ (Կիրառվում է միայն IE6-ի հղումներին)
- Chrome
- Firefox
- սաֆարի
- Օպերա
20) X:not(ընտրիչ)
div:not(#content) (գույնը՝ մոխրագույն; )Կեղծ դասակարգ ոչ (ժխտումներ)օգտակար է, երբ, օրինակ, բոլոր div-ները պետք է ընտրվեն, բացառությամբ id="content" ունեցողի:
Նույն սկզբունքով դուք կարող եք ընտրել բոլոր տարրերը, բացառությամբ p.
*:not(p) (գույնը՝ կապույտ;)
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
21) X::pseudoElement
p:: first-line (տառատեսակի քաշը` թավ; տառաչափը` 24px;)Կեղծ տարրերը կարող են օգտագործվել ենթատարրերի վրա ոճեր կիրառելու համար, օրինակ՝ պարբերության առաջին տողը կամ բառի առաջին տառը։ Կիրառվում է միայն արգելափակման տարրերի համար:
Ընտրելով պարբերության առաջին տառը.
P::առաջին տառ (տառատեսակ-ընտանիքը՝ գրական, տառաչափը՝ 30px; տառատեսակի քաշը՝ թավ; ներդիր՝ աջ՝ 1px; )
Ընտրելով պարբերության առաջին տողը.
P:առաջին տող (տառաչափը՝ 28px; տառատեսակի քաշը՝ թավ;)
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա
22) X:առաջին երեխա
ul li:first-child (սահմանի վերև՝ ոչ մեկը;)Կեղծ դասի առաջին երեխաընտրում է միայն մայր տարրի առաջին զավակին: Հաճախ օգտագործվում է ցանկի առաջին տարրից եզրագիծը հեռացնելու համար: Այդ կեղծ դասակարգը գոյություն ունի այդ ժամանակվանից css 1.
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- սաֆարի
- Օպերա 3.5+
- Android
23) X:վերջին երեխա
ul > li:last-child (սահման-ներքև. ոչ մեկը;)Կեղծ դասի վերջին երեխաընտրում է ծնող տարրի վերջին զավակը: Այն միայն հայտնվել է CSS 3.
- Ինչ բրաուզերներ են աջակցվում.
- IE9+ (IE8-ն աջակցում է առաջին երեխային, բայց ոչ վերջին երեխային: Microsoft (c))
- Chrome
- Firefox
- սաֆարի
- Օպերա 9.6+
- Android
24) X:միայն-երեխա
div p:only-child (գույնը՝ կանաչ; )Կեղծ-դասարանային միակ երեխաթույլ է տալիս ընտրել այն տարրերը, որոնք իրենց ծնողների միակ երեխաներն են:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox
- Safari 3.0+
- Օպերա 9.6+
- Android
25) X:n-րդ երեխա(n)
li:nth-child(3) (գույնը՝ սև; )Ընտրում է երեխայի տարրը պարամետրում նշված թվով: n-րդ երեխայի ընտրիչորպես պարամետր վերցնում է ամբողջ թիվ, բայց հաշվում է 1-ից, այսինքն. եթե ցանկանում եք ընտրել ցուցակի երկրորդ կետը, օգտագործեք li:nth-child(2) . Բոլոր կեղծ դասերը, որոնք օգտագործում են nth-child-ը, հայտնվեցին միայն սկսած CSS 3.
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Օպերա 9.6+
- Android 2.1+
- iOS 2.0+
26) X:nth-last-child(n)
li:nth-last-child(2) (գույնը՝ կարմիր; )Եթե դուք ունեք տարրերի մեծ ցանկ ul-ում և պետք է վերջից ընտրեք երրորդ տարրը: Li:nth-child(109) գրելու փոխարեն կարելի է օգտագործել nth-last-child վերջին երեխայի ընտրիչ. Այս մեթոդը նույնն է, ինչ նախորդը, բայց հետհաշվարկը վերջից է:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Օպերա 9.6+
- Android 2.1+
- iOS 2.0+
27) X:nth-of-typ(n)
ul:nth-of-type(3) ( եզրագիծը՝ 1px կետավոր սև; )Եթե էջում կան չորս չդասավորված ցուցակներ, և դուք ցանկանում եք ոճավորել միայն երրորդը, որը չունի եզակի id, ապա պետք է օգտագործեք nth-of-type:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Օպերա 9.6+
- Android 2.1+
- iOS 2.0+
28) X:n-րդ տիպի վերջին (n)
ul:nth-last-of-type(3) ( եզրագիծը՝ 2px ridge blue; )Կեղծ դասի n-րդ տիպի վերջին (n)նախատեսված է որոշակի տեսակի n-րդ տարրը վերջից ընտրելու համար:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Օպերա 9.6+
- Android 2.1+
- iOS 2.0+
29) X:միայն տեսակի
li:only-of-type (տառատեսակի քաշը՝ թավ; )Կեղծ դասի միայն տիպիընտրում է տարրեր, որոնք չունեն հարևաններ մայր տարրի ներսում: Օրինակ, կարող եք ընտրել բոլոր ul-երը, որոնք պարունակում են միայն մեկ li:
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Օպերա 9.6+
- Android 2.1+
- iOS 2.0+
30) X: տիպի առաջին
ul:first-of-type > li:nth-child(3) ( տառատեսակի ոճ՝ շեղ; )Կեղծ դասի առաջին տիպիընտրում է տվյալ տեսակի առաջին տարրը.
- Ինչ բրաուզերներ են աջակցվում.
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Օպերա 9.5+
- Android 2.1+
- iOS 2.0+
Դիզայնի կանոնների մի շարք (որոնք իրենց հերթին բաղկացած են գովազդի բլոկով սելեկտորներից), որոնք կիրառվում են որոշակի html թեգերի վրա, որոնց շնորհիվ ձևավորվում է կայքի տեսքը։
CSS ընտրիչ- սա CSS կանոնի անբաժանելի մասն է, որը պատասխանատու է հատուկ html թեգերի որոշման համար, որոնց վրա կկիրառվեն այս կանոնում նշված դիզայնի ոճերը:
Այսպիսով, ընտրիչների շնորհիվ է, որ զննարկիչը հասկանում է, թե էջի կոդի որ տարրերն են անհրաժեշտ դիզայնի հատուկ ոճեր կիրառելու համար:
CSS-ում էլեմենտների ընտրության գործիքը չափազանց ճկուն է և հարմար՝ ընտրելու ինչպես առանձին կոդի տարրեր, այնպես էլ տարրերի ամբողջ խմբեր, որոնք սահմանված են այս կամ այն հատկանիշով:
CSS ընտրիչների տեսակները
Ինչպես տեքստում նախադասությունները, CSS ընտրիչները գալիս են պարզ և բարդ ձևերով: Նրանց միջև տարբերությունն այն է, որ բարդերը ձեռք են բերվում մի քանի պարզերի համադրմամբ և օգտագործվում են ռեսուրսի վերջնական դիզայնը ճշգրտելու համար:
Միայն կասկադային ոճերի թերթիկների սովորական տեքստի տարբերությունն է կարևոր, թե ինչ հերթականությամբ և ինչ ընտրիչներ ենք օգտագործում: Ավելին, դրանից կախված կլինի ոչ միայն այն, թե ինչ տարրեր և ինչ հիմքով ենք մենք ընտրում, այլ նաև մեր կոդի մշակման արագությունը, որպես ամբողջություն, բայց նրբությունների մասին մենք կխոսենք հետագա հոդվածներում:
Պարզ ընտրիչներ
- Ունիվերսալ ընտրիչը պատասխանատու է փաստաթղթի ընդհանուր առմամբ բոլոր տարրերի ընտրության համար: Նշված է աստղանիշով: Այն սովորաբար օգտագործվում է լռելյայնորեն դրանցում տեղադրված բրաուզերների ոճերը զրոյացնելու համար, որպեսզի կայք այցելող բոլորը չկորցնեն դիզայնը սեփական զննարկիչի կարգավորումներից կամ տարբեր փլագիններից օգտվելու դեպքում…
* (որոշ ոճ;)
- Type Selector - Ընտրում է բոլոր պիտակները, որոնք համապատասխանում են որոշակի տեսակի: Նշված է պիտակի անունով: Օգտագործվում է փաստաթղթերի ձևավորման ընդհանուր կանոններ սահմանելու համար, օրինակ՝ վերնագրերի և փաստաթղթի պարզ տեքստի տարբեր տառատեսակներ սահմանելու համար:
h1 (որոշ ոճ;)
- – կկիրառի css կանոնը հատուկ դասի անուն ունեցող բոլոր թեգերի վրա: Նշված է կետով, որից անմիջապես հետո գրված է դասի անվանումը: Թերևս դասավորության մեջ ամենատարածված ընտրիչը: Այն սովորաբար օգտագործվում է նույն տեսակի, բայց ֆունկցիոնալությամբ տարբեր պիտակների համար տարբեր ոճեր սահմանելու համար:
LeftColumn (որոշ ոճ;)
- ID-ի ընտրիչը օգտագործվում է էջի եզակի տարրերը ոճավորելու համար: Սահմանված է հեշով, որին հաջորդում է id անունը: Այն օգտագործվում է, եթե Ձեզ անհրաժեշտ է ոճավորել մեկ կոնկրետ էջի տարր:
#alertButton (որոշ ոճ; )
- – ընտրում է պիտակներ, որոնք ունեն հատկանիշը: Նշվում է ատրիբուտի անունով քառակուսի փակագծերում: Այն կարող է օգտագործվել ինչպես պիտակների խմբի նախագծման համար, որտեղ նշված հատկանիշը պարզապես առկա է, այնպես էլ պիտակների խմբի համար, որտեղ առկա է նշված հատկանիշը որոշակի արժեքով:
[type] ( some style; ) [ type= "submit" ] ( some style; ) input[ type= "submit" ] ( some style; )
Կոմպլեքս ընտրիչներ
- Հետնորդների ընտրիչ – տարրերի ժառանգների ընտրություն (նշումներ մեկ այլ պիտակի ներսում): Նշված է բացատով (ծնող - բացատ - երեխա):
div p (որոշ ոճ;)
- Երեխաների ընտրիչ - ընտրում է մեկ այլ տարրի մեջ ուղղակիորեն տեղադրված տարր: Նշվում է «>» նշանով (ծնող-ստուգում-երեխա): Երեխաների տարրը տարբերվում է երեխայի տարրից նրանով, որ այն գալիս է անմիջապես ծնողից հետո (բնադրման առաջին մակարդակ): Մինչդեռ մյուսի ներսում գտնվող ցանկացած պիտակ համարվում է հետնորդ՝ անկախ բնադրման մակարդակից:
Կողային գոտի> ul (որոշ ոճ;)
- Եղբայրների տարրի ընտրիչ - ընտրում է այն պիտակը, որը գալիս է անմիջապես մեկ այլ պիտակի հետևից (ոչ թե ներսում, այլ հաջորդում է): Սահմանել պլյուսով (առաջին տարր - գումարած - քույր տարր): Գործնականում հազվադեպ է օգտագործվում: Դիմումի համար նախապայման է բոլոր տարրերի ընդհանուր ծնողի առկայությունը համակցված «+» նշանով:
h1+ p (որոշ ոճ;)
Կեղծ դասեր և կեղծ տարրեր
CSS ընտրիչների վերը նշված դասակարգումը կախված էր բացառապես փաստաթղթի նշագրումից: Եթե ցանկանում ենք փոխել տարրերի տեսքը՝ կախված էջի վրա դրա վիճակի փոփոխությունից (օրինակ՝ սավառնելիս կոճակի գույնը փոխելով), ապա կարող ենք օգտագործել կեղծ դասի և կեղծ տարրերի ընտրիչներ։
- Հիշեք, որ ի տարբերություն html-ի՝ CSS-ը մեծատառերի զգայուն է: Այսինքն՝ .active և .Active դասերը նույն բանը չեն։ Դրանք կկիրառվեն փաստաթղթի տարբեր տարրերի վրա, եթե այդպիսիք կան:
- Զարդարման ընտրիչները այնպես անվանեք, որ հետո չշփոթվեք՝ .leftColumn-ը լավ անուն է, .ձախը կախված է իրավիճակից, բայց ոչ շատ լավ, .llll-ը ինչ-որ աղբ է, դուք ինքներդ կասեք առանց. նայելով կոդը, որտեղի՞ց է առաջացել այս դասը:
- Եվս մեկ անգամ հիշեցնեմ. եթե էջում կա միայն մեկ տարր, ուրեմն բոլորը եզակի են, ապա դրա համար օգտագործում ենք id, բայց եթե կա հավանականություն, որ էջում կլինեն մեկ այլ նման կամ պարզապես նմանատիպ տարրեր, ապա օգտագործեք դասեր զարդարման համար.
Ամփոփելով
Ընտրիչներ CSS-ում- սա հզոր գործիք է էջի որոշակի տարրերի կամ տարրերի խմբի նույնականացման համար, որոնք միավորված են հատուկ հատկանիշով, այս ընտրիչի հետ կապված գովազդային բլոկում դրանց վրա ոճերի հետագա կիրառման համար:
Փոխազդեցության ընդհանուր սկզբունքներին տիրապետելուց և սելեկտորներ ստեղծելուց հետո դուք կմոռանաք վեբ փաստաթղթերի նախագծման հետ կապված խնդիրների մասին։ Ընտրիչների լավ իմացությունը կարող է զգալիորեն նվազեցնել html էջերի դասավորության ժամանակը:
Թեման, թեև առաջին հայացքից ծայրաստիճան շփոթեցնող է թվում, պրակտիկայի որոշակի ժամանակահատվածից հետո դառնում է պարզ և հասկանալի՝ որակական տեսության աջակցությամբ։
CSS փաստաթղթերի տեսքի լեզուն անընդհատ զարգանում է: Ժամանակի ընթացքում ոչ միայն աճում է դրա հզորությունն ու ֆունկցիոնալությունը, այլև ավելանում է ճկունությունն ու օգտագործման հեշտությունը:
Եկեք սկսենք պարզել այն: Բացեք ցանկացած CSS ձեռնարկ, առնվազն մեկ բաժին նվիրված կլինի ընտրիչների տեսակներին: Սա զարմանալի չէ, քանի որ դրանք էջի բովանդակությունը կառավարելու ամենահարմար միջոցներից են: Նրանց օգնությամբ դուք կարող եք շփվել բացարձակապես ցանկացած HTML տարրի հետ: Այժմ կան ընտրիչների 7 տեսակ.
- պիտակների համար;
- դասերի համար;
- ID-ի համար;
- ունիվերսալ;
- հատկանիշներ;
- շփվել կեղծ դասերի հետ;
- կառավարել կեղծ տարրերը.
Շարահյուսությունը պարզ է. Օգտագործել սովորելու համար բավական է կարդալ դրանց մասին: Ո՞ր տարբերակն է ավելի լավ ընտրել ձեր դեպքում բովանդակության վերահսկման համար: Փորձենք դա պարզել:
Պիտակների ընտրիչներ
Սա ամենապարզ տարբերակն է, որը ձայնագրման համար հատուկ գիտելիքներ չի պահանջում։ Թեգերը կառավարելու համար հարկավոր է օգտագործել դրանց անունը: Ենթադրենք, որ ձեր կայքի «վերնագիրը» փաթաթված է պիտակի մեջ
Առավելությունները - օգտագործման հեշտություն, բազմակողմանիություն:
Թերությունները - ճկունության լիակատար բացակայություն: Վերոնշյալ օրինակում վերնագրի բոլոր պիտակները կընտրվեն միանգամից: Բայց ինչ անել, եթե ձեզ միայն անհրաժեշտ է կառավարել մեկը:
Դասերի ընտրիչներ
Ամենատարածված տարբերակը. Նախագծված է class հատկանիշով պիտակները կառավարելու համար: Ենթադրենք, որ ձեր կոդի մեջ ունեք երեք բլոկ
Շարահյուսությունը հետևյալն է՝ նշեք կետ (“), որից հետո գրում ենք դասի անվանումը։ Առաջին բլոկը կառավարելու համար մենք օգտագործում ենք .red կառուցվածքը: Երկրորդը .կապույտ է և այլն:
Կարևոր.Դասի հատկանիշի համար խորհուրդ է տրվում օգտագործել իմաստալից արժեքներ: Տառադարձման (օրինակ՝ krasiviy-blok) կամ տառերի/թվերի (ojfh834871) պատահական համակցություններ օգտագործելը համարվում է վատ վարքագիծ: Նման օրենսգրքում դուք հաստատ կշփոթվեք, էլ չասած, թե ինչ դժվարությունների կհանդիպեն նրանք, ովքեր ձեզնից հետո կզբաղվեն նախագծով։ Լավագույն տարբերակը ինչ-որ մեթոդաբանության օգտագործումն է, ինչպիսին է BEM-ը:
Առավելությունները՝ բավականին բարձր ճկունություն։
Թերությունները. մի քանի տարրեր կարող են ունենալ նույն դասը, ինչը նշանակում է, որ դրանք կխմբագրվեն միաժամանակ: Խնդիրը լուծվում է մեթոդաբանության, ինչպես նաև նախապրոցեսորների ժառանգականության միջոցով։ Համոզվեք, որ ավելի քիչ սովորեք, sass կամ ինչ-որ այլ նախապրոցեսոր, դրանք մեծապես կհեշտացնեն աշխատանքը:
Ընտրիչը ID-ով
Այս տարբերակի մասին դասավորության դիզայներների և ծրագրավորողների կարծիքները միանշանակ չեն: Որոշ դասագրքերcssընդհանրապես խորհուրդ չի տրվումID,քանի որ դրանք կարող են խնդիրներ առաջացնել ժառանգականության հետ, եթե դրանք անզգույշ օգտագործվեն: Այնուամենայնիվ, շատ փորձագետներ ակտիվորեն տեղադրում են դրանք ամբողջ նշագրման ընթացքում: Դու որոշիր։ Շարահյուսությունը հետևյալն է. հեշ նշանը ("# ”), ապա բլոկի անունը: Օրինակ,#կարմիր.
IDդասարանից տարբերվում է մի քանի առումներով. Նախ, էջի վրա երկու նույնը չկա:ID.Նրանց տրվում են եզակի անուններ: Երկրորդ՝ նման ընտրիչն ավելի բարձր առաջնահերթություն ունի։ Սա նշանակում է, որ եթե դուք բլոկին դաս եք տալիսկարմիրև նշեք աղյուսակներումcssկարմիր և այնուհետև նշանակիր այն նույնինid կապույտև նշեք կապույտ գույնը, բլոկը կդառնա կապույտ:
Առավելությունները. դուք կարող եք կառավարել որոշակի տարր՝ առանց ուշադրություն դարձնելու պիտակների և դասերի ոճերին:
Թերությունները - հեշտ է շփոթել մեծ թվովIDԵվդաս.
Կարևոր.Եթե դուք օգտագործում եք BEM մեթոդաբանությունը (կամ համարժեքները),IDդուք ընդհանրապես դրա կարիքը չունեք: Այս դասավորության տեխնիկան ներառում է եզակի դասերի օգտագործումը, ինչը շատ ավելի հարմար է:
Ունիվերսալ ընտրիչ
Շարահյուսություն՝ աստղանիշ («*») և գանգուր փակագծեր, այսինքն՝ *{}.
Օգտագործվում է էջի բոլոր տարրերին միանգամից որոշակի հատկանիշներ հատկացնելու համար: Ե՞րբ կարող է սա օգտակար լինել: Օրինակ, եթե ցանկանում եք սահմանել էջի հատկությունըարկղ-չափս՝ սահման-արկղ.Կարող է օգտագործվել ոչ միայն փաստաթղթի բոլոր բաղադրիչները կառավարելու համար, այլ նաև որոշակի բլոկի բոլոր մանկական տարրերը կառավարելու համար, օրինակ.div * ().
Առավելությունները - դուք կարող եք միաժամանակ կառավարել մեծ թվով տարրեր:
Թերությունները՝ անբավարար ճկուն տարբերակ։ Բացի այդ, այս ընտրիչի օգտագործումը որոշ դեպքերում դանդաղեցնում է էջը:
Ըստ հատկանիշների
Տալիս է որոշակի հատկանիշով տարրը կառավարելու հնարավորություն: Օրինակ, դուք ունեք մի քանի մուտքային պիտակներ տարբեր տեսակի հատկանիշով: Դրանցից մեկը տեքստ է, երկրորդը՝ գաղտնաբառ, երրորդը՝ համար։ Իհարկե, դուք կարող եք դասեր կամ ID-ներ սահմանել յուրաքանչյուրի համար, բայց դա միշտ չէ, որ հարմար է: CSS ընտրիչները ըստ ատրիբուտների թույլ են տալիս առավելագույն ճշգրտությամբ նշել որոշակի պիտակների արժեքներ: Օրինակ, այսպես.
մուտք ()
Այս հատկանիշի ընտրիչը կընտրի բոլոր մուտքերը տիպի տեքստով:
Գործիքը բավականին ճկուն է, այն կարող է օգտագործվել ցանկացած պիտակների հետ, որոնք կարող են ունենալ ատրիբուտներ: Բայց սա դեռ ամենը չէ։ CSS-ի հստակեցումն ունի տարրերը ավելի հարմար մանիպուլյացիայի ենթարկելու հնարավորություն:
Պատկերացնենք, որ ձեր էջն ունի մուտքագրում՝ placeholder=«Մուտքագրեք անուն» հատկանիշով և մուտքագրեք placeholder=«Մուտքագրեք գաղտնաբառը»: Նրանք կարող են ընտրվել նաև ընտրիչով: Դրա համար օգտագործվում է հետևյալ շինարարությունը.
մուտք () կամ մուտքագրում
Հնարավոր է ավելի ճկուն աշխատանք ատրիբուտների հետ: Ենթադրենք, դուք ունեք մի քանի պիտակներ նմանատիպ վերնագրի հատկանիշներով (ասենք «Caspian» և «Caspian»): Երկուսն էլ ընտրելու համար օգտագործեք հետևյալ ընտրիչները.
CSS-ը կընտրի բոլոր տարրերը, որոնք իրենց վերնագրում ունեն «կասպյան» նիշեր, այսինքն՝ և՛ «կասպյան», և՛ «կասպյան»:
Կարող եք նաև ընտրել պիտակներ, որոնց ատրիբուտները սկսվում են որոշակի նիշերով.
կամ վերջացնել հետևյալով.
{}.
Առավելությունները՝ առավելագույն ճկունություն: Դուք կարող եք ընտրել ցանկացած գոյություն ունեցող էջի տարրեր՝ առանց դասերի հետ շփվելու:
Թերությունները - օգտագործվում է համեմատաբար հազվադեպ, միայն կոնկրետ դեպքերում: Շատ տպագրողներ նախընտրում են մեթոդոլոգիաներ, քանի որ դասի հստակեցումը կարող է ավելի հեշտ լինել, քան բազմապատիկ և հավասարի նշանները: Բացի այդ, այս ընտրիչները չեն աշխատում Internet Explorer 7 և ավելի ցածր տարբերակում: Այնուամենայնիվ, հիմա ո՞ւմ է պետք հին Internet Explorer-ը:
Կեղծ դասի ընտրիչներ
Կեղծ դասը նշանակում է տարրի վիճակը: Օրինակ՝ :hover-ն այն է, ինչ տեղի է ունենում էջի մի մասի հետ, երբ կուրսորը սավառնում է, :visited-ը այցելած հղումն է։ Սա ներառում է նաև այնպիսի տարրեր, ինչպիսիք են :first-child և :last-child:
Այս տեսակի ընտրիչն ակտիվորեն օգտագործվում է ժամանակակից դասավորության մեջ, քանի որ դրա շնորհիվ կարող եք էջը դարձնել «live»՝ առանց JavaScript-ի օգտագործման։ Օրինակ, ուզում եք այնպես անել, որ երբ սավառնում եք btn դասի կոճակի վրա, դրա գույնը փոխվի: Դա անելու համար մենք օգտագործում ենք հետևյալ կառուցվածքը.
Btn: սավառնել (
Ֆոնի գույնը՝ կարմիր
Գեղեցկության համար դուք կարող եք նշել անցումային հատկությունը այս կոճակի հիմնական հատկություններում, օրինակ՝ 0,5 վրկ-ով, այս դեպքում կոճակը կարմիր կդառնա ոչ թե ակնթարթորեն, այլ կես վայրկյան:
Առավելությունները - ակտիվորեն օգտագործվում են էջերը «վերակենդանացնելու» համար: Հեշտ է օգտագործել.
Թերությունները՝ ոչ մի։ Դա իսկապես հարմար գործիք է: Այնուամենայնիվ, անփորձ գրամշակողները կարող են շփոթվել կեղծ դասերի առատությունից: Խնդիրը լուծվում է ուսումնասիրությամբ և պրակտիկայի միջոցով։
Կեղծ տարրերի ընտրիչներ
«Կեղծ-տարրերը» էջի այն հատվածներն են, որոնք HTML-ում չեն, բայց դեռ կարող են շահարկվել: ոչինչ չհասկացա՞ր։ Ամեն ինչ ավելի հեշտ է, քան թվում է: Օրինակ, դուք ցանկանում եք տողի առաջին տառը դարձնել մեծ և կարմիր, իսկ մնացած տեքստը թողնել փոքր և սև: Իհարկե, կարելի է այս տառը փակցնել որոշակի դասի միջակայքում, բայց սա երկար է և ձանձրալի։ Շատ ավելի հեշտ է ընտրել ամբողջ պարբերությունը և օգտագործել::first տառով կեղծ տարրը: Այն թույլ է տալիս վերահսկել առաջին տառի տեսքը:
Բավականին քիչ են կեղծ տարրերը։ Դրանք մեկ հոդվածի շրջանակներում թվարկելը դժվար թե հաջողվի։ Դուք կարող եք գտնել համապատասխան տեղեկատվություն ձեր սիրած որոնման համակարգում:
Առավելությունները - հնարավորություն են տալիս ճկուն կերպով հարմարեցնել էջի տեսքը:
Թերությունները - սկսնակները հաճախ շփոթվում են դրանց մեջ: Այս տեսակի շատ ընտրիչներ աշխատում են միայն որոշակի բրաուզերներում:
Ամփոփել
Ընտրիչը հզոր գործիք է փաստաթղթի հոսքը վերահսկելու համար: Դրա շնորհիվ դուք կարող եք ընտրել էջի բացարձակապես յուրաքանչյուր բաղադրիչ (նույնիսկ նրանք, որոնք գոյություն ունեն միայն պայմանականորեն): Համոզվեք, որ սովորեք բոլոր առկա տարբերակները, կամ գոնե գրեք դրանք: Սա հատկապես կարևոր է, եթե դուք բարդ էջեր եք ստեղծում ժամանակակից դիզայնով և բազմաթիվ ինտերակտիվ տարրերով:
Cascading Style Sheets CSS (Cascading Style Sheets) ոճի ստանդարտ է, որը հայտարարվել է W3C կոնսորցիումի կողմից: Ժամկետ կասկադայինցույց է տալիս տարբեր տեսակի ոճերի միաձուլման հնարավորությունը և ոճերի ժառանգումը ներքին պիտակներով արտաքինից:
CSS-ը լեզու է, որը պարունակում է մի շարք հատկություններ փաստաթղթի տեսքը սահմանելու համար: CSS ճշգրտումը սահմանում է հատկություններ և նկարագրական լեզու HTML տարրերի հետ առնչվելու համար:
CSS-ը աբստրակցիա է, որտեղ վեբ փաստաթղթի տեսքը սահմանվում է դրա բովանդակությունից առանձին:
Որոշ ոճեր չեն աջակցվում բոլոր բրաուզերների կողմից: Այնուամենայնիվ, դուք կարող եք նշանակել ցանկացած ոճ, քանի որ չաջակցվող ոճերը պարզապես անտեսվելու են:
Ձեզ նույնպես կարող է անհրաժեշտ լինել.
Փաստաթղթում ոճեր ավելացնելու երեք տեսակի ոճ կա:
Ներքին ոճեր
Ներքին ոճերը սահմանվում են հատկանիշով ոճըհատուկ պիտակներ. Ներքին ոճը ազդում է միայն նման պիտակներով սահմանված տարրերի վրա։ Այս մեթոդը քիչ է տարբերվում ավանդական HTML-ից:
Օրինակ
Կապույտ տեքստով պարբերություն
ԱՐԴՅՈՒՆՔ:
Կապույտ տեքստով պարբերություն
Պարբերություն կարմիր տեքստով
Դուք չպետք է շատ հաճախ օգտագործեք ներքին ոճերը, քանի որ այդ դեպքում վեբ փաստաթուղթը ծանրաբեռնվում է կոդով, և դրա տեսքը դժվար է փոխել:
Գլոբալ ոճեր
Գլոբալ CSS ոճերը տեղադրվում են կոնտեյներով , հերթով գտնվում է տարայի մեջ ... .
Հատկանիշ type = "text/css", նախկինում պահանջվում էր պիտակի համար .........
Մոխրագույն տեքստի գույնը վեբ էջի բոլոր պարբերություններում