Как да променяте цветовете на шрифта на уебсайта с CSS

CSS ви дава контрол върху появата на текст на уеб страниците, които изграждате и управлявате. В това ръководство ще ви покажем как да променяте цветовете на шрифта в CSS, използвайки цветни ключови думи, шестнадесетични цветови кодове или RGB номера на цветовете.

Как да използвам CSS стилове за промяна на цвета на шрифта

Стойностите на цветовете могат да бъдат изразени като цветни ключови думи, шестнадесетични цветни числа или RGB цветни числа. За този урок ще трябва да имате HTML документ, за да видите промените в CSS и a отделен CSS файл, който е прикачен към този документ. Ще разгледаме по-специално елемента на абзаца.

Използвайте цветни ключови думи за промяна на цветовете на шрифта

За да промените цвета на текста за всеки абзац във вашия HTML файл, отидете на външния лист със стилове и напишете п {}. Поставете цвят свойство в стила, последвано от двоеточие, като p {цвят:}. След това добавете стойността на цвета си след свойството, като го завършите с точка и запетая. В този пример текстът на абзаца се променя на черен цвят:

п {
цвят черен;
}

Използвайте шестнадесетични стойности, за да промените цветовете на шрифта

Използването на цветни ключови думи за промяна на текста в червен, зелен, син или някакъв друг основен цвят няма да ви даде прецизността, която може да търсите, когато създавате различни нюанси на тези цветове. За това са шестнадесетичните стойности.

Този CSS стил може да се използва за оцветяване на вашите абзаци в черно, тъй като шестнадесетичният код # 000000 се превежда в черно. Можете дори да използвате стенография с тази шестнадесетична стойност и да я запишете като # 000 със същите резултати.

п {
цвят: # 000000;
}

Шестнадесетичните стойности работят добре, когато имате нужда от цвят, който не е просто черен или бял. Например, този шестнадесетичен код ви дава възможност да зададете много специфичен нюанс на синьото - синьо средночестотно, подобно на шисти:

п {
цвят: # 2f5687;
}

Hex работи, като задава RGB (червено, зелено, синьо) стойности на цвят поотделно с основни шестнадесет стойности. Ето защо те съдържат буквите A през F в допълнение към цифрите 0 през 9.

Всеки цвят, червен, зелен и син, получава своя собствена двуцифрена стойност. 00 е най-ниската възможна стойност, докато FF е най-високата. Цветовете са изброени в RGB ред в шестнадесетичен, така че първите две цифри представляват червената стойност и т.н.

Използвайте RGBA стойности на цвета, за да промените цветовете на шрифта

И накрая, можете да използвате RGBA стойности на цветовете, за да редактирате цветовете на шрифта. RGCA се поддържа във всички съвременни браузъри, така че можете да използвате тези стойности с увереност, че ще работи за повечето зрители, но можете и да зададете лесен резервен вариант.

Тази RGBA стойност е същата като горния син цвят, посочен по-горе:

п {
цвят: rgba (47,86,135,1);
}

Първите три стойности задават червените, зелените и сините стойности, а крайното число е алфа настройката за прозрачност. Алфа настройката е зададена на 1, за да означава 100 процента, така че този цвят няма прозрачност. Ако зададете тази стойност на десетично число, като .85, тя се превръща в 85 процента непрозрачност и цветът ще бъде леко прозрачен.

Ако искате да защитите куршума си цветни стойности, копирайте този CSS код:

п {
цвят: # 2f5687;
цвят: rgba (47,86,135,1);
}

Този синтаксис първо задава шестнадесетичния код и след това презаписва тази стойност с RGBA номер. Това означава, че всеки по-стар браузър, който не поддържа RGBA, ще получи първата стойност и ще игнорира втората.

Важно е да се има предвид, че свойството color работи върху всеки HTML текстов елемент в CSS. Можете например да промените всичките си цветове на връзката. Този пример ще направи връзките ви яркозелени:

а {
цвят: # 16c616;
}

Това работи и с множество елементи едновременно. Можете да зададете всяко ниво на заглавието едновременно. Например, това ще настрои всички ваши заглавни елементи на среднощен син цвят:

h1, h2, h3, h4, h5, h6 {
цвят: # 020833;
}

Измислянето на шестнадесетичните или RGBA стойностите за вашите цветове не винаги е лесно. Повечето уеб дизайнери ще използват програма за редактиране на изображения, като Photoshop или GIMP, за да генерират точните кодове. Можете също така да намерите удобни инструменти за избор на цвят онлайн, например този от w3schools.

Други начини за оформяне на HTML страница

Цветовете на шрифта могат да се променят с външен лист със стилове, вътрешен лист със стилове или вграден стил в HTML документа. Най-добрите практики обаче диктуват, че трябва да използвате външна таблица със стилове за вашите CSS стилове.

Вътрешен лист със стилове, които са стилове, записани директно в „главата“ на вашия документ, обикновено се използва само за малки уебсайтове с една страница. Вградените стилове трябва да се избягват, тъй като те са сродни на старите маркери "шрифт", с които се занимавахме преди много години. Тези вградени стилове затрудняват управлението на стила на шрифта, тъй като трябва да ги променяте при всеки екземпляр на вградения стил.