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

Искате да подобрите уебсайта си с различни цветове на шрифта? Можете да направите това с помощта на CSS. CSS е съкращение от Cascading Style Sheets и е езикът по подразбиране, използван за създаване и управление на стила на всеки уебсайт.

Има три метода за прилагане на CSS към HTML документ. Това са вграден CSS, вътрешен/вграден CSS и външен CSS.

Метод първи: Inline CSS

За да промените цвета на шрифта в CSS, ще трябва да създадете CSS правило, за да зададете стойност на свойството на цвета.

Вграденият метод използва свойството style, което можете да приложите към почти всеки елемент. Ето пример, който задава цвета на шрифта на HTML абзац на червен:

Абзац от текста

Можете да постигнете същия ефект, като използвате вътрешен/вграден CSS или външен CSS.

Метод втори: вътрешен/вграден CSS

Можете да използвате този метод, когато искате да създадете CSS правила, които засягат повече от един екземпляр на HTML елемент, но само на една страница. След това правилата на CSS се записват в главата на HTML страницата, като се използва елемент на стил:

Трети метод: Външен CSS

Третият начин за постигане на същия ефект е използването на външна CSS таблица със стилове. С помощта на текстов редактор създайте файл с разширението ".css". Обичайната практика е този файл да се нарича нещо подобно stylesheet.css но можете да го назовете каквото и да е, стига да запазите разширението ".css".

За да оцветите основния си текст в зелено, например, като използвате външен лист със стилове, просто поставете CSS правилото по следния начин:

p { цвят: син }

Във вашия HTML документ трябва да включите връзка към вашия стилов лист в HTML елемента глава:

Абзац от текста

Промяна на цвета на шрифта в HTML, без приложен CSS

Най-добрата практика е да използвате CSS, но ето как да промените цвета на шрифта само с HTML:

Абзац от текста

Елементът на шрифта, заедно с неговия атрибут color, е отхвърлен. Това е така, защото те са по-скоро презентационни, отколкото структурни елементи. Съвременният HTML трябва да се състои само от структурни елементи.

Промяната на цвета на шрифта в CSS е сравнително проста

Показахме ви три метода за промяна на цвета на шрифта в CSS. Също така ви показахме как да направите това по стария начин с помощта на HTML етикета за шрифт. Изпробвайте ги и вижте кое работи най-добре за вас!

След като овладеете промяната на цвета на шрифта с помощта на CSS и HTML, може да искате да овладеете промяната на размера на шрифта в HTML.

Как да промените размера на HTML шрифта в CSS

Прочетете Следващото

За автора