Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью 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>. Мы вернемся к работе с цветами чуть позже, когда начнем создавать наш веб-сайт.