Как задавать цвет фона HTML документа
В уроке Основы HTML мы рассмотрели самые главные html теги, которые являются обязательными и присутствуют в любом html документе.
В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.
Материалы по теме:
- 4 подхода к созданию фона HTML страницы
- Как вставлять картинки и производить их позиционирование в html
- Как сделать ссылку в HTML — виды ссылок — изображение ссылка
Вероятно, вы уже не раз видели, что цвет фона на html страничках не всегда бывает белым. Белый цвет это цвет фона, который устанавливается браузером по умолчанию, если не указан какой ни, будь другой цвет.
Цвет фона всего html документа, задается в теге <body>. Теперь сделаем фон нашего документа, например желтым. Для этого в теге <body> необходимо прописать атрибут bgcolor=»#FFFF99″. Прописывается данный атрибут следующим образом: <body bgcolor=»#FFFF99″> </body>.
<html> <head> <title>Моя первая страница</title> </head> <body bgcolor="#FFFF99">Вот вы и создали свою первую web страницу!!!</body> </html>
Создайте html страничку, содержащую код, приведенный выше, и посмотрите в браузере, какой она будет иметь цвет фона. Для этого откройте ваш текстовый редактор блокнот скопируйте туда код представленный выше. Затем сохраните текстовый документ с расширением .html, как это сделать мы рассматривали в уроке основы html.
После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor=»», который задает цвет фона, содержит в кавычках значение «#FFFF99» — это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.
Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку.
Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.
Для этого запустите Photoshop и в панели инструментов щелкните по значку выбор цвета (смотрите рисунок ), затем появится палитра цветов в которой с помощью ползунков вы можете выбрать тот или иной цвет, а его код будет отображен в низу, на рисунке оно обведено красным квадратом.
Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо «#FFFF99» прописать «red» т. е. <body bgcolor=»red»> то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.
Материал подготовлен порталом: webmastermix.ru
Рекомендуем ознакомиться:
- Подробности
Обновлено: 04 Сентябрь 2013
Создано: 12 Январь 2010
Просмотров: 107465
Как поменять фон страницы сайта
Как поменять фон страницы на сайте? Обычно этот вопрос возникает перед новичками, которые создали свой ресурс недавно или занимаются этим в настоящее время.
Это первое, с чего начинается улучшение или смена дизайна сайта. Тем более, если вы скачали и установили бесплатный стандартный шаблон, поменять его дизайн просто необходимо. Так как этот шаблон будет установлен на многих других ресурсах, а поисковикам подавай уникальность.
Поменять фон страницы совсем не сложно, после прочтения этой статьи, процедура замены фона не займет много времени.
Фоном сайта может быть просто определенный цвет, а может быть и рисунок.
Прописывается фон в файле style.css, который расположен в папке вашей темы. В вордпресс например он будет лежать в следующей директории: public_html или httpdocs (в зависимости от того, на каком хостинге находится ресурс)/wp-content/themes/ваша тема/style.css. Обычно в начале этого файла расположен контейнер «body». Ищите в нем значение «background», именно оно определяет фон.
Фоном может быть просто цвет.
В «background» может быть прописан так, например красный:
body {
........
background: #ff6633;
.
......}
......}В этом случае, чтобы поменять фон страницы необходимо просто проставить свой цвет. Узнать код цвета можно здесь: Палитра цветов html
Фоном может быть и рисунок.
Тогда он прописывается следующим образом:body {
background: url(images/my_image.jpg) no-repeat;
}где: images/my_image.jpg — путь к файлу изображения.
no-repeat — указывает на то, что изображение не повторяется. Может быть так же: repeat — повторяется по оси X — горизонтально, и по оси Y — вертикально и заполняет фон страницы;
repeat-x — будет повторяться только по горизонтали;
repeat-y — только по вертикали;
Зачем нужно повторять фоновый рисунок, спросите вы. А например для того, чтобы замостить фон каким-нибудь узором.
Чтобы поменять фон страницы на свое изображение, закиньте файл изображение к себе на хостинг в папку с изображениями вашей темы, обычно папка images и пропишите свой путь к файлу в параметре background.
Параметр background позволяет прописывать 5 атрибутов стилей и не только для фона, но и для других элементов страницы.
background-attachment, background-color, background-image, background-position, background-repeat
Эти свойства можно прописать в CSS и раздельно.
background-attachment: : fixed: // или scroll - прокручивать или нет фоновое изображение background-color: #ff6633; // цвет фона страницы background-image: url(images/my_image.jpg) no-repeat; //изображение background-position: right bottom; // положение фона background-repeat: no-repeat; //повторение картинки
Положение фона background-position может быть:
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
right bottom = bottom right = 100% 100% (в правом нижнем углу)
С помощью всех этих свойств можно сделать и такой фон:
На этом все.
Сейчас вы знаете как поменять фон страницы сайта и как установить фоновое изображение. А здесь можете подобрать красивое изображение для хедера (шапки) вашего сайта.
Цвет фона HTML: как настроить фон
Обычная веб-страница имеет белый фон. Как и таблица и тексты. Черный текст на белом фоне очень распространен и скучен. Это было обычным делом в те дни, когда веб-дизайн находился на ранней стадии. Но по мере развития технологий и роста CSS появилось больше возможностей для создания более привлекательных веб-страниц. В настоящее время большинство веб-сайтов имеют красочные веб-страницы. Разработка таких веб-страниц осуществляется путем объединения HTML с CSS. В CSS есть много вариантов изменения фона чего-либо в HTML. Цвет фона HTML всей страницы, таблиц и даже текста также можно изменить с помощью CSS. В этой другой статье мы предоставим вам на выбор полную таблицу цветов HTML. Некоторые способы описаны ниже.
Темы в этой статье
- Цвет фона тела с использованием названий цветов
- Цвет фона тела с использованием шестнадцатеричных цветовых кодов
- Изменение цвета фона тега div
- Как изменить цвет фона таблицы
- Изменение цвета фона текста
Цвет фона тела с использованием названий цветов
Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых имен цветов, таких как красный, зеленый, синий и т.
<тело>Эта веб-страница имеет красный цвет фона!
Атрибут background-color имеет значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.
Цвет фона тела с использованием шестнадцатеричных цветовых кодов
Мир полон цветов. Есть много цветов, которые можно использовать при разработке веб-страниц. У каждого цвета есть определенное название, например, красный, желтый, черный и т. д. Но у каждого цвета так много оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, огненно-красный и т. д. То же самое и со многими другими цветами. Так как же использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов.
Шестнадцатеричные цветовые коды также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы. Они также используются с атрибутом background-color. Вместо названия цвета используется знак номера (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.
<тело>Это демонстрационная веб-страница
Обратите внимание на приведенный выше код. Все аналогично методу, использованному ранее, но есть небольшое изменение. Вместо указания имени цвета в качестве значения атрибута background-color используется #FF00FF. #FF00FF — это шестнадцатеричный код пурпурного цвета.
Нажмите здесь, чтобы выбрать любой оттенок по шестнадцатеричному коду цвета.
Изменение цвета фона HTML тега div
Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это также возможно.
Div используется для определения раздела или раздела на веб-странице. Цвет фона таких разделов или разделов также можно изменить с помощью CSS. Есть несколько способов сделать это. Но я объясню самый простой и быстрый из них, то есть встроенные стили.
<тело> <дел>цвет фона этого тега div красный, а цвет фона этой веб-страницы желтый
В приведенном выше коде цвет фона веб-страницы желтый, а часть div имеет красный фон. В теге div встроенный стиль используется для установки красного цвета фона. #FFF00 и #FF0000 — это шестнадцатеричные цветовые коды желтого и красного цветов соответственно.
Изменение цвета фона таблицы
Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов сделать стол лучше и привлекательнее. Один из таких способов — задать цвет фона. Подобно тегу body и тегу div, тегу table также можно присвоить встроенные стили с атрибутом background-color.
Ниже приведен пример таблицы с тремя строками и тремя столбцами и фоном зеленого цвета (#00FF00).
<голова>
<стиль>
стол, т, тд {
граница: 1px сплошной черный;
}
<тело>
<таблица>
Имя
Страна
Возраст
Джон
США
<тд>21
Сэм
Испания
22
В приведенном выше коде встроенный стиль используется в теге таблицы. Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если вы хотите изменить цвет фона определенного столбца.
Изменение цвета фона текста
На веб-странице всегда много текста. Как правило, тексты не имеют определенного цвета фона. Но если есть потребность в тексте, имеющем определенный фоновый цвет, встроенные стили также можно использовать в теге span.
Ниже приведен пример изменения цвета фона текста с помощью встроенных стилей.
<тело>этот текст не имеет фонового цвета
этот текст имеет красный фон
этот текст имеет зеленый фон
В приведенном выше коде первый абзац не имеет фонового цвета. Второй абзац имеет красный (#FF0000) цвет фона, а третий абзац имеет зеленый (#00FF00) цвет фона.
Заключение
С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В ранней истории Интернета у экранов не было цветов. Поэтому первые реализации HTTP/HTML такой поддержки не имели. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета можно применять ко всей веб-странице или к ее части с помощью тега div. Таблицы также могут иметь цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к текстам с помощью тега span.
HTML и CSS предоставляют множество возможностей для изменения цвета фона почти всего. Нужно только знать, как эффективно использовать эти возможности, чтобы веб-сайты выглядели привлекательнее и лучше.
Учебник по HTML — справочная информация
Фон HTML!
Немного скучная, но полезная информация.
Введение
Этот раздел представляет собой введение в некоторую справочную информацию, которая важна для понимания того, что происходит, когда мы просматриваем веб-страницу, и почему технология устроена именно так. Это немного скучно, но понимание этого поможет поместить остальную часть того, что мы собираемся узнать, в контекст.
Браузер
Когда мы просматриваем веб-страницу, обычно это происходит в браузере (на компьютере, планшете или смартфоне). Происходит много всего, но в основном это происходит за кулисами, поэтому мы на самом деле не видим, как это происходит. Главный компонент, который превращает HTML (вместе с CSS и Javascript) в то, что мы видим, называется механизмом рендеринга.
Вот несколько примеров:
- Firefox — Gecko
- Хром — Мигание
- Сафари — Вебкит
- Internet Explorer — трезубец
- Опера — Блинк
В старые недобрые времена Интернета движки рендеринга сильно различались в плане того, как они интерпретировали наш HTML. Ваша страница может выглядеть совершенно по-разному даже в разных версиях браузера. К счастью, в настоящее время все они довольно последовательны в том, как они будут отображать ваши страницы. Старый опыт тратить 10% своего времени на создание страниц и 90% на тестирование и настройку во всех различных браузерах, чтобы попытаться добиться согласованности, в значительной степени остался в прошлом.
Существует организация под названием W3C (Консорциум World Wide Web), которая отвечает за управление стандартом HTML (также CSS и Javascript). Побочным продуктом этого является WHATWG (Рабочая группа по технологиям веб-гипертекстовых приложений).
Раньше спецификация была немного двусмысленной в некоторых местах, а также некоторые поставщики (смотря на вас, Microsoft) отличались от спецификации, чтобы попытаться заставить вас перейти на свою платформу.
К счастью, эти дни остались позади, и все браузеры практически полностью реализуют официальную спецификацию HTML. Это означает, что вы можете написать свой код, и он будет выглядеть примерно одинаково в каждом браузере (хотя, когда вы начнете вникать в причудливые вещи, его все равно стоит протестировать в разных браузерах, чтобы быть уверенным).
Как писать и просматривать HTML-код
HTML-код можно хранить и передавать различными способами, но наиболее распространенным (и самым простым) является обычный текстовый файл. Мы даем текстовому файлу расширение .html (взамен стандартного .txt). Некоторые люди (смотря на вас, MS) использовали .htm в качестве расширения в прошлом, и это будет работать, но обычно это не одобряется. Вы можете написать этот файл в любом текстовом редакторе, который вам нравится. Я не буду рекомендовать конкретные текстовые редакторы, но найдите тот, который делает подсветку синтаксиса, это сделает вашу жизнь намного проще. Есть много хороших бесплатных текстовых редакторов для каждой операционной системы.
Быстрый поиск в Google, и у вас не должно возникнуть проблем с поиском подходящего.
Просмотр ваших HTML-страниц
После того, как вы написали свои HTML-страницы, вы, естественно, захотите увидеть результат своей работы. Здесь есть несколько вариантов. Если у вас есть веб-сервер, вы можете разместить там свои файлы, а затем перейти по соответствующему URL-адресу в браузере. Если у вас нет веб-сервера, вы можете просто открыть свой файл локально, и он будет вести себя точно так же. К сожалению, в настоящее время браузеры регулярно меняют свои интерфейсы, поэтому я не могу точно сказать, как это сделать, но вы хотите найти вариант открыть файл вместо URL-адреса. Однако CTRL + o обычно работает как сочетание клавиш для доступа к этой функции. Другой вариант — перетащить файл в браузер.
Отладка вашего HTML
Вы неизбежно будете писать HTML, который не будет отображаться так, как вы предполагали. Это может расстраивать, так как вы не будете получать сообщения об ошибках или возможность распечатать информацию, чтобы увидеть, что происходит (как это обычно бывает с языком программирования).
Раньше, когда это случалось, мы прибегали к методу проб и ошибок, пока не выяснили это, и это все еще правильный и полезный подход. Большинство современных браузеров включают инструменты проверки, которые позволяют нам войти в систему и увидеть, что происходит, и лучше понять это. Они очень полезны, и я призываю вас играть с ними.
- FireFox — перейдите в «Настроить», затем добавьте параметр «Проверить » на панель инструментов.
- Chrome — перейдите в Инструменты , затем выберите Инструменты разработчика .
- Safari — сочетание клавиш опция + команда + i
- FireBug — это дополнение, которое может быть добавлено в большинство современных популярных браузеров и также хорошо работает для проверки HTML. (FireBug для Firefox, FireBug Lite для всех остальных.)
Я не буду подробно рассказывать, как пользоваться этими инструментами. Я думаю, что с небольшим исследованием вы сможете понять их по большей части.
Учимся у других
Хорошая часть обучения созданию чистого, элегантного html — это обучение у других. Как говорится:
Если я и видел далеко, то не стоя на плечах гигантов.
Оказывается, вы можете очень легко просмотреть код, который использовался для создания любой другой веб-страницы, которую вы можете просматривать в Интернете. Когда вы сталкиваетесь с веб-сайтами, которые вам нравятся или имеют функции, которые вы хотели бы подражать, я рекомендую вам взглянуть на код и посмотреть, как это было сделано.
Вы можете сделать это одним из двух основных способов:
- Щелкните правой кнопкой мыши на странице и выберите опцию Просмотр исходного кода страницы (Или что-то в этом роде).
- Используйте один из инструментов, упомянутых в предыдущем разделе.
Попробуйте прямо сейчас на этой странице.
Имейте в виду, что я не призываю к откровенному копированию чужого кода. Это не круто, и вы никогда не должны этого делать.