Наука + Бизнес = $$$

Карта Сайта

Пятница, 29.03.2024, 12:45
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №4: настройка фона в CSS

Настройка фона в CSS

На этом уроке мы рассмотрим установку и настройку фона в CSS. В этом плане таблицы стилей превзошли HTML, они позволяют более детально настраивать фон и фоновые изображения страниц, блоков, текста и других элементов. В CSS все это можно сделать с помощью одного свойства - background, которое имеет много значений.


Фоновые цвета

Фоновый цвет задается с помощью свойства background-color. Для примера зададим цвет фона страницы и текста:

body{background-color:pink;}  p{background-color:#FFFF99;}

Сохраним в наш CSS документ. В результате фон страницы станет розовым, а фон текста приобретет желтый цвет. Для выбора цветов, можете воспользоваться: Таблицей кодов цветов


Фоновые изображения

Фоновое изображение, при помощи CSS, можно задать практически любому объекту на странице. Задается изображение с помощью свойства background-image. В значении этого свойства необходимо задавать путь к рисунку, который вы хотите использовать в качестве фона, примерный синтаксис добавления рисунка в значения background-image:url('Путь к файлу/fon.gif');}. Скачайте какой-нибудь рисунок, желательно с gif расширением, назовите его fon и скиньте его в папку, где ваши html страницы и таблица стилей css. Теперь используем этот рисунок в качестве фона страницы. Открываем файл css и пишем в нем такую строку:

body{background-image:url('fon.gif');}

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

  • background-repeat – свойство определяет будет ли повторяться фоновый рисунок и если будет то каким образом. У данного свойства существуют следующие значения:
    • repeat – изображение будет повторяться по вертикали и по горизонтали
    • repeat-x – изображение будет повторяться только по горизонтали
    • repeat-y – изображение будет повторяться только по вертикали
    • no-repeat – изображение вообще не будет повторяться
  • background-attachment – определяет будет ли фон перемещаться вместе с содержимым страницы при ее прокрутке. Свойство имеет следующие значения:
    • fixed – фон будет оставаться на месте, а содержимое страницы будет перемещаться
    • scroll – фон будет перемещаться вместе с другим содержимым страницы
  • background-position – позиционирует фоновое изображение. Данное свойство позволяет перемещать фоновый рисунок относительно верхней и левой сторон страницы. Свойство имеет два значения:
    • первое значение - смещает рисунок вправо(значение имеет вид пикселей)
    • второе значение - рисунок смещается вниз(значение имеет вид пикселей)

Для примера скачаем еще одну картинку с расширением jpg и назовем ее picture(picture.jpg). Зададим селекторам body и p, такие свойства и значения:

body {background-color:blue;
background-image:url('fon.gif');
background-repeat: repeat-x;
background-attachment: fixed;}

p {background-color:white;
background-image:url('picture.jpg');
background-repeat: no-repeat;
background-position: 50px 25px;}

В HTML-код к которому подключен ваш css документ скопируйте такой код:

<html>

  <head>

    <title>Test</title>

    <link rel="StyleSheet" href="style.css" type="text/css">

  </head>

  <body>

Фон контейнера body повторяется по горизонтали и использует картинку под названием fon.gif , остальное место залито синим цветом. При прокрутке страницы, верхний фон привязан, в то время как остальное содержимое меняется.

    <p>Текст в параграфах имеет белый фон, также в качестве фона используется картинка (picture.jpg), которая не повторяется. к тому же она расположена на расстоянии 50пикселей от левого края  и 25пикселей от верхнего края страницы, независимо от того где расположен текст, которому она должна служить фоном.

   Важно! - для прокрутки заполните страницу любым текстом используя тег <br> и в середине закройте тег </p>

  </body>

</html>

Если вы все сделали правильно, то у вас не возникнет вопросов по данной теме. Фоновые изображения могут быть использованы для многих элементов HTML, а не только для страницы целиком (body). Мы и рассмотрели все свойства, используемые в CSS для работы с фоном и теперь вы сможете без труда можете использовать эти знания для создания красивого сайта.

На следующем уроке рассмотрим форматирование текста в CSS: Работа с текстом в CSS


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru