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

Хотите украсить свой сайт разными цветами шрифта? Вы можете сделать это с помощью CSS. CSS расшифровывается как каскадные таблицы стилей и является языком по умолчанию, используемым для создания и управления стилем любого веб-сайта.

Существует три метода применения CSS к HTML-документу. Это встроенный CSS, внутренний/встроенный CSS и внешний CSS.

Метод первый: встроенный CSS

Чтобы изменить цвет шрифта в CSS, вам нужно создать правило CSS, чтобы установить значение свойства цвета.

Встроенный метод использует свойство стиля, которое можно применить практически к любому элементу. Вот пример, который устанавливает красный цвет шрифта абзаца HTML:

Абзац текста

Вы можете добиться того же эффекта, используя внутренний/встроенный CSS или внешний CSS.

Метод второй: внутренний/встроенный CSS

Вы можете использовать этот метод, если хотите создать правила CSS, влияющие на несколько экземпляров элемента HTML, но только на одну страницу. Затем правила CSS записываются в заголовок HTML-страницы с помощью элемента стиля:

Способ третий: внешний CSS

Третий способ добиться того же эффекта — использовать внешнюю таблицу стилей CSS. С помощью текстового редактора создайте файл с расширением «.css». Обычной практикой является вызов этого файла примерно так: таблица стилей.css но вы можете назвать его как угодно, если сохраните расширение «.css».

Чтобы окрасить основной текст в зеленый цвет, например, с помощью внешней таблицы стилей, просто вставьте правило CSS следующим образом:

р {цвет: синий}

В вашем HTML-документе вы должны включить ссылку на свою таблицу стилей в элемент заголовка HTML:

Абзац текста

Изменение цвета шрифта в HTML без применения CSS

Лучше всего использовать CSS, но вот как изменить цвет шрифта, используя только HTML:

Абзац текста

Элемент шрифта вместе с его атрибутом цвета устарел. Это потому, что они являются презентационными, а не структурными элементами. Современный HTML должен состоять только из структурных элементов.

Изменение цвета шрифта в CSS относительно просто

Мы показали вам три метода изменения цвета шрифта в CSS. Мы также показали вам, как сделать это по-старому, используя тег шрифта HTML. Попробуйте их и посмотрите, что лучше всего подходит для вас!

После того, как вы освоите изменение цвета шрифта с помощью CSS и HTML, вы, возможно, захотите освоить изменение размера шрифта в HTML.

Как изменить размер шрифта HTML в CSS

Читать дальше

Об авторе