Как изменить фон веб страницы. Как задать цвет фона и текста на web-странице
П ри помощи CSS цвет и фон можно задавать практически любым элементам web-страницы, свободно управлять фоновым изображением, его повторением по горизонтали и вертикали. Кроме этого, средствами CSS можно поместить фоновое изображение в любую точку экрана используя позиционирование. Не будем пока далеко забегать, пойдем по порядку.
Свойство COLOR
Это свойство задает цвет элемента, а точнее, цвет текста внутри элемента. Значение задается одной из возможных форм:
- наименованием цвета (GREEN, BLACK, RED...);
- шестнадцатеричным кодом цвета (008000, 000000, FF0000...);
- десятичным кодом цвета в RGB (color:rgb (40, 175, 250));
Свойство COLOR является наследуемым, и при не заданном значении для какого-либо элемента значение унаследуется от его предка. Но может получиться так, что и для предка оно не задано - тогда будет применена таблица стилей браузера с использованием значений по умолчанию. Цвет элемента в этом случае скорее всего будет черным.
Как я уже упоминал, задавать цвет можно практически всем элементам, это могут быть (H1... H6), (strong, em) и даже целые (p) и даже границам таблиц, но об этом позже.
Смотрим пример задания цвета текста при помощи CSS:
h1 {color : Blue }
В этом примере все заголовки первого уровня web-страницы будут синего цвета:
strong {color : red }
В этом случае все то, что в тексте страницы будет выделено тегом strong , окрасится в красный цвет.
Можно записать так:
h1, p, strong {color : green }
Тогда заголовки первого уровня, все абзацы и все то, что выделено тегом будет зеленого цвета.
Когда же возникает необходимость выделять заголовки различными цветами, то применяются селекторы по классу. Для определения класса в HTML используется атрибут class , который можно применять к любым элементам. В HTML - коде нужно будет записать:
class="Blue" >Цвет заголовков этого класса будет синим
В таблице стилей CSS, в этом случае, пишем правило, где селектором будет элемент H1, а через точку (. ) имя класса:
h1.Blue {color : blue }
В HTML - документах исползуются так же селекторы по идентификатору, определяются они атрибутом id . Идентификатор является более значимым или приоритетным признаком, чем класс. И если в HTML - коде для элемента будет указан и класс и идентификатор, то применится стиль идентификатора. Обозначается идентификатор знаком решетки (# ). Для применения в HTML - коде идентификатора, нужно будет записать:
id="Blue" >Цвет заголовков этого идентификатора будет синим
В таблице стилей в свою очередь:
h1#Blue {color : blue }
Свойство BACKGROUND-COLOR
Это свойство позволяет задать цвет фона для страницы вцелом, абзаца, ссылки, вообщем для любого элемента HTML. Для этого в значении свойства указывается цвет или значение transparent (прозрачный). Код для фона страницы пишется:
body {background-color : aqua }
В этом случае фон страницы будет бирюзового цвета, а чтобы придать фон заголовку пишем:
h1 {background-color : yellow }
Получаем желтый фон заголовков первого уровня.
Цвет и фон в CSS
Свойство BACKGROUND-REPEAT
Это свойство применяется когда задано , для того чтобы определить будет ли оно повторяться по горизонтали и вертикали. Допустимые значения:
- repeat - изображение повторяется по вертикали и горизонтали;
- repeat-x - изображение повторяется только по горизонтали;
- repeat-y - изображение повторяется только по вертикали;
- no-repeat - изображение не повторяется.
Код пишется так:
p {
background-image
: url(адрес файла с изображением
)
;
background-repeat
: repeat-x
}
Текст этого параграфа будет поверх фонового изображения, которое расположится по горизонтали.
Свойство BACKGROUND-ATTACHMENT
Это свойство применяется для указания браузеру, должно ли фоновое изображение страницы прокручиваться с текстом (scroll ) или оставаться неподвижным (fixed ).
body {
background-image
: url(адрес файла с изображением
)
;
background-repeat
: repeat-x
;
background-attachment
: fixed
}
В этом случае фоновое изображение останется неподвижным.
Свойство BACKGROUND-POSITION
Данное свойство применяется для расположения изображения относительно . Значения задаются в процентах (%), в единицах длины (см, px), ключевыми словами:
- По вертикали:
- top - верх изображения выравнивается по верхнему краю страницы или блока;
- center
- bottom - низ изображения выравнивается по нижнему краю страницы или блока.
- По горизонтали:
- left - левый край изображения выравнивается по левому краю страницы или блока;
- center - центр изображения выравнивается по центру страницы или блока;
- right - правый край изображения выравнивается по правому краю страницы или блока.
Пишем пример кода в процентах, единицах длины и ключевыми словами:
body {
background-image
: url(адрес файла с изображением
)
;
background-position
: 0% 0%
}
Body {
background-image
: url(адрес файла с изображением
)
;
background-position
: 10px 25см
}
Body {
background-image
: url(адрес файла с изображением
)
;
background-position
: top center
}
Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку. Не исключено, что из этой статьи Вы узнаете много нового, но создавал я её специально для новичков. Поэтому всё будет максимально коротко и подробно одновременно. Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.
Чтобы задать фон в HTML используйте промежуточный DOCTYPE
А начну я с того, что в HTML5 нет возможности задать . Эту возможность было решено вынести в CSS. Поэтому, если Вы планируете использовать ниже изложенное, и хотите получить валидный (правильный) код, Вам нужно остановиться на переходном типе документа. Для этого ваша веб-страница должна начинаться со следующей строки:
Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">
Если с этим разобрались, давайте перейдём к пониманию того, как создаётся фон. И первое, что здесь нужно отметить - это различие между фоновым цветом и фоновой картинкой . В начале идёт фоновый цвет , который заливает всё доступное пространство страницы или её элемента. Поверх него накладывается повторяющаяся фоновая картинка . Визуально это можно изобразить следующим образом:
Фон HTML-документа и его элементов
Второе, что Вам нужно знать - это различие между телом документа и элементом документа . Тело документа обозначается в HTML-коде веб-страницы тегом BODY , который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.
Элементы страницы находятся внутри тега BODY . Примечательно, что задать цвет и/или фоновую картинку средствами HTML можно далеко не для всех элементов документа. Например, фоновую картинку можно указать только для таблиц. По умолчанию, они обычно имеют прозрачный фон.
Атрибут bgcolor для создания фонового цвета
Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor , например:
В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE :
| Текст с фоном |
Примечательно, что фоновый цвет в таблице можно указать и для строк в теге TR и для их ячеек в теге TD .
Как узнать код цвета?
Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом , например: #ec008c . Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов. Например, в Photoshop можно использовать «Eyedropper Tool » (Пипетка) для получения цвета из точки на картинке. Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker » (Выбор цвета) скопировать код цвета.
Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.
Также Вы можете использовать многочисленные онлайн сервисы, например:
- и т.д.
Их принцип работы ещё проще - кликаете нужный цвет и получаете его код.
Атрибут background для создания фоновой картинки
Также как в случае с фоновым цветом, так и в случае с фоновой картинкой , Вам нужно использовать специальный атрибут, а именно background , например:
В данном случае мы задаём фоновую картинку для страницы в целом. Примечательно, что из-за ограничения размеров картинки, она будет повторяться, например:
Как вы видите, при повторении, заметен переход между картинками. Поэтому зачастую используются специальные картинки, где этот момент учтён.
А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE :
| Текст с фоном |
Примечательно, что фоновую картинку можно задать только для таблицы в целом и/или её отдельной ячейки. Для строки это не получится.
Абсолютный и относительный путь к фоновой картинке
Отдельно стоит уделить внимание адресу фоновой картинки . В данном случае используется относительный путь к картинке, т.е. адрес указан относительно места нахождения файла картинки к файлу веб-страницы. Такой вариант нельзя назвать особо удачным. Лучше всего использовать абсолютный путь к картинке, т.е. полный её URL-адрес , например:
В таком случае у Вас не возникнет сопутствующих проблем. Подробней об это Вы можете почитать .
Подведём итоги
Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE . Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета. Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!
| в 22:37 | Изменить сообщение |
Доброго времени суток всем желающим узнать и усвоить что-то новое! Вы когда-нибудь обращали внимание на внешний вид , при разработке которых создатели поленились оформить фон страниц? И я обращал. Это выглядит убого. Часто из-за отсутствия привычных нам разделений между разными видами информации она смешивается и просто отпадает желание далее что-либо смотреть на таком веб-ресурсе.
Чтоб такой беды не случилось с я решил написать статью на тему: «Как сделать фон страницы в html». Прочитав публикацию, вы узнаете, с помощью каких инструментов можно задавать фоновое оформление, как сделать фон фиксированным или меняющимся и многое другое, что поможет сделать привлекательным ваш сайт. А теперь начнем!
Основные инструменты для задания фона веб-страниц
Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в , так и в css.
В языке разметки – это атрибут тега body, а в стилевых таблицах – универсальное свойство, которое позволяет задать до 5 характеристик заднего плана одновременно. Background – достаточно гибкий элемент, который можно использовать для задания фона в виде одного цвета, цветной картинки или даже анимации.
Так, для установки фонового изображения через единицу html
достаточно написать такой код: ... и вместо слов «адрес файла» вставить путь к картинке.
Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.
Например,
..., мы задали черный фон для нашего сайта.
Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).
При наборе второго варианта в специализированных программных продуктах для разработчиков, палитра автоматически появится перед вами. Если же вы только начали изучать данные веб-языки, то код цвета можно подсмотреть в интернете.
Background как свойство в каскадных стилевых таблицах
Он задается или в отдельном файле с css стилями, или в элементе