Դասեր եւ ID- ները օգնում են ընդլայնել ձեր CSS- ը
Այսօրվա վեբկայքի վրա հիմնված կայքերը պահանջում են CSS- ի խորը հասկացություն (Cascading Style Sheets): Սրանք այն հրահանգները, որոնք դուք տալիս եք կայք, որոշելու համար, թե ինչպես է այն տեղադրվելու բրաուզերի պատուհանում: Դուք օգտագործում եք մի շարք «ոճերի» ձեր HTML փաստաթղթին, որը կստեղծի Ձեր էջի տեսքը եւ զգացումը:
Կան բազմաթիվ եղանակներ, որոնք վերաբերում են վերոհիշյալ ոճերին մի փաստաթղթի վրա, բայց երբեմն ցանկանում եք ոճը օգտագործել միայն փաստաթղթի որոշ տարրերի վրա, բայց ոչ այդ տարրի բոլոր դրույթները:
Դուք նույնպես կարող եք ստեղծել այնպիսի ոճ, որը կարող եք դիմել մի փաստաթղթի մի քանի տարրերին, առանց վերարտադրելու ոճի յուրաքանչյուր կանոնը: Այս ցանկալի ոճերի հասնելու համար դուք կօգտագործեք դասի եւ HTML- ի HTML հատկանիշները: Այս ատրիբուտները գլոբալ հատկանիշներ են, որոնք կարող են կիրառվել գրեթե յուրաքանչյուր HTML պիտակի վրա .Դա նշանակում է, որ ձեր փաստաթղթում ձեր բաժանումները, պարբերությունները, հղումները, ցուցակները կամ HTML- ի այլ կտորներ եք ձեւավորում, կարող եք դիմել դասի եւ ID հատկանիշներին օգնել ձեզ կատարել այս խնդիրը:
Դասի ընտրյալները
Դասակարգի ընտրիչը թույլ է տալիս մի քանի տարրեր տեղադրել միեւնույն տարրին կամ պիտակին մի փաստաթղթում: Օրինակ, դուք կարող եք ունենալ ձեր տեքստի որոշակի բաժիններ տարբեր գույնի մեջ նշված փաստաթղթում մնացած տեքստից: Այս կարեւոր բաժինները կարող են լինել «զգուշացում», որ դուք էջում տեղադրեք: Դուք կարող եք նշանակել ձեր պարբերությունները նմանատիպ դասերով:
p {գույնը `# 0000ff; }
p.alert {գույնը `# ff0000; }
Այս ոճերը սահմանում էին բոլոր պարբերությունների գույնը դեպի կապույտ (# 0000ff), սակայն «հիշեցում» դասի հատկանիշով ցանկացած պարբերություն փոխարեն կարմիրով (# ff0000): Դա այն է, որ դասի հատկանիշն ունի ավելի բարձր առանձնահատկություն, քան առաջին CSS կանոնը, որը միայն օգտագործում է պիտակի ընտրիչ:
CSS- ի հետ աշխատելիս ավելի կոնկրետ կանոն կվերանայի ավելի քիչ կոնկրետ մեկը: Այսպիսով, այս օրինակում ավելի ընդհանուր կանոնը սահմանում է բոլոր պարբերությունների գույնը, սակայն երկրորդ, ավելի կոնկրետ կանոն է, քան այն պարունակում է ընդամենը մի քանի պարբերություն:
Ահա թե ինչպես դա կարող է օգտագործվել HTML- ի որոշ ձեւաչափում.
Այս պարբերությունը կցուցադրվի կապույտ, որը էջի համար նախնական է:
Այս պարբերությունը նույնպես կապույտ էր:
Եվ այս պարբերությունը կցուցադրվի կարմիրից, քանի որ դասի հատկանիշը կվերաբերեր ստանդարտ կապույտ գույնը տարրական ընտրիչից ստիլինգից:
Այս օրինակում «p.alert» - ի ոճը միայն կիրառելի է այն «տարր» դասի տարրերին, որոնք օգտագործում են այդ «զգայուն» դասը: Եթե ցանկանում եք օգտագործել այդ դասը բազմակի HTML տարրերի միջեւ, պարզապես հեռացնում եք HTML տարրը ոճով զանգահարել (պարզապես համոզվեք, որ այն ժամանակաշրջանից (.) տեղը թողեք), ինչպես այսպես.
.alert {background-color: # ff0000;}
Այս դասը այժմ հասանելի է ցանկացած տարրին, որն անհրաժեշտ է: Ձեր զգայունության դասի հատկանիշի HTML- ի ցանկացած հատված այժմ կստանա այս ոճը: Ստորեւ HTML- ում մենք ունենք երկու պարբերություն եւ 2-րդ մակարդակ, որոնք օգտագործում են «զգոն» դասը: Նրանցից երկուսը կարմիր կարմիր գույն կունենան, որը մենք ցույց տվեցինք CSS- ի վրա:
Այս պարբերությունը գրված է կարմիրով:
Եվ այս h2- ը կարմիր կլինի:
Այսօր կայքերում դասի հատկանիշները հաճախ օգտագործվում են շատ տարրերի վրա, քանի որ նրանք ավելի հեշտ են աշխատել նույնականության տեսակետից, որ ID- ները: Դուք կգտնեք առավելագույնը HTML էջերը, որոնք կցուցադրվեն դասի հատկանիշներով, որոնցից մի քանիսը բազմիցս կրկնվում են փաստաթղթում եւ ուրիշները, որոնք կարող են միայն մեկ անգամ հայտնվել:
ID Սելեկտորներ
ID- ն ընտրողը թույլ է տալիս անունը տալ որոշակի ոճով, առանց այն տեքստի կամ այլ HTML տարրի հետ կապելու: Ասեք, որ ձեր HTML ձեւաչափում բաժին ունեիք, որը պարունակում է տեղեկություններ իրադարձության մասին:
Դուք կարող եք տալ այս բաժինը «իրադարձության» ID հատկանիշը, իսկ հետո, եթե ուզում եք ընդգծել, որ 1 հատ խոշոր սեւ սահմանի հետ բաժանում եք, այսպիսի ID կոդը գրեք:
#event {border: 1px կոշտ # 000; }
ID սելեկտորների հետ խնդիրը այն է, որ դրանք չեն կարող կրկնվել HTML փաստաթղթում: Նրանք պետք է լինեն յուրահատուկ (կարող եք օգտագործել նույն ID- ն ձեր կայքի բազմակի էջերում, բայց միայն մեկ անգամ յուրաքանչյուր HTML փաստաթղթում): Այսպիսով, եթե ունեք 3 դեպք, որ բոլորը պետք է այս սահմանին, ապա ձեզ հարկավոր է նրանց «events1», «event2» եւ «event3» ID հատկանիշները եւ դրանցից յուրաքանչյուրը: Հետեւաբար, շատ ավելի հեշտ կլինի օգտվել «միջոցառման» վերոհիշյալ դասի հատկանիշից եւ ոճը միանգամից:
ID- ի հատկանիշների հետ մեկ այլ մարտահրավեր է, որ նրանք ունեն ավելի բարձր առանձնահատկություն, քան դասի հատկանիշները: Սա նշանակում է, որ եթե դուք պետք է ունենաք CSS- ով, որը նախկինում հաստատված ոճը գերազանցում է, դժվար է դա անել, եթե դուք չափազանց շատ եք ապավինել ID- ին: Այդ իսկ պատճառով շատ վեբ մշակողները հեռացել են իրենց նշումներում ID- ներից օգտվելուց, նույնիսկ եթե նրանք միայն մտադիր են օգտագործել այդ արժեքը մեկ անգամ, եւ փոխարենը դիմել են գրեթե բոլոր ոճերի համար դասի քիչ հատկանիշների հատկանիշներին:
Մի տարածք, որտեղ ID հատկանիշները կատարվում են խաղի մեջ, այն է, երբ ցանկանում եք ստեղծել էջ, որն ունի էջի խարիսխ հղումներ: Օրինակ, եթե դուք ունեք parallax ոճով կայք, որը պարունակում է մեկ էջի բոլոր բովանդակությունը, որը «ցատկում» է այդ էջի տարբեր մասերին: Սա կատարվում է ID- ի հատկանիշներով եւ տեքստային հղումներով, որոնք օգտագործում են այս խարիսխ հղումները:
Պարզապես ավելացրեք այս հատկանիշի արժեքը, որը նախորդում է # նշանը, հղում կատարողի href հատկանիշին, ինչպես այսպես.
Սա հղումը
Երբ սեղմված կամ դիպչելիս այս հղումը անցնելու է էջի այն մասը, որը ունի այս ID հատկանիշը: Եթե այս էջում որեւէ տարր չի օգտագործվել այս ID- ի արժեքը, ապա հղումը ոչինչ չի անի:
Հիշեք, եթե ցանկանում եք ստեղծել էջում հղում կատարելու էջում, ապա ID- ի ատրիբուտների օգտագործումը կպահանջվի, բայց դուք դեռ կարող եք դիմել դասընթացների ընդհանուր CSS ձեւավորման նպատակներով: Այսպիսով, ես այսօր նշում եմ էջերը, հնարավորինս դաս դասավանդողների օգտագործեցի եւ միայն դիմել ID- ներ, երբ ես պետք է գործի ոչ միայն որպես կեռ, այլ նաեւ որպես էջի հղում:
Իրական հոդվածը Ջենիֆեր Քրինինն է: Խմբագրված Jeremy Girard- ը, 8/9/17