Ինչու պարզ տիտղոսը հեշտացնում է կոդավորումը
CSS- ը կամ Cascading Style Sheets- ը վեբ դիզայնի ոլորտի ընդունված ձեւն են, որ տեսողական տեսք ունենան կայքի վրա: CSS- ով դուք կարող եք վերահսկել էջի դասավորությունը, գույները, տիպաբանությունը , ֆոնային պատկերը եւ շատ ավելին: Հիմնականում, եթե դա տեսողական ոճ է, ապա CSS- ը այդ ոճերը ձեր կայքի համար բերելու ձեւն է:
Երբ դուք ավելացնում եք CSS ոճերը մի փաստաթուղթ, դուք կարող եք նկատել, որ փաստաթուղթը սկսում է ավելի երկար եւ երկար: Նույնիսկ մի բուռ էջի հետ փոքր կայքը կարող է ավարտվել CSS- ի մի մեծ ֆայլով, եւ շատ մեծ էջ եւ բազմաթիվ էջեր եզակի բովանդակության համար կարող են շատ մեծ CSS ֆայլեր: Սա բարդանում է այնպիսի պատասխանատու կայքերի կողմից, որոնք ունեն բազմաթիվ լրատվամիջոցների հարցումներ, որոնք ընդգրկված են ոճաթերթերով, փոխելու համար, թե ինչպես են տեսողական տեսքը տեսնում եւ էջը տարբեր էկրանների համար է:
Այո, CSS ֆայլերը կարող են երկար լինել: Սա խոշոր խնդիր չէ, երբ խոսքը վերաբերում է կայքի կատարողականին եւ ներբեռնման արագությանը, քանի որ նույնիսկ երկար CSS ֆայլը բավական փոքր է (քանի որ այն իսկապես ընդամենը տեքստային փաստաթուղթ է): Այնուամենայնիվ, ամեն մի քիչ ակնկալում է, երբ խոսքը վերաբերում է էջի արագությանը, այնպես որ, եթե դուք կարող եք կատարել ձեր ոճը թերթիկը, դա լավ գաղափար է: Սա այն է, որտեղ «ստորակետը» կարող է շատ հարմար լինել ձեր ոճաթերթում:
Commas- ը եւ CSS- ը
Կարող եք մտածել, թե ինչ դեր է կատարում վեկտորը սելեկտորային սելեկցիայի մեջ: Ինչպես դատավճիռներում, ստորակետը բերում է հստակություն, ոչ թե կոդ, բաժանարարներին: Կոմպլեկտը CSS ընտրիչում առանձնացնում է բազմակի ընտրողներ նույն ոճերում:
Օրինակ, ներքեւում տեսնենք որոշ CSS- ներ:
th {գույնը `կարմիր; }
td {գույնը `կարմիր; }
p.red {գույնը `կարմիր; }
div # firstred {գույնը `կարմիր; }
Այս շարադրանքով դուք ասում եք, որ ցանկանում եք th tags, td tags, պարբերության պիտակները դասի կարմիրով, եւ div tag- ը ID- ով առաջինն է, որպեսզի ոճի գույնը կարմիր լինի:
Սա հիանալի ընդունելի CSS է, բայց երկու կարեւոր թերություններ կան այսպես գրելու համար.
- Հետագայում, եթե որոշեք փոխել այս հատկությունների տառատեսակի գույնը կապույտ, ապա պետք է այդ փոփոխությունը չորս անգամ կատարել ձեր ոճաթերթում:
- Այն ավելացնում է բազմաթիվ լրացուցիչ նիշներ ձեր ոճաթերթերի համար, որոնք ձեզ հարկավոր չեն: Այս 4 ոճերը կարող են չհամընկնել overkill, բայց եթե դուք շարունակեք դա անել ձեր ամբողջ ոճը թերթիկ, ապա գծերը կավելանա, եւ այդ թերթիկը կլինի շատ ավելի մեծ է, քան այն պետք է լինի:
Կարող եք խուսափել այդ թերություններից եւ պարզեցնել ձեր CSS- ի ֆայլը, մենք կփորձենք օգտվել ստորակետերից:
Կոմպլեկտ օգտագործելով առանձին ընտրողների համար
4 առանձին CSS ընտրողներ եւ 4 կանոններ գրելու փոխարեն, դուք կարող եք համատեղել այս բոլոր ոճերը մեկ կանոնի հատկությամբ, առանձնացնելով անհատական ընտրողներին ստորակետով: Ահա թե ինչպես դա արվի.
th, td, p.red, div # firstred {գույնը `կարմիր; }
Տրամաբանական բնույթը հիմնականում գործում է որպես «եւ» բառի ներսում: Այսպիսով, դա վերաբերում է t h tags- ի եւ TD tags- ի եւ պարբերության պիտակներին դասի կարմիրով եւ div tag- ը ID- ով առաջին անգամ: Դա հենց այն է, ինչ մենք ունենք նախկինում, բայց փոխարենը պետք է 4 CSS կանոնները, մենք ունենք մի կանոն, բազմաթիվ ընտրողների հետ: Սա է պատճառը, որ վեկտորը ընտրության մեջ է, դա թույլ է տալիս մեզ մեկ կանոնում ունենալ բազմակի ընտրողներ:
Ոչ միայն այդ մոտեցումը ստիպում է ավելի նուրբ, ավելի մաքուր CSS ֆայլեր, այն էլ ավելի հեշտացնում է ապագա թարմացումները: Հիմա, եթե ուզում ես փոխել գույնը կարմիրից կապույտ, միայն պետք է փոխել մեկ վայրում, փոխարենը չորս բուն ստանդարտ կանոնների փոխարեն: Մտածեք այս ժամանակի խնայողությունների ամբողջ CSS ֆայլի մասին եւ կարող եք տեսնել, թե ինչպես դա կպահի ձեզ, թե ժամանակն ու տարածքը երկար ժամանակում:
Սինտաքսի փոփոխություն
Որոշ մարդիկ որոշում են CSS- ի ավելի պարզունակ դարձնել, յուրաքանչյուր սելեկտի առանձնացնելով սեփական տողում, այն ամենը գրել որպես վերը նշված գիծ: Այսպես է կատարվում.
րդ,
td,
p.red,
div # firstred
{
գույնը `կարմիր;
}
Ուշադրություն դարձրեք, որ յուրաքանչյուր սելեկտից հետո տեղադրեք ստորակետ, այնուհետեւ օգտագործեք «մտնեք», հաջորդ սելեկտորը կոտրելու համար: Վերջնական ընտրացանկից հետո չեք մուտքագրել ստորակետ:
Ընտրեք ձեր ընտրողների միջեւ ստորագրությունները, դուք ստեղծում եք ավելի կոմպակտ ոճի թերթ, որն ավելի հեշտ է թարմացնել ապագայում, եւ դա ավելի հեշտ է կարդալ այսօր:
Իրական հոդվածը Ջենիֆեր Քրինինն է: Փոփոխված է Ջերեմի Գիրարդը, 5/8/17 թ .: