Изменение цвета HTML-элементов

Development | Amber | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

HTML позволяет менять цвета некоторых элементов и частей содержимого веб-страницы. Например, так вы можете изменить цвет текста, границы или элемента <div>.

Читайте также: Как работает <div>, элемент разделения контента HTML

Метод изменения цвета этих частей варьируется от элемента к элементу.

В этом мануале вы узнаете, как изменить цвет текста, границ изображения и элементов <div>, используя названия цветов HTML.

Цвет текстовых элементов (типа <p> или <h1>) изменяется с помощью атрибута style и свойства color. Это делается следующим образом:

<p style="color:blue;">This is blue text.</p>

Попробуйте записать этот код в файл index.html и загрузить его в браузере. Примечание: Если вы работали с этой серией мануалов непоследовательно, рекомендуем обратиться к статье Подготовка HTML-проекта, чтобы создать файл index.html.

Вы должны получить такой результат:

This is blue text.

Цвет границы изображения изменяется с помощью атрибута style и свойства border:

<img src="https://www.8host.com/blog/wp-content/themes/wp-8host-new/img/logo.svg" style="border: 10px solid lime"/>

Здесь мы поместили ссылку на изображение и указали, что граница должна быть шириной 10 пикселей и сплошной (solid), а не пунктирной.

Попробуйте вставить этот код в файл index.html и загрузить его в браузере.

Примечание: Обратите внимание, что в этом примере мы используем изображение, которое уже размещено в Интернете.

Вы должны получить такой результат:

Цвет контейнера <div> изменяется с помощью атрибута style и свойства background-color. Это можно сделать следующим образом:

<div style="width:200px;height:200px;background-color:yellow;"></div>

Попробуйте написать этот код в файле index.html и загрузить его в браузере. Вы должны получить такой результат:

Во всех этих примерах значение цвета определяется названиями цветов. Попробуйте изменить цвет текста, границ изображения и элементов <div>, используя названия других цветов:

• black
• white
• gray
• silver
• purple
• red
• fuchsia
• lime
• olive
• green
• yellow
• teal
• navy
• blue
• maroon
• aqua

Цвета также можно указывать в шестнадцатеричном формате. Шестнадцатеричный код цвета состоит из шести буквенно-цифровых символов, перед которыми идет диез, например:

• #0000FF (синий),
• #40E0D0 (бирюзовый)
• #C0C0C0 (серебристый)

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

Теперь у вас есть базовые знания о том, как изменять цвет текста, границ изображения и элементов <div>. Мы вернемся к работе с цветами чуть позже, когда начнем создавать наш веб-сайт.