Первый текст

Второй текст

В этой записи я расскажу, как обычно устанавливают фон на сайт с применением HTML кода.

Также покажу отличный зарубежный сервис по подбору бесшовных фонов.
Сейчас настройки сайта делаются легче и удобнее через CMS консоли, таких как WordPress.
Бывает необходимо менять шаблоны продающих сайтов, в этом и поможет данная статья.

Если вы не знаете, что такое ХТМЛ , то это обобщенно можно назвать языком сайтов или набором правил по которым генерируются сайты.

Например вы видите картинку на сайте, когда в HTML коде страницы это может выглядеть так:

Установка сплошного цвета на фон страницы.

Для того, чтобы установить фон в виде сплошного цвета , нужно в тег добавить атрибут bgcolor.

< html >
< head >
< title >Заголовок страницы.

< body bgcolor = "#ffcc00" >

Вы можете данный код вставить в текстовый файл и сохранить с расширением.html. Далее открыть любым браузером и увидите результат.

Как вы наверное догадались, цвет фона появляется за счет кода цвета в атрибуте bgcolor= «значение» , который можно подобрать перейдя по этой ссылке.

Установка картинки на фон HTML страницы.

Для того, чтобы установить на фон изображение , можно использовать атрибут background в теге .

< html >
< head >
< title >Заголовок страницы.

< body background = "http://сайт/images/mlmsecret.jpg" >Привет. Этом моя первая страница.

Вы можете заметить, что атрибут background равен пути файла, который используется в качестве фона.

Чтобы быстро сменить фон или любую картинку на странице, достаточно указать новый путь до вашего файла используя текстовый редактор.

Чтобы узнать прежний путь, необходимо на странице с картинкой, нажать по картинке правой кнопкой и кликнуть по «Копировать URL картинки.» таким образом вы увидите название картинки/фона. Затем вы можете просто заменить прежнюю картинку своей, используя то же название файла.

Это были простейшие основы по настройке фона в html , теперь самое интересное. 🙂

В html фон для сайта не задают, это пишется через css-стили, но это лишь теоретическая формальность. А теперь давайте узнавать, как этот фон определять.

Фон для сайта или отдельного блока

Поскольку для осуществления этой цели нам нужен css-файл, его нужно создать и подключить к html. Об этом написано в . После этого можно приступать к работе. Во-первых, вам нужно определиться с тем, чему вы хотите задать фон. Если всей странице в целом, то сделать это можно так:

Body{ Background-color: white; }

То есть мы обращаемся к тегу body , который представляет всю нашу страничку. Для задания цвета фона используется свойство background-color . Но что, если вам нужно задать в качестве фона рисунок, а не сплошной цвет? Тогда стоит написать так:

Body{ Background-image: url(путь к рисунку.расширение рисунка) }

Для наглядности я предлагаю рассмотреть все подробнее на примере. Для этого я буду использовать такую картинку:

Например, background-image: url(comp.png) . В этом примере мы задали фоновую картинку с именем comp (именно так я ее назвал) формата png, которая лежит в той же папке, что и css-файл.
В html создам произвольный блок с конкретными размерами, чтобы на нем демонстрировать работу css-свойств.

И вот для него стили:

#ct{ Background-image: url(comp.png); width: 600px; height: 400px; }

Вот что у нас получилось:

Почему так? Дело в том, что по умолчанию браузер повторяет картинку столько раз, чтобы полностью заполнить блок. Иногда так и нужно, например, при использовании бесшовных орнаментов, но в нашем случае должна быть одна картинка. К счастью, этим можно очень легко управлять.

Повторение фона

Если у вас картинка в качестве фона, то по умолчанию она будет повторяться по горизонтали и вертикали, чтобы заполнить все пространство страницы. Чтобы это убрать, используется свойство background-repeat и его значение no-repeat (не повторять). Также есть такие значения:

• Repeat-x – повторять только по горизонтали
• Repeat-y – только по вертикали

Допишем в свойства нашему графическому фону:

Background-repeat: no-repeat;

Позиция

Свойство background-position определяет место, где будет находиться картинка. Здесь задается два значения – по горизонтали и вертикали. Примеры: background-position: right bottom – позиция в правом нижнем углу, top-left – в нижнем верхнем (и так по умолчанию), 250px 500px – смещение от левого верхнего угла вправо на 250 пикселей и вниз на 500.

Давайте лучше посмотрим на примерах:

Background-position: top right;

Картинка переместиться в верхний правый край. Я дал блоку также желтый фон, чтобы были видны его края.

background-position: 50% 50%;

Изображение появилось ровно по центру в своем блоке. Да-да, такое тоже возможно благодаря процентной записи позиции.

background-position: 70% 20%;

Фон смещен на 70% по горизонтали, и на 20 по вертикали.

Разрешается также в пикселях задавать отрицательное значение позиции. Это допустимо делать, например, когда вы используете большую картинку-спрайт и нужно поставить в блок нужную часть этого спрайта.

Закрепление фона

Еще мне очень нравится одно свойство, которое называется background-attachment . У него есть всего два значения и первое стоит по умолчанию (scroll). Это означает, что при прокрутке страницы фон тоже будет прокручиваться, а если вы используете картинку без повторений, то в конце концов она закончиться и дальше пойдет просто сплошной цвет.

Чтобы этого не случилось, прописывается background-attachment: fixed и теперь наш фон надежно зафиксирован на месте. Это можно сравнить с тем, как блоку определить фиксированное позиционирование и он не будет исчезать со страницы при ее прокрутке.

Сокращенная запись всего этого добра

Мы с вами разобрали много свойств, которые позволяют сделать фон, но если их все применять, то получается громоздкая запись. Есть очень элегантное решение. Свойство background позволяет через пробел записать нужные настройки в таком порядке:
Background: цвет изображение повторение закрепление позиция;
И теперь все можно записать так:

Background: yellow url(comp.png) no-repeat 20% 100px;

Если какое-то свойство определять не нужно, то оно просто опускается (в нашем случае мы не записали background-attachment).

Много фонов

А что делать, если вам нужно несколько фоновых картинок? Бывает, что ж поделать. Сегодня css поддерживает такую возможность. Давайте и мы попробуем. Возьмем такую иконку

Я назвал ее laptop.

И вот код для вставки мультифона:

Background: url(comp.png) no-repeat 20% 100px, url(laptop.png) no-repeat 50% 50%; background-color: yellow;

Как видите, достаточно всего лишь поставить запятую после первого изображения и прописать настройки для второго. Сплошной цвет в этом случае лучше задать отдельно.

Таким же образом можно записать еще сколько угодно картинок, но не переусердствуйте – слишком много графики это не очень хорошо.

Вот на этом мне бы хотелось закончить эту статью. С фоном можно делать еще много других интересных вещей, о них постараюсь писать в будущем (а кое-что уже написал – например, ). Успешного вам изучения этого свойства.

Урок 7. Цвет текста и фона в HTML.

Дата: 2008-12-05

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

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

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

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

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

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

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

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

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

П ри помощи 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
}