Ներկայացնում ենք ru.hexlet.io կայքում հրապարակված Պեր Հարալդ Բորգենի «Ինչու CSS Grid-ը ավելի լավ է, քան Bootstrap-ը դասավորությունների ստեղծման համար» հոդվածի թարգմանությունը։

CSS Grid-ը համացանցում դասավորություններ ստեղծելու նոր միջոց է: Առաջին անգամ ուղղակիորեն բրաուզերում հասանելի է դասավորության լիարժեք համակարգ, որն ապահովում է բազմաթիվ առավելություններ:

Այս առավելությունները հատկապես տպավորիչ են դառնում, երբ CSS Grid-ը համեմատում եք ամենահայտնի շրջանակի՝ Bootstrap-ի հետ: Դուք ոչ միայն կարող եք ստեղծել դասավորություններ, որոնք նախկինում անհնարին էին առանց JavaScript-ի, այլև ձեր կոդը ավելի հեշտ կլինի պահպանել և հասկանալ:

Եկեք նայենք լավագույն երեք պատճառներին, թե ինչու ես կարծում եմ, որ CSS Grid-ը գերազանցում է Bootstrap-ին:

Նշումն ավելի հեշտ կդառնա

Bootstrap-ը CSS Grid-ով փոխարինելը HTML-ն ավելի մաքուր կդարձնի: Թեև սա ամենակարևոր առավելությունը չէ, հավանաբար առաջինն է, որ դուք նկատում եք:

Պարզության համար ես ստեղծեցի կեղծ կայքի դասավորություն, որպեսզի կարողանամ համեմատել երկու տարբերակների համար պահանջվող կոդը: Այստեղ:

Bootstrap

Եկեք նախ նայենք Bootstrap-ում այս կայքը կառուցելու համար անհրաժեշտ նշագրմանը:

Այստեղ ես կցանկանայի, որ ուշադրություն դարձնեք սրա վրա.

1. Յուրաքանչյուր տող պետք է ունենա առանձին պիտակ
   .
2. Դասերի անունները (col-xs-2) պետք է օգտագործվեն դասավորությունը ցույց տալու համար:
3. Երբ այս օրինաչափությունը բարդանում է, HTML-ը նույնպես բարդանում է:

Եթե ​​սա պատասխանող կայք է, ապա պիտակները սովորաբար ավելի վատ տեսք ունեն.

CSS ցանց

Հիմա եկեք նայենք նույնը CSS Grid-ում իրականացնելու եղանակին: Ահա HTML-ը.

Ես կարող էի օգտագործել իմաստային տարրեր, բայց որոշեցի մնալ div-ների հետ՝ Bootstrap-ի համեմատությունն ավելի պարզ դարձնելու համար:

Դուք կարող եք անմիջապես նկատել, որ այս նշումն ավելի պարզ է: Դասերի տգեղ անունները և յուրաքանչյուր տողի լրացուցիչ div պիտակները անցյալում են: Դա պարզապես կոնտեյներ է ցանցի և դրա ներսում գտնվող դիրքերի համար:

Եվ ի տարբերություն Bootstrap-ի, այս նշումը շատ բարդ չի դառնա, քանի որ էջի դասավորության բարդությունը մեծանում է:

Bootstrap-ի օրինակում ձեզանից չէր պահանջվում որևէ CSS ավելացնել CSS Grid-ում, որը դուք, անշուշտ, պետք է: Ավելի կոնկրետ, դուք պետք է ավելացնեք սա.

Ոմանց համար սա կարող է լինել Bootstrap-ի վաճառքի կետ. դուք չունեք անհանգստանալու CSS-ի մասին՝ պարզ ցանց ստեղծելու համար. դուք պարզապես կառուցում եք դասավորությունը HTML-ով:

Բայց ինչպես կտեսնեք հաջորդ կետում, նշագրման և դասավորության միջև կապը իրականում խոցելիություն է, երբ խոսքը վերաբերում է ճկունությանը:

Շատ ավելի ճկունություն

Ենթադրենք՝ ցանկանում եք փոխել դասավորությունը՝ կախված էկրանի չափից: Օրինակ՝ ընտրացանկը բարձրացրեք վերին տող՝ շարժական սարքերից դիտելու համար:

Այլ կերպ ասած, փոխեք դասավորությունը հետևյալից.

սրան՝

CSS ցանց

Դա անելը CSS Grid-ով շատ հեշտ է: Մենք ավելացնում ենք մեդիա հարցում և խառնում ենք տարբեր բլոկներ, ինչպես ցանկանում ենք.

Այս ձևով դասավորություն ստեղծելու ունակությունը, առանց անհանգստանալու, թե ինչպես է գրված HTML-ը, կոչվում է աղբյուրի պատվերի անկախություն, և դա մեծ հաղթանակ է մշակողների և դիզայներների համար:

CSS Grid-ը թույլ է տալիս HTML-ը դարձնել այն, ինչ այն պետք է լիներ: Բովանդակության նշագծման մեջ, ոչ թե տեսողականության, ինչը նախատեսված է CSS-ի համար:

Bootstrap

Եթե ​​մենք ցանկանայինք նույնն անել Bootstrap-ում, ապա պետք է փոխենք HTML-ը: Մեզ պետք է մենյուի պիտակը տեղափոխել վերևի տող, բացի վերնագրից, քանի որ երկրորդ շարքի ընտրացանկը պատանդ է:

Դա անելը մեդիա հարցումով չնչին խնդիր չէ: Դա կարելի է անել միայն HTML-ի և CSS-ի միջոցով, և դուք պետք է աշխատեք JavaScript-ի հետ:

Այս օրինակը ցույց է տալիս CSS Grid-ի հսկայական առավելությունը, որը ես ինքս եմ զգացել:

Այլևս 12 սյունակի սահմանափակում չկա

Դա ամենամեծ խնդիրը չէ, բայց շատ անգամ նյարդայնացնում է: Քանի որ Bootstrap ցանցը բաժանված է 12 սյունակի, դուք խնդիրներ կունենաք, եթե ցանկանում եք հինգ սյունակի դասավորություն: Կամ յոթ. Կամ ինը: Կամ մի թվից, որը տասներկու չէ։

CSS Grid-ի դեպքում այդպես չէ: Դուք կարող եք կատարել ձեր սեփական դասավորությունը այնքան սյունակներով, որքան ցանկանում եք: Ահա յոթ սյունակի դասավորությունը:

Դա արվում է ցանցի ձևանմուշների սյունակները կրկնելու համար (7, 1fr) այսպես.

Bootstrap-ում դա անելու հաքեր կարող են լինել... Եվ ես տեղյակ եմ, որ Bootstrap 4-ն օգտագործում է Flexbox-ը, որը թույլ է տալիս այս ճկունությունը, բայց այն դեռ բետա-ից դուրս չէ:

Նախքան այս հոդվածը ավարտելը, իհարկե, մենք պետք է խոսենք բրաուզերի աջակցության մասին: Այս գրելու դրությամբ համաշխարհային վեբ տրաֆիկի 75%-ն աջակցում է CSS Grid-ին:

Բայց նախքան ամբողջությամբ հրաժարվել CSS Grid-ից, ես առաջարկում եմ լսել, թե ինչ է ասում Մորտեն Ռենդ-Հենդրիկսենը դրա մասին: Նա պնդում է, որ CSS Grid-ը հնարավորություն է վերաիմաստավորելու, թե ինչպես ենք մենք մտածում հետադարձ համատեղելիության մասին.

«CSS Grid-ը դասավորության մոդուլ է, այն մեզ թույլ է տալիս փոխել փաստաթղթի դասավորությունը՝ չխանգարելով սկզբնաղբյուրի հերթականությանը: Այլ կերպ ասած, CSS Grid-ը լիովին վիզուալ գործիք է, և ճիշտ օգտագործման դեպքում այն ​​չի ազդի փաստաթղթի բովանդակության ներքին հարաբերությունների վրա։ Սա հանգեցնում է մի պարզ, բայց զարմանալի փաստի. CSS Grid-ի աջակցության բացակայությունը հին բրաուզերում չպետք է ազդի կայքի այցելուի փորձառության վրա, այն պարզապես պետք է փոխի այդ ընկալումը»:

Այլ կերպ ասած, երբ դուք առանձնացնեք բովանդակությունը վիզուալից, բոլոր այցելուները կտեսնեն բովանդակությունը, բայց CSS Grid-ը կբարելավի դիտման փորձը նրանց համար, ովքեր այն միացված են ավելի լավ նշագրումով:

Եզրակացություն

«Որքան շատ եմ օգտագործում CSS Grid-ը, այնքան ավելի եմ համոզված, որ դրա վրա աբստրակցիոն շերտ ավելացնելը ոչ մի օգուտ չունի: CSS Grid-ը դասավորության շրջանակ է, որը ներկառուցված է հենց բրաուզերի մեջ»:

• Ուսուցողական

Ես գրել եմ սխալներ և խորհուրդներ՝ ելնելով իմ սեփական փորձից։ Եթե ​​կան սխալներ, ինչպիսիք են «վատ խորհուրդը», ես ուրախ կլինեմ լսել կառուցողական քննադատություն: Գրառումը նախատեսված է սկսնակների համար՝ սովորելու HTML և CSS, բայց, հավանաբար, մասնագետները նույնպես հետաքրքրված կլինեն կարդալ այս նյութը։

1. W3C վավերացնող

Կայքի HTML-ն ու CSS-ը խորհուրդ է տրվում ստուգել validator.w3.org ծառայության միջոցով։ Այս ծառայությունը կսկանավորի կոդը և կցուցադրի սխալները, օրինակ՝

• պիտակը փակված չէ;
• խորհուրդ չի տրվում նիշեր հղումներում;
• Օգտագործվում է չառաջարկված պիտակ;
• պահանջվող հատկանիշը նշված չէ;
• և այլ.

2. Դասավորություն UTF-8 ֆորմատով

Էջը տեղադրելու ժամանակ դուք պետք է համոզվեք, որ ֆայլի կոդավորումը սահմանված է UTF-8 (առանց BOM). Յուրաքանչյուր տեքստային խմբագիր կոդավորումն այլ կերպ է սահմանում:

UTF-8 ձևաչափով ֆայլը թույլ է տալիս օգտագործել ոչ ստանդարտ նիշեր (օրինակ՝ տարբեր լեզուների խորհրդանիշներ, արժույթի նշաններ և այլն):

Դուք նաև պետք է բրաուզերներին տեղեկացնեք, որ էջը բացված է UTF-8 կոդավորմամբ: Դա արվում է ստորև նշված պիտակի միջոցով.

3. Մի քանի տարրեր ունեն նույն ID-ն

HTML կոդում id հատկանիշի արժեքը չպետք է կրկնվի:

4. Սփրայթներ

Խորհուրդ է տրվում մի քանի փոքր նկարներ միավորել մեկ ֆայլի մեջ (այս ֆայլը կոչվում է sprite): Սա կնվազեցնի կայքի հարցումների քանակը և կբարելավի էջի բեռնման արագությունը:

Մեր օրերում տարածված է նաև սփրայթերի փոխարեն պատկերակներով տառատեսակներ օգտագործելը։ Նրանք. Տառերի փոխարեն ցուցադրվում են հանդերձանքի պատկերակներ, ժպիտներ և այլ պատկերակներ: Օրինակ՝ Twitter Bootstrap-ում օգտագործվող glyphicons պատկերակները:

Սփրայթների համար տառատեսակների առավելություններն են սրբապատկերների չափերը և դրանց փոքր չափերը փոխելիս որակի պահպանումը։ Բայց թերությունն այն է, որ դուք չեք կարող օգտագործել մեկից ավելի գույներ պատկերակի մեջ:

5. Շատ սելեկտորներ

Խորհուրդ չի տրվում օգտագործել երեքից ավելի ընտրիչ, քանի որ սա ազդում է կայքի աշխատանքի վրա:

/* խորհուրդ չի տրվում, մեծ բնադրում */ .էջ .հատ .վերնագիր a () /* կարող է կրճատվել */ .էջ .հատ ա ()
Բրաուզերները կարդում են CSS-ը աջից ձախ: Նրանք. վերը նշված կոդի մեջ նախ կընտրվեն բոլոր հղումները, որոնք գտնվում են էջում, իսկ հետո կընտրվեն այն հղումները, որոնք գտնվում են .item տարրի ներսում։

6. HTML ոճեր

HTML-ը նախատեսված է տեղեկատվություն (տեքստ, նկարներ) ցուցադրելու համար: Բովանդակության ձևավորումը (փոփոխության չափը, գույնը, տառատեսակը) տեղի է ունենում CSS-ում:

Սխալ կոդի մեջ

Սխալ կոդի մեջ

7. Դասարանների սխալ անուններ

Շատ դասավորողներ, երբ պետք է տեքստը կանաչապատեն, դրան կցում են .green դասը:

Հաղորդագրության տեքստ

Սա սխալ է, քանի որ... Դիզայնը փոխելիս շատ գույներ կարող են փոխվել, օրինակ՝ հաղորդագրության տեքստը կանաչի փոխարեն կարող է հայտնվել կապույտ: Այնուհետև դուք պետք է փնտրեք բոլոր պիտակները, որոնք ունեն .green դասը և փոխարինեք այն .blue-ով:

Հաղորդագրության տեքստ

Հաղորդագրության տեքստ

8. Փիքսելները կոտորակային արժեքներով

Որոշ բրաուզերներ թույլ են տալիս նշել պիքսելները կոտորակային արժեքներով, օրինակ՝ «1.5px»: Բայց սա սխալ է, քանի որ... Փիքսելը անբաժանելի միավոր է: «1.5px»-ի փոխարեն ավելի լավ է օգտագործել «1.5em»:

P (/* սխալ */ տառերի տարածություն՝ 1,5 px; /* ճիշտ */ տառերի տարածություն՝ .005em; )

9. ID-ների փոխարեն դասերի օգտագործում

Խորհուրդ է տրվում id-ի փոխարեն ընտրել ըստ դասի, քանի որ ID-ով ընտրիչներն ավելի մեծ կշիռ ունեն, քան դասերինը, և դժվար կլինի դրանք վերացնել:

#modal a (գույնը՝ կապույտ; ) /* ստորև նշված գույնը չի կարող վերացվել, քանի որ #modal-ն ավելի մեծ քաշ ունի, քան դասերը */ .modal-header a (գույնը՝ #333; ) /* այս դեպքում դուք պետք է ավելացնեք #modal */ #modal .modal-header a (գույնը՝ #333; )
Նաև խորհուրդ չի տրվում օգտագործել!կարևոր է, քանի որ դրա քաշը ավելի բարձր է, քան id հատկանիշը, և այն նույնպես դժվար կլինի վերացնել:

10. Ճաշացանկ

Մենյուը պետք է ձևաչափվի որպես ցուցակ:

Գլխավոր Նորություններ Ընկերության մասին

• տուն
• Նորություններ
• Ընկերության մասին

11. Նկարների համար բացակայում է alt-ը

alt հատկանիշը պետք է նշվի պիտակներում (կարող է դատարկ լինել):

12. Պիտակներ

Յուրաքանչյուր էջի համար պետք է լինի միայն մեկ վերնագիր

. Հիմնականում այս թեգը պարունակում է էջի վերնագիրը:

13. Տառադարձություն

Բոլոր տարրերի անունները պետք է գրվեն անգլերեն թարգմանությամբ: Նույնիսկ եթե չգիտեք, թե ինչպես է բառը գրվում անգլերենում, կան բազմաթիվ անվճար ծառայություններ, որոնք կարող են թարգմանել այն: Երբ տարրերի անունները հայտնվում են տառադարձման մեջ, դա ոչ պրոֆեսիոնալ է թվում:

/* սխալ */ .tovar () .stranica () .zapros () /* ճիշտ */ .product () .էջ () .հարցում ()

14. Քլիրֆիքս

Դժվար է համառոտ գրել հստակեցման մասին, բայց ես կնշեմ այն ​​կետը, որ, իմ կարծիքով, շատ դասավորության դիզայներներ սխալվում են:

class.clearfix-ը պետք է նշվի մայր պիտակի մեջ և չտեղադրվի դրա կողքին:

15. HTML՝ ծրագրավորման լեզու

Որոշ մարդիկ, ովքեր նոր են HTML-ում, կարծում են, որ HTML-ը ծրագրավորման լեզու է: Իրականում HTML-ը ծրագրավորման լեզու չէ, այն կարելի է համեմատել Microsoft Word-ի հետ։ Օրինակ՝ տեքստը համարձակ դարձնելու համար Word-ում պետք է սեղմել կոճակի վրա, իսկ HTML-ում՝ գրել կոդը։ Նրանք. HTML-ը պարզապես գործիք է, որն ավելացնում է տեքստ, նկարներ, աղյուսակներ և այլ տարրեր: Սա CSS-ի սկսնակների համար ուղեցույցի երկրորդ հոդվածն է, որը բացատրում է CSS-ի և փաստաթղթերի փոխհարաբերությունները: Դրանում դուք կսովորեք, թե ինչպես ավելացնել CSS ոճեր այն փաստաթղթին, որը ստեղծել եք առաջին հոդվածի ուսումնասիրության ընթացքում։

Info: Ինչու՞ է ձեզ անհրաժեշտ CSS-ը:

CSS-ն օգտագործվում է ձեր փաստաթղթերի ոճերը սահմանելու համար, ներառյալ դիզայնը, դասավորությունը և դասավորության տատանումները տարբեր սարքերի և էկրանի չափսերի համար: Դուք կարող եք տեղադրել CSS ոճերը պիտակի ներսում փաստաթուղթ ներկառուցված ոճի թերթիկով կամ կցեք առանձին CSS ֆայլ, որը կսահմանի ձեր ոճերը արտաքինից: Արտաքին ոճաթերթը փաստաթղթին կապելու համար պարզապես վերնագրում հղում ավելացրեք ոճաթերթին փաստաթուղթ։

Արտաքին ոճային թերթիկ ունենալը շատ առավելություններ ունի: Ոճերը HTML բովանդակությունից անջատ պահելը.

• Օգնում է խուսափել կրկնությունից
• Հեշտացնում է սպասարկումը
• Թույլ է տալիս փոփոխություններ կատարել ամբողջ կայքի համար մեկ վայրում

CSS-ի միջոցով դուք պահում եք ոճավորման մասին տեղեկությունները համօգտագործվող ֆայլերում, որոնք համօգտագործվում են բոլոր էջերի կողմից: Օրինակ, երբ փաստաթղթերը հղում են անում այն ​​ոճաթերթերին, որոնք սահմանում են h2 վերնագրերի գույնը, դուք կարող եք ոճը կիրառել h2 վերնագրերի պիտակների վրա ամբողջ աշխարհում՝ փոխելով մեկ CSS հատկանիշ:

Երբ օգտատերը բացում է վեբ էջը, զննարկիչը էջի բովանդակության հետ մեկտեղ ներբեռնում է ոճի մասին տեղեկությունները:

Երբ օգտատերը տպագրության ռեժիմում բացում է վեբ էջը, դուք կարող եք տրամադրել տարբեր ոճային տեղեկություններ, որոնք կդարձնեն էջը ավելի հեշտ ընթերցելը:

Ինչպե՞ս ստիպել HTML-ին և CSS-ին միասին աշխատել: Ընդհանուր առմամբ, HTML-ն օգտագործվում է փաստաթղթի բովանդակությունը նկարագրելու համար, այլ ոչ թե դրա ոճը: CSS-ն օգտագործվում է փաստաթղթի ոճը նշելու համար, բայց ոչ բովանդակությունը: Այս կանոնից որոշ բացառություններ կտեսնեք ավելի ուշ ուղեցույցում:

Ավելի մանրամասն

Նշման լեզուն, ինչպիսին HTML-ն է, նաև տրամադրում է ոճերը նշելու որոշ եղանակներ:

Օրինակ, HTML-ում կարող եք օգտագործել թեգը տեքստը թավ դարձնելու համար կամ նշեք էջի ֆոնի գույնը պիտակի մեջ .

CSS-ն օգտագործելիս, նշագրման լեզվով ոճերի կարգավորումը սովորաբար չի օգտագործվում, քանի որ ոճավորման ողջ տեղեկատվությունը հեշտությամբ ընթեռնելի է և փոփոխվում է CSS ֆայլում:

Գործողություն. Ստեղծեք ոճի թերթիկ

1. Ստեղծեք նոր տեքստային ֆայլ նույն գրացուցակում, ինչ առաջին հոդվածում ստեղծված doc1.html:
2. Պահպանեք այն որպես style1.css: Այս ֆայլը կլինի ձեր ոճի թերթիկը:
3. Պատճենեք և տեղադրեք հետևյալ տողը CSS ֆայլի մեջ, այնուհետև պահեք ֆայլը՝ ուժեղ (գույնը՝ կարմիր;)

Ոճային թերթիկը փաստաթղթի հետ կապելը

1. Ձեր փաստաթուղթը ոճային թերթիկին կապելու համար դուք պետք է որոշ փոփոխություններ կատարեք HTML ֆայլում: Ավելացրեք ստորև նշված տողերը.

   Գաճող Սոճը Սսավաններ

2. Պահպանեք ֆայլը և բացեք այն ձեր բրաուզերում: Ոճի թերթիկը մեծատառերը կարմիր կդարձնի.

Բացի կարմիրից, CSS-ում կան նաև այլ գույների անուններ:

Cascading Style Sheets (CSS) օգտագործվում են վեբ էջը այցելուների աչքում գրավիչ դարձնելու համար: Բացի այդ, CSS ոճի թերթիկները մեծապես պարզեցնում են վեբ էջի նախագծման գործընթացը: CSS-ը նաև թույլ է տալիս փոփոխություններ կատարել մեկ տեղում, այլ ոչ թե խմբագրել ամբողջ կայքը: Այսպիսով, դուք ստիպված չեք լինի այցելել կայքի յուրաքանչյուր վեբ էջ և խմբագրել դրանք:

CSS-ը խնայում է ձեզ արժեքավոր ժամանակ և էներգիա: Կասկադային ոճերի թերթիկները, ինչպես հուշում է անվանումը, սահմանում են հատուկ ոճ վեբ էջերի տարրերի համար՝ հիմնված առաջնահերթությունների ցանկի վրա, որը սովորաբար կոչվում է «կասկադ»: Բացի դրանից, այն նաև թույլ է տալիս կառավարել տարբեր տարրեր ձեր կայքի վեբ էջերում: Մեկ CSS ոճի թերթիկը կարող է վերահսկել ամբողջ կայքի տառատեսակը, ձևաչափումը, տեքստի չափը, դիրքավորումը, ոճավորումը և գույնը: Թեև Cascading Style Sheets-ը կարող է փոխել ձեր կայքի ներկայացումն ու տեսքը, այնուամենայնիվ, դրանք կապ չունեն կայքի ձևավորման հետ:

CSS-ը կարող է շատ առումներով օգնել վեբ վարպետին: CSS-ի շնորհիվ ձեր կայքը կունենա ավելի գրավիչ դիզայն։ Ասված է, որ նույնիսկ որոնիչները նախընտրում են CSS-ի վրա հիմնված կայքերը, երբ խոսքը վերաբերում է դրանք որոնման ինդեքսում դասակարգելուն:

Կայքի ներկայացումն առանձնացնելն իր բովանդակությունից:

CSS-ի միջոցով դուք կարող եք մեծապես վերահսկել ձեր կայքի արտաքին տեսքը, քանի որ այս տեխնոլոգիան թույլ է տալիս տարբեր ոճերի թերթիկներ կապել ձեր կայքի տեքստի հետ: Արդյունքում, եթե Ձեզ անհրաժեշտ է փոխել ցանկացած տարրի տեսքը վեբ էջի վրա, ապա ձեզ հարկավոր է միայն մեկ արտաքին CSS ոճաթերթի ֆայլ խմբագրել, և այն կարտացոլվի ամբողջ կայքում: Այս մոտեցումը ոչ միայն ապահովում է կայքի կառավարման ճկուն գործընթաց, այլեւ զգալիորեն խնայում է ժամանակը:

Կայքի բեռնման արագության բարձրացում:

Քանի որ Cascading Style Sheets-ը տեքստային ֆայլեր են, դրանք թեթև են և օգտագործում են ավելի քիչ թողունակություն, որն իր հերթին մեծացնում է ձեր կայքի բեռնման արագությունը: Ըստ վիճակագրության՝ CSS-ի վրա հիմնված արտաքին ոճային թերթիկներ օգտագործող կայքը մոտավորապես յոթ անգամ ավելի արագ է բեռնվում, քան նմանատիպ կայքը առանց այս տեխնոլոգիայի: Քանի որ տեքստային փաստաթղթերը բեռնվում են շատ արագ, վեբ էջերը կարտացոլվեն գրեթե մի քանի վայրկյանում, ինչը դրական ազդեցություն կունենա ձեր կայք այցելելիս այցելուների ընդհանուր փորձի վրա:

CSS-ը հեշտացնում է ցանկացած տարրի դիրքը վեբ էջում փոխելը: Օրինակ, ցանկը կարող է տեղադրվել ցանկացած վայրում՝ ձախ, աջ, վերև կամ ներքև: Միևնույն ժամանակ, տարրերի նման դիրքավորման հիմնական նպատակն է ապահովել, որ որոնման համակարգերի ռոբոտները նախ սողում են ձեր կայքի հիմնական բովանդակությունը։ Դրան հասնելու համար անհրաժեշտ է HTML կոդի հիմնական բովանդակությունից հետո տեղադրել բոլոր օժանդակ տարրերը, ինչպիսիք են մենյուները:

CSS համատեղելիություն ժամանակակից բրաուզերների հետ:

Քանի որ ներկայումս կան բազմաթիվ տարբեր բրաուզերներ, վեբ վարպետի համար դժվար է ստուգել կայքի ֆունկցիոնալությունը բացարձակապես բոլոր բրաուզերներում: Այնուամենայնիվ, եթե դուք հավատարիմ մնաք ստանդարտ CSS-ի վրա հիմնված դասավորությանը, այս խնդիրը հեշտությամբ կլուծվի:

Ինչպես երևում է վերը նշվածից, CSS տեխնոլոգիան, ժամանակակից, գրավիչ կայքեր ստեղծելու գործիքներ տրամադրելուց բացի, օգնում է նաև լուծել մի շարք խնդիրներ։ Ինչն ինքնին որոշում է CSS-ի բարձր կարևորությունը:

Ինտերնետում ամենահին ծառայություններից են ֆորումները: Հաղորդակցման այս հարթակները առաջիններից էին, որոնք հայտնվեցին և այն ժամանակից ի վեր գրեթե անփոփոխ են մնացել: Բայց չնայած իրենց մեծ տարիքին, նրանք դեռ գլուխ են հանում իրենց գործառույթներից։ Այստեղ մարդիկ շփվում են, հարցեր տալիս ու պատասխաններ ստանում։

CSS կոդը կարող է տեղակայվել կամ HTML փաստաթղթում կամ նույն ընդլայնմամբ առանձին ֆայլում: Եթե ​​CSS-ը գտնվում է արտաքին ֆայլում և չի աշխատում, ապա առաջին բանը, որ պետք է անել, ստուգել HTML կոդի հղումը:

Հղումը (href) պետք է գրված լինի մեկ հղման պիտակի մեջ: Հղման բովանդակությունը HTML5-ում պետք է նման լինի՝ href=”style.css” rel=”stylesheet”: Մի մոռացեք, որ հղման պիտակը ինքնին գտնվում է զուգակցված գլխի հիմնական պիտակների միջև:

href արժեքից հետո նշվում է css ֆայլի անունը, որը պետք է կցվի փաստաթղթին (դա պարտադիր չէ, որ ոճը լինի): Եթե ​​ոճերով ֆայլը գտնվում է մեկ այլ թղթապանակում, ապա դուք պետք է նշեք դեպի այն ուղին, օգտագործելով շեղ (/):

CSS շարահյուսություն

Եթե ​​հղումով ամեն ինչ կարգին է, բայց CSS-ը դեռ չի աշխատում, պետք է ստուգել կոդի շարահյուսությունը:

Նախ, ստուգեք ընտրիչը: Ընտրիչը պետք է համապատասխանի այն, ինչ գրել եք html ֆայլում։ Այսինքն, եթե html-ում ընտրված է class = “container”, ապա ընտրողի փոխարեն CSS-ում գրվում է “.container”: Նշեք վերնագրից առաջ կետը: Ժամկետը դրվում է միայն դասերից առաջ։ Եթե ​​դուք նշում եք ոճ h1 վերնագրերի համար, ապա ոչ մի կետ պետք չէ:

Ինքը՝ բլոկը, որտեղ հայտարարված է ոճը, գրված է ընտրիչի անունից հետո՝ գանգուր փակագծերով: Գույքի անվան և դրա արժեքի միջև դրվում է երկու կետ, որին հաջորդում է ստորակետը:

Բրաուզերը

Եթե ​​դիտարկիչը, որի վրա փորձարկում եք ձեր CSS կոդը, արդեն հնացած է, ապա այն չի կարողանա ճիշտ ցուցադրել CSS3 լեզուն: Հետևաբար, այն դեպքում, երբ կոդը չի աշխատում, խնդրում ենք թարմացնել ձեր բրաուզերը վերջին տարբերակին:

Փորձարկման համար օգտագործեք տարբեր բրաուզերներ՝ Opera, Google Chrome, Firefox: Խորհուրդ չի տրվում ապավինել Internet Explorer-ին, քանի որ այն Microsoft-ի հիմնական նպատակը չէ, ինչն այն դարձնում է «անհամապատասխան» CSS3-ի հետ:

Կոդի վրիպազերծման համար բրաուզերների նոր տարբերակները պարունակում են հատուկ մոդուլ, որը թույլ է տալիս խմբագրել կոդը անմիջապես բրաուզերում: Դա անելու համար կտտացրեք «Ցույց տալ աղբյուրի կոդը» պատուհանի համատեքստի ընտրացանկում:

Ժառանգություն

CSS-ում ամենադժվարը հասկանալը ժառանգությունն է: Մինչդեռ դա ամենից հաճախ հանդիսանում է չաշխատող կոդի հիմքը։

CSS-ն աշխատում է նույն սկզբունքով, ինչ բնադրող տիկնիկները։ Մեկ տարան մտցվում է մյուսի մեջ, երրորդը՝ դրա մեջ և այլն։ Ժառանգության բոլոր բարդությունները սովորելու համար հարկավոր է զգալի ժամանակ ծախսել: Դուք կարող եք սկսել հիմունքներից:

Նախ, տրամաբանորեն փորձեք բացահայտել, թե որտեղ է սխալը տեղի ունենում css կոդում: Սա հեշտությամբ կհասկանաք, քանի որ... Սխալի արդյունքում տարրերից մեկը բրաուզերում ցուցադրվելիս դուրս կգա ձեր ներկայացրած նկարից։

Երբ գտնում եք կոնտեյներ կամ այլ տարր, որն ունի չաշխատող ոճ, ուշադիր նայեք, թե ինչի մեջ է «տեղադրված» տարրը:

Հնարավոր է, որ մայր տարրը պարունակում է հատկություն, որը թույլ չի տալիս երեխայի տարրի մեկ այլ հատկություն աշխատել: Ժառանգության մասին ավելին կարող եք կարդալ ցանկացած CSS տեղեկատու գրքում: