Ինչպես փոխել կայքի տառատեսակների գույները CSS- ով

Լավ տպագրական դիզայնը հաջողված կայքի կարեւոր մասն է: CSS- ն ձեզ մեծ հսկողություն է տալիս ոստայնի էջերի վրա տեքստի արտաքին տեսքի առաջադրման համար: Սա ներառում է այնպիսի տառատեսակների գույնը փոխելու ունակությունը:

Տառատեսակի գույները կարող են փոխվել արտաքին ոճով , ներքին ոճով , կամ այն ​​կարող է փոխվել HTML ձեւաչափով ներդիրի ոճավորմամբ : Լավագույն պրակտիկան թելադրում է, որ դուք պետք է օգտագործեք արտաքին ոճի թերթիկ ձեր CSS ոճերի համար: Ներքին ոճաթերթերը, որոնք ուղղակիորեն գրված են ձեր փաստաթղթի «գլուխը», սովորաբար օգտագործվում են փոքր, մեկ էջանոց կայքերի համար: Ներածված ոճերը պետք է խուսափել, քանի որ դրանք շատ են նախկինում հին «տառատեսակների» պիտակները, որոնք մենք զբաղված ենք տարիներ առաջ: Այդ ներդիրի ոճերը շատ դժվարացնում են տառատեսակի կառավարումը, քանի որ դուք պետք է փոխեք դրանք ներդիրների ոճով:

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

Ավելացնելով ոճերը `փոխել տառատեսակի գույնը

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

Ահա թե ինչպես փոխել տեքստի տառատեսակը գույնի պարունակության մեջ, օգտագործելով ձեր արտաքին ոճը:

Գունավոր արժեքները կարող են արտահայտվել որպես գույնի հիմնաբառեր, RGB գույնի համարներ կամ տասնվեցամյա գունային համարներ:

1. Ավելացնել ոճի հատկանիշ պարբերության tag- ի համար.
   1. p {}
2. Տեղադրեք գույնի գույքը ոճով: Այդ գույքից հետո տեղադրեք մի կետ:
   1. p {գույնը `}
3. Այնուհետեւ գույքի արժեքից ավելացրեք ձեր գույնի արժեքը: Համոզված եղեք, որ այդ արժեքը կեսնյուն կետով ավարտվի.
   1. p {գույնը `սեւ;}

Ձեր էջի պարբերությունները այժմ սեւ կլինեն:

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

p {գույնը `# 000000; }

Այս CSS- ի ոճը նաեւ ձեր պարբերությունների գույնը կարտացնի սեւ, քանի որ # 000000 միջանկյալ կոդը թարգմանվում է սեւ: Դուք նույնիսկ կարող եք օգտագործել ստեղնաշար այդ hex արժեքով եւ գրեք այն որպես միայն # 000, եւ դուք կստանաք նույնը:

Ինչպես արդեն նշվեց, hex արժեքները լավ են աշխատում, երբ անհրաժեշտ է միայն սեւ կամ սպիտակ գույն: Ահա մի օրինակ.

p {գույնը `# 2f5687; }

Այս hex արժեքը պարբերությունները կապում է կապույտ գույնի հետ, բայց, ի տարբերություն «կապույտ» բառի, այս hex կոդը Ձեզ հնարավորություն է տալիս տեղադրել կապույտի շատ կոնկրետ երանգ: հավանաբար այն, որ դիզայները ընտրում է, երբ ստեղծում է ինտերֆեյսի համար այս կայքը: Այս դեպքում, գույնը կլիներ միջին միջակայք, շիֆի նման կապույտ:

Վերջապես, Դուք կարող եք նաեւ օգտագործել RGBA գույնի արժեքները տառատեսակների համար: RGCA- ն այժմ աջակցում է բոլոր ժամանակակից բրաուզերում, այնպես որ դուք կարող եք օգտագործել այդ արժեքները, քանի դեռ չեք մտահոգվում, որ այն չի աջակցվում վեբ բրաուզերում, բայց դուք կարող եք նաեւ հեշտ փոխել:

p {գույնը `rgba (47,86,135,1); }

Այս RGBA- ի արժեքը նույնն է, ինչ ավելի շուտ նշված է շիթային կապույտ գույնը: Առաջին երեք արժեքները սահմանեցին Կարմիր, Կանաչ եւ Կապույտ արժեքները եւ վերջնական թիվը ալֆա պարամետրն է: Այն սահմանվում է «1», ինչը նշանակում է «100%», ուստի այդ գույնը չի ունենա թափանցիկություն: Եթե ​​այն դնում եք տասնորդական տառերով, ինչպես .85, այն կփոխադրի 85% անթափանցիկություն եւ գույնը մի փոքր թափանցիկ կլիներ:

Եթե ​​ցանկանում եք bulletproof ձեր գունային արժեքները, դուք դա անել:

p {
գույնը `# 2f5687;
գույնը `rgba (47,86,135,1);
}

Այս շարահյուսությունը սահմանում է hex կոդը առաջինը: Այնուհետեւ այդ արժեքը վերագրվում է RGBA- ի համարին: Սա նշանակում է, որ ցանկացած հին բրաուզեր, որը չի աջակցում RGBA- ին, կստանա առաջին արժեքը եւ անտեսում է երկրորդը: Ժամանակակից բրաուզերները կօգտագործեն CSS- ի երկրորդ կասկադը: