Հասկանալով CSS ոճերի 3 տեսակները

Ներկառուցված, ներկառուցված եւ արտաքին ոճի թերթեր. Ահա թե ինչ պետք է իմանաք

Front-end- ի կայքէջը հաճախ ներկայացվում է որպես 3-ոտքի աթոռ: Այս ոտքերը հետեւյալն են.

• HTML կայքի կառուցվածքի համար;
• CSS տեսողական ոճերի համար;
• Javascript վարքագծի համար:

Այս աթոռի, CSS- ի կամ Cascading Style Sheets- ի երկրորդ ոտքը այն է, ինչ մենք այսօր ենք նայում այստեղ: Մասնավորապես, մենք ցանկանում ենք դիմել 3 տեսակի ոճերի, որոնք կարող եք ավելացնել փաստաթղթին:

1. Ներդիրի ոճերը
2. Ներկառուցված ոճերը
3. Արտաքին ոճերը

Այս տեսակի CSS- ի ոճերից յուրաքանչյուրն ունի իր օգուտներն ու թերությունները, ուստի եկեք ավելի խորը նայենք դրանցից յուրաքանչյուրին առանձին:

Inline Styles- ը

Ներածված ոճերը ոճերը են, որոնք ուղղակիորեն գրված են HTML փաստաթղթում պիտակի մեջ: Ներածված ոճերը ազդում են միայն տվյալ պիտակի վրա: Ահա մի ստեղնային ոճի օրինակ, որը կիրառվում է ստանդարտ հղում կամ խարիսխ, պիտակ:

Այս CSS կանոնը կդառնա ստանդարտ ընդգծված տեքստի ձեւավորում այս մեկ հղումից: Այն, սակայն, չի փոխի որեւէ այլ հղում էջում: Սա ներկառուցված ոճերի սահմանափակումներից մեկն է: Քանի որ նրանք միայն փոխում են որոշակի տարրեր, դուք պետք է ծածկել ձեր HTML- ը այս ոճերով `իրական էջի դիզայնի հասնելու համար: Դա լավագույն փորձ չէ: Փաստորեն, դա մեկ քայլ է հեռացվել «տառատեսակների» տառերի օրերից եւ ոստայնի էջերի կառուցվածքի եւ ոճերի խառնուրդից:

Սա ստիպում է նրանց շատ դժվար է վերագրել այլ, ոչ ներդիր ոճերի հետ: Օրինակ, եթե ցանկանում եք կայքի արձագանքել եւ փոխել, թե ինչպես է տարրը դիտում որոշակի հանգույցներ, օգտագործելով լրատվամիջոցների հարցումները , ներդիրի ոճերը տարրերի վրա կդարձնեն դա շատ դժվար:

Ի վերջո, inline ոճերը իսկապես տեղին են, երբ օգտագործվում են շատ խնայողաբար:

Փաստորեն, ես հազվադեպ եմ օգտագործել ներդիրների ոճերը իմ վեբ-էջերում:

Ներդրված ոճերը

Ներկառուցված ոճերը այն ոճերն են, որոնք ամրագրված են փաստաթղթի ղեկավարում: Ներդրված ոճերը ազդում են միայն էջի վրա դրված պիտակների վրա: Կրկին, այս մոտեցումը բացասաբար է անդրադառնում CSS- ի ուժերից: Քանի որ յուրաքանչյուր էջում ոճերը կունենան

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

Stylesheets, որոնք ավելացվել են

փաստաթուղթը նաեւ ավելացնում է այդ էջի համար նշանակալից չափի ձեւակերպման կոդ, ինչը կարող է նաեւ էջը դժվարացնել կառավարել ապագայում:

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

Արտաքին ոճի թերթեր

Շատ կայքերն այսօր օգտագործում են արտաքին ոճերի թերթեր: Արտաքին ոճերը ոճերն են, որոնք գրված են առանձին փաստաթղթում եւ հետո կցվում են տարբեր վեբ փաստաթղթեր: Արտաքին ոճի թերթիկները կարող են ազդել ցանկացած փաստաթղթի վրա, ինչը նշանակում է, որ եթե դուք ունեք 20 էջանոց կայք, որտեղ յուրաքանչյուր էջ օգտագործում է նույն ոճի թերթիկը (սովորաբար դա ինչպես է արվում), դուք կարող եք տեսողական փոփոխություն կատարել յուրաքանչյուրի համար այդ էջերի պարզապես խմբագրելով այդ ոճաթերթիկը:

Դա երկարացնում է կայքի կառավարումը:

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

Չնայած ճշմարիտ է, որ արտաքին CSS ֆայլերի համար կատարված հիթ կա, դա, անշուշտ, նվազագույնի է ենթարկվում: Իրականում, CSS ֆայլերը պարզապես տեքստային ֆայլեր են, ուստի դրանք ընդհանրապես շատ մեծ չեն, սկսելու համար: Եթե ​​ձեր ամբողջ կայքը օգտագործում է 1 CSS ֆայլ, դուք նաեւ ստանում եք այդ փաստաթուղթը, որը կախված է նախապես բեռնվածուց հետո:

Սա նշանակում է, որ առաջին էջում որոշ այցեր կարող են լինել փոքր կատարողական հիթ, սակայն հետագա էջերը կօգտագործեն պահված CSS ֆայլը, այնպես որ ցանկացած հարվածը կկիրառվի: Արտաքին CSS ֆայլերը, ինչպես են իմ բոլոր էջերը կառուցում: