Როგორ შევცვალოთ საიტი ფონტის ფერები CSS- ით

კარგი ტიპოგრაფიული დიზაინი წარმატებული ვებსაიტის მნიშვნელოვანი ნაწილია. CSS გაძლევთ დიდ კონტროლს ვებ გვერდების ტექსტის გამოჩენა ვებ-გვერდების შექმნა. ეს გულისხმობს ნებისმიერი ფონტის ფერის შეცვლას, რომელსაც იყენებთ.

ფონტის ფერები შეიძლება შეიცვალოს გარე სტილის ფურცლის გამოყენებით , შიდა სტილის ფურცელი , ან ის შეიძლება შეიცვალოს HTML დოკუმენტში შიგნით სტილის გამოყენებით. საუკეთესო პრაქტიკა უკარნახოს, რომ გამოიყენოთ გარე სტილი ფურცელი თქვენი CSS სტილისთვის. შიდა სტილის ფურცელი, რომელიც თქვენს დოკუმენტში პირდაპირ "წერილზე" დაწერილია, ზოგადად მხოლოდ მცირე, ერთგვერდიანი საიტებია. Inline სტილის თავიდან აცილება, რადგან ისინი akin ძველი "შრიფტის" tags, რომ ჩვენ შეეხო მრავალი წლის წინ. ამ სტილის სტილის შექმნა ძნელია მართოს შრიფტის სტილის მართვა, რადგან თქვენ უნდა შეცვალოთ ისინი ინტოქსის სტილის ყველა ინსტანციაში.

ამ სტატიაში, თქვენ ისწავლით თუ როგორ უნდა შეიცვალოს შრიფტის ფერი გარე სტილის გამოყენებით და სტილი, რომელიც გამოიყენება პუნქტის ტეგით. თქვენ შეგიძლიათ გამოიყენოთ იგივე სტილი ქონება, რომ შეიცვალოს შრიფტის ფერი ნებისმიერ ტეგზე, რომელიც აკრავს ტექსტს, მათ შორის tag.

დამატება სტილის შეცვლა ფონტის ფერი

ამ მაგალითისთვის საჭიროა HTML დოკუმენტი თქვენი გვერდის მარკირებისთვის და ცალკეული CSS ფაილი, რომელიც დაერთვის ამ დოკუმენტს. HTML დოკუმენტი, სავარაუდოდ, რიგ ელემენტებს მისცემს. ამ მუხლის მიზნებისთვის შეშფოთებულია ის ნაწილი, რომელიც აბზაცის ელემენტს წარმოადგენს.

აქ არის, თუ როგორ უნდა შეცვალოთ შრიფტის ფერის ტექსტის შინაარსი პუნქტებში თქვენი გარე სტილის გამოყენებით.

ფერი ღირებულებები შეიძლება გამოხატავდეს ფერის საკვანძო სიტყვებს, RGB ფერის ნომრებს ან ჰექსაციციურ ფერს.

1. დაამატეთ სტილის ატრიბუტი პუნქტის tag:
   1. p {}
2. მოათავსეთ ფერი საკუთრების სტილში. მოათავსეთ კოლონიზაცია ამ ქონების შემდეგ:
   1. p {ფერი:}
3. შემდეგ დაამატეთ თქვენი ფერის ღირებულება საკუთრების შემდეგ. დარწმუნდით, რომ ეს მნიშვნელობა ნახევრად-მსხვილი ნაწლავისთვის:
   1. p {ფერი: შავი;}

თქვენს გვერდზე პარაგრაფები ახლა შავი იქნება.

ეს მაგალითი იყენებს ფერადი სიტყვას - "შავი". ეს არის ერთი გზა, რომ დაამატოთ ფერი CSS, მაგრამ ეს ძალიან შეზღუდულია. "შავი" და "თეთრი" სიტყვების გამოყენება მარტივია, რადგან ეს ორი ფერი ძალიან კონკრეტულია, მაგრამ რა მოხდება, თუ გამოიყენებთ საკვანძო სიტყვა "წითელი", "ლურჯი" ან "მწვანე"? ზუსტად რა მოხდება წითელი, ლურჯი ან მწვანე ჩრდილში? თქვენ არ შეგიძლიათ ზუსტად განსაზღვროთ რომელი ფერი ჩრდილში გსურთ სიტყვა. სწორედ ამიტომ ჰექსადეციალური ღირებულებები ხშირად გამოიყენება ფერის საკვანძო სიტყვების ადგილზე.

p {ფერადი: # 000000; }

ეს CSS სტილის ასევე დააყენებს ფერი თქვენი პუნქტები შავი, რადგან hex კოდი # 000000 ითარგმნება შავი. თქვენ შეგიძლიათ გამოიყენოთ მოკლე შრიფტით ამ ჰექს სიდიდის გამოყენება და დაწეროთ ის, როგორც მხოლოდ # 000 და თქვენც იგივე მიიღებთ.

როგორც უკვე აღვნიშნეთ, hex ფასეულობები კარგად იმუშავებს, როდესაც საჭიროა ფერი, რომელიც არ არის უბრალოდ შავი ან თეთრი. აქ არის მაგალითი:

p {ფერი: # 2f5687; }

ეს hex მნიშვნელობა დააყენებს პარაგრაფებს ლურჯი ფერის, მაგრამ განსხვავებით საკვანძო სიტყვა "ლურჯი", ეს hex კოდი გაძლევთ უნარი შექმნას ძალიან კონკრეტული ჩრდილში ლურჯი - სავარაუდოდ, რომ დიზაინერი აირჩიოს, როდესაც ისინი ქმნიან ინტერფეისს ამ ვებგვერდზე. ამ შემთხვევაში, ფერი იქნება შუა რიცხვებში სპექტრი, ფიქალის მსგავსი ლურჯი.

საბოლოოდ, შეგიძლიათ გამოიყენოთ RGBA ფერი ღირებულებების შრიფტის ფერები. RGCA არის მხარდაჭერილი ყველა თანამედროვე ბრაუზერში, ასე რომ თქვენ შეგიძლიათ გამოიყენოთ ეს ფასეულობები მცირე ინერვიულოთ, რომ ის არ იქნება მხარდაჭერილი ბრაუზერში, მაგრამ ასევე შეგიძლიათ დააყენოთ მარტივი fallback.

p {ფერი: rgba (47,86,135,1); }

ეს RGBA მნიშვნელობა იგივეა, რაც ადრე მითითებული ფირფიტა ლურჯი ფერი. პირველი 3 ფასეულობები წითელი, მწვანე და ლურჯი ღირებულებებია და საბოლოო ნომერი ალფა პარამეტრია. ეს არის "1", რაც ნიშნავს "100%", ასე რომ ეს ფერი არ იქნებოდა გამჭვირვალობა. თუ მითითებული, რომ ათობითი რიცხვი, ისევე როგორც .85, ეს იქნებოდა თარგმნა 85% opacity და ფერი იქნება ოდნავ გამჭვირვალე.

თუ გსურთ თქვენი ფერის ღირებულებების ტყვია, ამის გაკეთება გექნებათ:

p {
ფერი: # 2f5687;
ფერი: rgba (47,86,135,1);
}

ეს სინტაქსი ადგენს hex კოდი პირველი. ეს მაშინ გადაწერს ამ ღირებულებას RGBA- ს რიცხვით. ეს იმას ნიშნავს, რომ ნებისმიერი ძველი ბრაუზერი, რომელიც მხარს არ უჭერს RGBA მიიღებს პირველ მნიშვნელობას და უგულებელყოფს მეორე. თანამედროვე ბრაუზერები გამოიყენებენ მეორე პოსტი CSS კასკადი.