Меняем цвет текста и фона. Как задать цвет фона и текста на web-странице? Как задать цвет заднего фона в html
Мы с вами в предыдущих главах составили основной шаблон HTML-документов, определились что такое ХТМЛ-теги, научились сохранять и редактировать html-файлы, а в этой главе мы познакомимся с атрибутами тегов и изменим цвет текста и фона страницы.
Откроем наш index.html , для редактирования:
Значения атрибутов тега вставляются:
1) text=#000000 без кавычек;
2) text="#000000" в одинарных кавычках;
3) text="#000000" в двойных кавычках.
Любой из этих вариантов правильный, но если заботиться об этике кода, то лучше использовать двойные кавычки, как в моем примере выше.
Атрибут "text" управляет цветом текста на всей странице, а "bgcolor" управляет цветом фона страницы.
Теперь предлагаю поговорить об цветах для ХТМЛ-документов. Цвет задается:
1) text="gold"
- словами на английской, допустим: gold(золотой), red(красный), green(зеленый) и так далее...
Но цвет может состоять только из одного слова например "red", но если написать "green-red", то браузер это не поймет и просто проигнорирует.
2) text="#000000"
- цветовая схема RBG(красный зеленый синий). "#"
этот символ говорит от том что это номер цвета, первые два символа(в моем примере ноли) говорят сколько мы взяли "красного" цвета, вторые зеленого и последние два синего цвета.
Каждый цвет задается от 00 до FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), например #000000-черный, #ffffff-белый
, #ff0000-красный
, #00ff00-зеленый
#0000ff-синий
В качестве бонуса от сайта предлагаю вам скачать палитру цветов(2кБ) , которая изображена на картинке выше. Вам нужно распаковать архив запустить файл color.html , далее на большом поле ставите уазатель мышки на нужный вам цвет, который будет показан в маленьком окошке и если в это время щелкнуть мышкой то код цвета покажется в маленьком окошке справа.
А теперь вернемся к нашему файлу index.html и сохраним его как tsvet.html , теперь посмотрим что получилось. Каким был, таким и остался? И вы абсолютно правы, т.к белый для фона, а черный для текста цвета по умолчанию. Что-бы заметить разницу изменим значения атрибутов:
Есть и другие способы задавать текст в хтмл-файлах, но эти два считаются основными.
В следующей главе мы научимся управлять текстом тегами BR, переносить текст на другую строку.
Вы можете полностью настроить свой блог или сайт очень легко. В этой статье рассказывается, как просто поменять шрифт в заголовке и фоновое изображение страницы.
Блоггеры и владельцы сайтов обычно изменяют фон, чтобы сделать свой ресурс визуально более привлекательным для посетителей. Тем не менее фоновое изображение, которое добавляется неправильно, может запутать посетителя, и даже вызвать недоверие к вашему сайту или блогу и нежелание посещать его снова. Чтобы добавить фон правильно, важно использовать подходящие коды HTML.
Существует всего несколько простых при помощи которых вы можете изменить внешний вид вашего существующего сайта. Многие пользователи даже не предполагают, насколько это просто.
Как настроить шрифт
В первую очередь, вам придется добавить четыре мета-тега в любом месте после < head >. Вы можете просто скопировать обозначения, указанные ниже, и вставить их на свой ресурс, предварительно удалив пробелы.
Как настроить цвет фона
Откройте страницу в HTML вашего блога или сайта. При редактировании страницы в вы можете открыть ее в Dreamweaver, чтобы облегчить свою работу. Если ваш сайт создан посредством конструктора, некоторые сервисы позволяют изменять настройки HTML онлайн, зайдя на страницу «Дизайн» и выбрав вкладку «Редактировать HTML». В любом случае вы должны быть в состоянии получить доступ к HTML-кодам для вашего блога или сайта. Процесс настройки может сильно варьироваться в зависимости от того, какие услуги вам доступны и какой движок вы используете.
Не стоит пытаться искать отдельное изображение с другим цветом, если все, что вам нужно сделать, - это изменить цвет фона. Вместо этого вы можете просто отредактировать HTML и изменить существующий цвет на тот, который вы хотите сохранить.
Вы без проблем можете найти диаграмму цветов HTML в специализированных изданиях. Каждый цвет отображается в разметке в виде шестизначного кода. Например, белый фон обозначается как #FFFFFF.
Таким образом, найдите код цвета, который вы хотите видеть на своем сайте в качестве определяющего фон цвета. В разметке это будет выглядеть так:
background-color:#XXXXXX; {
После того как вы сохраните цвет фона в HTML, вы увидите, что внешний вид вашей страницы изменен.
Добавление фонового изображения
Выберите изображение, которое вы хотите добавить в качестве фона. Существует много сайтов, которые позволяют скачать такие фоны. Кроме того, вы можете использовать картинку, которая уже сохранена на компьютере.
Залейте изображение в Интернет. Многие позволяют загружать изображения бесплатно. Получите URL-ссылку на вашу фоновую картинку. Для этого вам нужно открыть изображение в своем браузере и скопировать URL.
Вставьте код для добавления изображения в качестве фона. В HTML он выглядит следующим образом:
background-image: url(image URL);
Вам нужно добавить код в том месте, где начинается тело страницы в 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 можно изменить как с помощью атрибутов тега body , так и с помощью CSS-стилей, примененных также к тегу body . Рассмотрим оба варианта как сделать фон для сайта.
Меняем цвет фона с помощью HTML
Тег body , как и практически любой HTML-тег имеет свои атрибуты. К атрибутам тега body относятся:
- bgcolor - определяет цвет фона для страницы;
- background - позволяет задать картинку в качестве фона веб-страницы (подробно этот вопрос рассмотрен в статье: );
- scroll - управляет отображением полосы прокрутки на странице;
- text - задает базовый цвет текста, который будет выводиться на веб-странице;
- bgproperties - указывает, будет ли прокручиваться фон вместе со страницей;
- link - управляет цветом ссылок по умолчанию на странице;
- alink - устанавливает цвет для активной ссылки;
- vlink - определяет цвет для посещенной ссылки на странице;
- leftmargin/rightmargin - задает отступ контента от левого или правого края окна браузера;
- topmargin/bottommargin - задает отступ контента от верхнего или нижнего края окна браузера;
Чтобы изменить цвет фона с помощью HTML, воспользуемся атрибутом bgcolor :
Это пример текста белого цвета, заданного с помощью атрибута text тега body.
Примечание: Рекомендуется определять цвет фона страницы, даже если фон белый. Это связано с тем, что некоторые пользователи могут использовать в браузере нестандартный цвет фона, и из-за этого текст на вашем сайте может быть нечитабельным.
Меняем цвет фона страницы с помощью CSS
Это пример текста белого цвета, заданного с помощью background CSS. Фон страницы также задан с помощью CSS.
В конструкторе сайтов "Нубекс" для любого сайта можно выбрать уже готовый фон из большой билиотеки изображений, или добавить свой.
В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: . В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.
Картинка в качестве фона страницы - HTML
Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body :
Здесь фоновое изображение устанавливается с помощью атрибута background тега body.
Как в примере выше, рекомендуется помимо картинки указывать и цвет фона (он будет отображаться на сайте во время загрузки страницы), который будет максимально сочетаться с фоновым изображением и создавать контраст с текстом на сайте. Например, если вы используете белый цвет текста на сайте, то стоит указать темный цвет фона и задать темное фоновое изображение. В таком случает текст будет легко читаться.
Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.
Картинка в качестве фона страницы - CSS
В CSS фоновый цвет и фоновое изображение можно задать одним свойством background :
Здесь фоновый рисунок устанавливается с помощью свойства background CSS (фон картинка CSS).
Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо "сшиваться" по краям.
Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;
В конструкторе сайтов "Нубекс" для любого сайта можно использовать большое изображение в качестве фона и закрепить его.