Ինչպես փոխել խոսքի գույնը Span Tag- ի եւ CSS- ի հետ

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

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

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

Քայլ առ քայլ հանձնարարականը

  1. Բացեք ձեր վեբ էջը, որը ցանկանում եք թարմացնել ձեր սիրված տեքստի HTML խմբագրիչում: Դա կարող է լինել Adobe Dreamweaver- ի կամ Notepad, Notepad ++, TextEdit եւ այլն:
  2. Փաստաթղթում տեղադրեք այն բառերը, որոնք ցանկանում եք ցուցադրվել տարբեր էջում: Այս ձեռնարկի համար թույլ է տալիս օգտագործել որոշ բառեր, որոնք գտնվում են տեքստի ավելի մեծ պարբերության մեջ: Այդ տեքստը կցուցադրվի thetag զույգը: Գտեք երկու բառերից մեկը, որի գույնը ցանկանում եք խմբագրել:
  3. Տեղադրեք ձեր կուրսորը առաջ բառի կամ բառերի խմբի առաջին տառը, որը ցանկանում եք փոխել գույնը: Հիշեք, եթե դուք օգտագործում եք Dreamweaver- ի նման WYSIWYG- ի խմբագիր, այժմ աշխատում եք «կոդով» տեսքով:
  4. Թողեք տեքստը, որի գույնը մենք ուզում ենք փոխել պիտակով, ներառյալ դասի հատկանիշը: Ամբողջ պարբերությունը կարող է նման լինել. Սա տեքստ է, որը կենտրոնանում է նախադասության վրա:
  5. Մենք ուղղակիորեն օգտագործել ենք ներկառուցված տարրը, այս տեքստը տալ «կեռ», որը մենք կարող ենք օգտագործել CSS- ում: Մեր հաջորդ քայլն այն է, որ անցնենք մեր արտաքին CSS ֆայլը `նոր կանոն ավելացնելու համար:
  1. Մեր CSS ֆայլում, եկեք ավելացնենք.
    1. Ֆոկուս-տեքստ {
    2. գույնը `# F00;
    3. }
    4. مور
  2. Այս կանոնը սահմանեց, որ գծային տարրը ցույց է տալիս կարմիր գույնի մեջ: Եթե ​​մենք ունեինք նախորդ ոճը, որը մեր փաստաթղթի տեքստը սեւ էր դնում, այս ներդիրի ոճը կխթանի գոտի տեքստը, որը պետք է կենտրոնանա եւ տարբերվում է տարբեր գույնի: Մենք կարող էինք նաեւ հավելյալ ոճեր ավելացնել այս կանոնին, թերեւս, տեքստի տեքստի կամ համարձակ դարձնելու համար այն ավելի շատ ընդգծելու համար:
  3. Պահպանեք ձեր էջը:
  4. Փորձեք էջը ձեր սիրած վեբ-բրաուզերում `փոփոխություններ կատարելու համար:
  5. Նշենք նաեւ, որ որոշ վեբ մասնագետներ ընտրում են օգտագործել այլ տարրեր կամ պիտակների զույգերը: Այս պիտակները սովորաբար օգտագործվում էին «համարձակ» եւ «շեղ» համար, սակայն դրանք չեղյալ են հայտարարվել եւ փոխարինվելով: Թեմաները դեռ աշխատում են ժամանակակից բրաուզերներում, սակայն շատ վեբ ծրագրավորողներ դրանք օգտագործում են որպես ներդիրի ոճավորող կեռիկներ: Սա ամենավատ մոտեցումն է, բայց եթե ուզում եք խուսափել որեւէ տարրական տարրերից, ես առաջարկում եմ այդպիսի ոճավորող կարիքների համար պիտանի մնալ:

Խորհուրդներ եւ բաներ դիտելու համար

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