Դուք ոչ միայն սահմանափակվում եք մեկ դասի CSS դասի համար:
Cascading Style Sheets- ը (CSS) թույլ է տալիս սահմանել տարրերի տեսքը, կախելով այն տարրերին, որոնք դուք դիմում եք այդ տարրին: Այս հատկանիշները կարող են լինել կամ ID կամ դաս, եւ, ինչպես եւ բոլոր հատկանիշները, նրանք օգնում են օգտակար տեղեկություններ տրամադրել այն տարրերին, որոնք կցվում են: Կախված նրանից, թե որ հատկանիշ եք ավելացնում տարրը, դուք կարող եք գրել CSS ընտրիչ `կիրառելու անհրաժեշտ տեսողական ոճերը, որոնք անհրաժեշտ են այդ տարրին եւ ամբողջ կայքէջի տեսքը եւ զգալը:
Թեեւ ID- ն կամ դասերը աշխատում են CSS կանոնների հետ ներդաշնակելու նպատակով, ժամանակակից վեբ-դիզայնի մեթոդները մաս են կազմում ID- ների դասերը մասամբ, քանի որ դրանք ավելի պակաս կոնկրետ եւ ավելի հեշտ են աշխատել ամբողջությամբ: Այո, դուք դեռ կգտնեք բազմաթիվ կայքեր, որոնք օգտագործում են ID- ները, սակայն այդ հատկանիշները կիրառվում են ավելի խնայողաբար, քան անցյալում, իսկ դասերը ժամանակակից վեբ էջերի վրա:
Մեկ կամ բազմակի դասընթացներ CSS- ում
Շատ դեպքերում դուք կստանաք մեկ դասի հատկանիշ տարրին, բայց իրականում դուք ոչ միայն սահմանափակվում եք միայն մեկ դասի համար, թե նրանք ինչպես եք ID- ների հետ: Մինչ տարրը կարող է ունենալ միայն մեկ ID հատկություն, դուք կարող եք բացարձակապես տալ տարրերի բազմակի դասընթացներ եւ, որոշ դեպքերում, դա անելը ձեր էջը դարձնում է ավելի հեշտ եւ ավելի ճկուն:
Եթե դուք պետք է մի քանի դասեր հանձնեք տարրին, կարող եք ավելացնել լրացուցիչ դասընթացներ եւ պարզապես դրանք առանձնացրեք ձեր հատկանիշի մեջ:
Օրինակ, այս պարբերությունը ունի երեք դաս:
pullquote featured left "> Սա կլինի պարբերության տեքստը
Սա սահմանում է հետեւյալ երեք դասերը պարբերության պիտակի վրա.
- Pullquote
- Featured
- Ձախ
Ծանոթացեք այս դասի արժեքների յուրաքանչյուրի միջեւ տարածությունների մասին: Այդ տարածությունները այնն են, որ դրանք տարբեր, առանձին դասեր են: Սա է պատճառը, որ դասի անունները չեն կարողանում բացատրել դրանց մեջ, քանի որ դա անում է նրանց որպես առանձին դասեր:
Օրինակ, եթե «pullquote-featured-left» - ը առանց տարածության օգտագործեց, դա մեկ դասի արժեք է, բայց վերը նշված օրինակն է, որտեղ այս երեք բառերը բաժանվում են մի տարածք, սահմանում են դրանք որպես անհատական արժեքներ: Կարեւոր է հասկանալ այս հայեցակարգը, երբ որոշեք, թե որ դասի արժեքները կօգտագործեն ձեր վեբ-էջերը:
Երբ ձեր դասի արժեքները HTML- ով են, ապա դրանք կարող եք դասեր հանձնել ձեր CSS- ում եւ կիրառել այն ոճերը, որոնք ցանկանում եք ավելացնել: Օրինակ.
... pullquote {...}
... ֆիտնի {...}
p.left {...}
Այս օրինակներում CSS հայտարարագրերը եւ արժեքների զույգերը կլինեն ներկառույց բծերի ներսում, այսպիսին է, թե ինչպես են այդ ոճերը կիրառվում համապատասխան ընտրության համար:
Նշում. Եթե դասը սահմանել եք որոշակի տարր (օրինակ, p.left), ապա այն կարող եք օգտագործել այն որպես դասերի ցանկի մաս: այնուամենայնիվ, տեղյակ պահեք, որ այն կանդրադառնա միայն CSS- ում նշված տարրերին: Այլ կերպ ասած, p.left ոճը միայն կիրառվում է այս դասի պարբերությունների նկատմամբ, քանի որ ձեր ընտրողը իրականում ասում է, որ այն կիրառել է «ձախից դասի արժեք ունեցող պարբերությունները»: Ընդհակառակը, օրինակ մյուս երկու ընտրողները չեն նշում որոշակի տարրեր, ուստի նրանք կփորձեն կիրառել այնպիսի տարրեր, որոնք օգտագործում են այդ դասային արժեքները:
Multiple դասերի առավելությունները
Բազմակի դասարանները կարող են դարձնել ավելի հեշտ է հատուկ տարրեր ավելացնել տարրեր, առանց այդ տարրի համար նոր ոճ կառուցելու:
Օրինակ, դուք կարող եք արագորեն ձախից կամ աջից շարժել տարրերը : Դուք կարող եք գրել երկու դասեր ձախ եւ աջ, պարզապես բոցով `ձախ; եւ float: right; նրանցում. Այնուհետեւ, երբ դուք ունեք մի տարր, դուք պետք է ձուլել ձախ, դուք պարզապես ավելացնել դասը «ձախ» իր դասի ցուցակում:
Այնուամենայնիվ, այստեղ քայլելու լավ տող կա: Հիշեք, որ ցանցի ստանդարտները թելադրում են ոճը եւ կառուցվածքը: Կառուցվածքը վարվում է HTML- ի միջոցով, իսկ ոճը CSS- ում է:
Եթե ձեր HTML փաստաթուղթը լցված է տարրերով, որոնք բոլորն ունեն «կարմիր» կամ «ձախ» դասի անուններ, որոնք անվանում են այնպիսի անուններ, որոնք թելադրում են, թե ինչպես պետք է տարրերը նայել, քան այն, ինչ նրանք են, դուք անցնում եք այդ տողը կառուցվածքի եւ ոճի միջեւ: Ես փորձում եմ սահմանափակել իմ ոչ սեմինիստական դասի անունները, որքան հնարավոր է:
Բազմակի դասընթացներ, իմաստաբանություն եւ JavaScript
Մեկ այլ առավելություն, որը կիրառվում է բազմաթիվ դասերի, այն է, որ այն ձեզ հնարավորություն է տալիս ավելի շատ ինտերակտիվ հնարավորություններ:
Դուք կարող եք կիրառել նոր դասեր `գոյություն ունեցող տարրերին, օգտագործելով JavaScript` առանց նախնական դասերից որեւէ մեկի հեռացնելու: Դուք նաեւ կարող եք օգտագործել դասեր, սահմանելու տարրերի իմաստաբանություն : Սա նշանակում է, դուք կարող եք ավելացնել լրացուցիչ դասընթացներ, սահմանելու համար, թե ինչ է նշանակում այս տարրը: Այսպիսին է Microformats- ը:
Բազմակի դասերի թերությունները
Ձեր տարրերի վրա բազմակի դասերի օգտագործման ամենամեծ թերությունն այն է, որ դրանք կարող են մի քիչ անսխալ դարձնել, ժամանակին նայել եւ կառավարել: Հնարավոր է, դժվար է որոշել, թե ինչ ոճերը ազդում են տարրերի վրա եւ եթե որեւէ սցենարներ ազդում են դրա վրա: Շատերը, որոնք առկա են այսօր, ինչպիսիք են Bootstrap- ը, ծանրացնում են տարրեր, որոնք ունեն բազմաթիվ դասարաններ: Այդ կոդը կարող է դուրս գալ եւ դժվար է աշխատել շատ արագ, եթե զգույշ լինեք:
Երբ դուք օգտագործում եք մի քանի դասեր, դուք նույնպես վազում եք, որ մեկ դասի ոճ ունենալու դեպքում ուրիշի ոճը նույնն է, եթե նույնիսկ չեք մտադրվել: Այնուհետեւ կարող է դժվարացնել պարզել, թե ինչու ձեր ոճերը չեն կիրառվում նույնիսկ այն դեպքում, երբ նրանք հայտնվում են:
Դուք պետք է տեղյակ լինեք առանձնահատկությանը, նույնիսկ այն հատկանիշների հետ, որոնք կիրառվում են այդ տարրին:
Chrome- ի Webmaster գործիքների նման գործիք օգտագործելով, դուք կարող եք ավելի հեշտությամբ տեսնել, թե ինչպես ձեր դասերը ազդում են ձեր ոճերի վրա եւ խուսափում են հակասող ոճերի եւ ատրիբուտների այս խնդրից:
Իրական հոդվածը Ջենիֆեր Քրինինն է: Վերափոխվել է Ջերեմի Գիրարդը 8/7/17 թ .: