Главная › Интернет › Как добавить цвет в html. Как задать цвет фона и текста на web-странице? Изменение цвета с использованием CSS

Как добавить цвет в html. Как задать цвет фона и текста на web-странице? Изменение цвета с использованием CSS

14.01.17 4.4K

В HTML цвет текста меняется с помощью тега font , но в HTML5 этот метод не поддерживается, Чтобы задать цвет фона HTML для различных элементов страницы, вместо указанного тега нужно использовать CSS . Использование CSS гарантирует, что веб-страница будет совместима с любым браузером.

Метод 1: Использование CSS

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

Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS ). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:

Поместите курсор внутри тега . Стили определяются внутри этого тега, если используется внутренняя таблица стилей:

Введите
1. Введите элемент, цвет текста которого нужно изменить . Используйте раздел
 1. В селекторе элемента введите атрибут color: . Это свойство определяет цвет текста выбранного элемента. За HTML цвет фона текста отвечает свойство background-color . В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:
 1. Введите цвет текста . Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB . Например, чтобы сделать текст синим, введите blue , rgb(0, 0, 255) или #0000FF :
 1. Добавьте другие селекторы, чтобы изменить цвет различных элементов . Чтобы поменять цвет текста у разных элементов страницы или HTML цвет фона текста, можно использовать различные селекторы:
 Этот заголовок будет зеленым.
 
 Этот параграф будет синим.
 Этот основной текст будет красным.
 1. Укажите стилевой класс CSS вместо того, чтобы менять элемент . Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:
 Этот заголовок будет красным
 
 Этот параграф будет стандартным.
 
 Этот параграф будет красным
 
 Метод 2: Использование атрибутов встроенного стиля
 1. Откройте HTML-файл . Чтобы изменить стиль одного элемента страницы или цвет фона HTML , можно воспользоваться атрибутами встроенного стиля. Это может быть полезно, если нужно внести одно-два изменения, но не рекомендуется для масштабного применения. Чтобы полностью изменить стиль, воспользуйтесь предыдущим методом:
 1. Найдите элемент, который нужно изменить . С помощью атрибутов встроенного стиля можно изменить цвет текста любого элемента страницы. Например, чтобы изменить цвет текста определенного заголовка, найдите его в файле:
 Этот заголовок нужно заменить
 1. Добавьте к элементу атрибут стиля . Внутри открывающегося тега изменяемого элемента введите style=»» :
 Для изменения шрифта служит тэг с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую "забить" хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально.
 Пример:
 
 Изменение размера шрифта html-страницы
 
 Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации. Используя данный атрибут с тэгом , вы можете изменить размер текста вэб-страницы целиком. Применяя атрибут SIZE совместно с тэгом , можно воздействовать на внешний вид отдельного фрагмента текста. Доступно 7 размеров шрифтов. Самый малый обозначается цифрой 1, а самый крупный - 7.
 Изменять шрифт можно с помощью тэгов и . укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а , соответственно, уменьшает.
 Меняя размер отдельных букв, можно добиться интересных эффектов. Например, таким образом можно получить буквицу - укрупненную прописную букву начала абзаца.
 
 Пример:
 
 Выбор цвета шрифта html-страницы
 
 Отображение участков текста Вэб-страницы шрифтами разного цвета придает ей привлекательность.
 
 Используя атрибут TEXT в контексте тэга , можно изменить цвет текста вэб-страницы целиком. Применение же атрибута COLOR с тэгом (обладает более высоким приоритетом) позволяет взаимодействовать на внешний вид отдельного фрагмента текста.
 
 Чтобы изменить цвет текста, надо знать наименование цвета, либо его шестнадцатеричный код. Код состоит из символа фунта # и числа, представляющего интенсивность красной, зеленой и синей составляющих цвета. По имени можно сослаться только на 16 стандартных цветов.
 Наим-е цвета Код aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF gray ##808080 green ##008000 lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red ##FF0000 silver ##C0C0C0 teal ##008080 white ##FFFFFF yellow ##FFFF00
 
 В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html , нужно применить атрибут color тега :
 
 Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
 Урок 6. Изменяем цвет текста 
 Текст зеленого цвета
 
 Текст красного цвета
 
 Текст фиолетового цвета
 
 Посмотрим результат в браузере:
 
 Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
 
 Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
 
 С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
 Урок 6. Изменяем цвет текста 
 Текст зеленого цвета
 
 Текст красного цвета
 
 Текст фиолетового цвета
 
 Сохраним файл и посмотрим на результат:
 
 Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
 
 Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
 Задаем тексту несколько параметров 
 
 Задаем тексту шрифт, размер и цвет
 
 Задаем тексту шрифт, размер и цвет
 
 В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега
 Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.
 
 Как можно указывать цвет?
 
 Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:
 
 Имя цвета - В HTML имеется большой список и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
 
 HEX-код цвета - Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета - красный, зеленый и синий. HEX-код - это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.
 
 Раньше в HTML рекомендовалось использовать только , которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.
 
 Как изменить цвет текста?
 
 Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:
 
 <тег style= "color:имя цвета" >... - указание цвета текста по имени.
 
 <тег style= "color:#HEX-код" >... - указание цвета текста по коду.
 
 И как обычно, чтобы изменить цвет текста на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег и примените атрибут к нему.
 
 Пример изменения цвета текста
 Изменение цвета текста
 Красный текст заголовка
 
 Синий текст параграфа.
 
 Зеленый курсив. Красный текст.
 
 Результат в браузере
 
 Как изменить цвет фона?
 
 Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:
 
 <тег style= "background:имя цвета" >... - указание цвета фона по имени.
 
 <тег style= "background:#HEX-код" >... - указание цвета фона по коду.
 
 Пример изменения цвета фона
 Изменение цвета фона
 Заголовок.
 
 Параграф.
 
 Жирный текст. Обычный текст.
 
 Результат в браузере
 
 Заголовок.
 
 Параграф.
 
 Жирный текст. Обычный текст.
 
 Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно - прозрачный, вот и все.
 
 Домашнее задание.
 
 Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
 
 Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи - 22px, а у подзаголовков по 19px.
 
 Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков - #CC3366.
 
 Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
 
 Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).
 
 В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html , нужно применить атрибут color тега :
 
 Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
 Урок 6. Изменяем цвет текста 
 Текст зеленого цвета
 
 Текст красного цвета
 
 Текст фиолетового цвета
 
 Посмотрим результат в браузере:
 
 Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
 
 Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
 
 С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
 Урок 6. Изменяем цвет текста 
 Текст зеленого цвета
 
 Текст красного цвета
 
 Текст фиолетового цвета
 
 Сохраним файл и посмотрим на результат:
 
 Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
 
 Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
 Задаем тексту несколько параметров 
 
 Задаем тексту шрифт, размер и цвет
 
 Задаем тексту шрифт, размер и цвет