В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html , нужно применить атрибут color тега :
Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Посмотрим результат в браузере:
Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Сохраним файл и посмотрим на результат:
Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
Задаем тексту шрифт, размер и цвет
Задаем тексту шрифт, размер и цвет
14.01.17 4.4KВ HTML цвет текста меняется с помощью тега font , но в HTML5 этот метод не поддерживается, Чтобы задать цвет фона HTML для различных элементов страницы, вместо указанного тега нужно использовать CSS . Использование CSS гарантирует, что веб-страница будет совместима с любым браузером.
Метод 1: Использование CSS
- Откройте HTML-файл . Лучший способ изменить цвет текста – это воспользоваться CSS . Тег не поддерживается в HTML5 . Поэтому воспользуйтесь CSS , чтобы определить стиль элементов страницы.
- Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS ). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:
- Поместите курсор внутри тега . Стили определяются внутри этого тега, если используется внутренняя таблица стилей:
- Введите
- Введите элемент, цвет текста которого нужно изменить
. Используйте раздел
- В селекторе элемента введите атрибут color: . Это свойство определяет цвет текста выбранного элемента. За HTML цвет фона текста отвечает свойство background-color . В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:
- Введите цвет текста . Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB . Например, чтобы сделать текст синим, введите blue , rgb(0, 0, 255) или #0000FF :
- Добавьте другие селекторы, чтобы изменить цвет различных элементов . Чтобы поменять цвет текста у разных элементов страницы или HTML цвет фона текста, можно использовать различные селекторы:
Этот заголовок будет зеленым.
Этот параграф будет синим.
Этот основной текст будет красным.- Укажите стилевой класс CSS вместо того, чтобы менять элемент . Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:
Этот заголовок будет красным
Этот параграф будет стандартным.
Этот параграф будет красным
Метод 2: Использование атрибутов встроенного стиля
- Откройте HTML-файл . Чтобы изменить стиль одного элемента страницы или цвет фона HTML , можно воспользоваться атрибутами встроенного стиля. Это может быть полезно, если нужно внести одно-два изменения, но не рекомендуется для масштабного применения. Чтобы полностью изменить стиль, воспользуйтесь предыдущим методом:
- Найдите элемент, который нужно изменить . С помощью атрибутов встроенного стиля можно изменить цвет текста любого элемента страницы. Например, чтобы изменить цвет текста определенного заголовка, найдите его в файле:
Этот заголовок нужно заменить
- Добавьте к элементу атрибут стиля . Внутри открывающегося тега изменяемого элемента введите 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
Урок 7. Цвет текста и фона в HTML.
Дата: 2008-12-05
Как задать цвет фона и текста на web-странице?
По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000 ). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.
Задаем цвет текста
В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:
1. Способ 1-й. В парных тегах прописывается атрибут
Комментарии к этой статье (уроку):
Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: [email protected] сайт: http://sites.google.com/site/stihiolegguz/
внимательно проверьте код
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
- Введите элемент, цвет текста которого нужно изменить
. Используйте раздел