Как задать цвет фона и текста на web-странице?

По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000 ). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.

Задаем цвет текста

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

1. Способ 1-й. В парных тегах прописывается атрибут с указанием названия нужного цвета. Название цвета указывается по английски. Например, цвет заголовка на нашей web-странице можно задать таким способом:

Комментарии к этой статье (уроку):

Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: [email protected] сайт: http://sites.google.com/site/stihiolegguz/

внимательно проверьте код

Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?

Для изменения шрифта служит тэг с атрибутом 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

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=»» :
 В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html , нужно применить атрибут color тега :
 Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
 Урок 6. Изменяем цвет текста 
 Текст зеленого цвета
 
 Текст красного цвета
 
 Текст фиолетового цвета
 
 Посмотрим результат в браузере:
 
 Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
 
 Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
 
 С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
 Урок 6. Изменяем цвет текста 
 Текст зеленого цвета
 
 Текст красного цвета
 
 Текст фиолетового цвета
 
 Сохраним файл и посмотрим на результат:
 
 Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
 
 Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
 Задаем тексту несколько параметров 
 
 Задаем тексту шрифт, размер и цвет
 
 Задаем тексту шрифт, размер и цвет
 
 27.11.14 88.7K
 В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.
 
 Теги и атрибуты при роботе со шрифтами html
 
 Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .
 
 Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.
 
 Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
 color – устанавливает цвет текста;
 
 size – размер шрифта в условных единицах.
 
 Поддерживается положительное значение атрибута от 1 до 7.
 
 face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.
 
 Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
 
 Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
 — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
 
 — размер больше установленного по умолчанию;
 
 — меньший размер шрифта;
 
 — наклонный текст (курсив ). Аналогичный ему тег ;
 
 — текст с подчеркиванием;
 
 ~~— зачеркнутый;~~
 
 _{— отображение текста только в нижнем регистре;}
 
 ^{— в верхнем регистре.}
 
 Обычный текст
 
 Жирный текст
 
 Жирный текст
 
 Больше обычного
 
 Меньше обычного
 
 Курсив
 
 Курсив
 
 С подчеркиванием
 
 ~~Зачеркнутый~~
 
 Возможности атрибута style
 
 Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:
 
 1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
 Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .
 
 Синтаксис написания:
 
 font-family: имя шрифта [, имя шрифта[, ...]]
 
 2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
 Синтаксис написания:
 
 font-size: абсолютный размер | относительный размер | значение | проценты | inherit
 
 Размер шрифта можно также задать:
 
 В пикселях;
 
 В абсолютном значении (xx-small, x-small, small, medium, large );
 
 В процентах;
 
 В пунктах (pt ).
 
 Font-size:7
 
 Font-size:24px
 
 Font-size: x-large
 
 Font-size: 200%
 
 Font-size:24pt
 
 3) font-style – устанавливает стиль написания шрифта. Синтаксис:
 font-style: normal | italic | oblique | inherit
 
 Значения:
 
 normal –нормальное написание;
 
 italic – курсив;
 
 oblique – шрифт с наклоном вправо;
 
 inherit – наследует написание родительского элемента.
 
 Пример того, как поменять шрифт в html с помощью этого свойства:
 
 font-style:inherit
 
 font-style:italic
 
 font-style:normal
 
 font-style:oblique
 
 4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:
 font-variant: normal | small-caps | inherit
 
 Пример того, как изменить шрифт в html этим свойством:
 
 font-variant:inherit
 
 font-variant:normal
 
 font-variant:small-caps
 
 5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:
 font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
 
 Значения:
 
 bold – устанавливает полужирный шрифт html;
 
 bolder – жирнее относительно normal;
 
 lighter –менее насыщенное относительно normal;
 
 normal – нормальное написание;
 
 100-900 – задается толщина шрифта в числовом эквиваленте.
 
 font-weight:bold
 
 font-weight:bolder
 
 font-weight:lighter
 
 font-weight:normal
 
 font-weight:900
 
 font-weight:100
 
 Свойство font и цвет шрифта html
 
 Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :
 
 font: font-size font-family | inherit
 
 Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
 
 caption – для кнопок;
 
 icon – для иконок;
 
 menu – меню;
 
 message-box –для диалоговых окон;
 
 small-caption – для небольших элементов управления;
 
 status-bar – шрифт строки состояния.
 
 font:icon
 
 font:caption
 
 font:menu
 
 font:message-box
 
 small-caption
 
 font:status-bar
 
 font:italic 50px bold "Times New Roman", Times, serif