Глава 4. Цвет и фон

Глава 4. Цвет и фон

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Глава 4. Цвет и фон

Глава 4. Цвет и фон

www.homa.xp3.biz 

В этой главе мы поговорим о том, как с помощью CSS присвоить цвет элементу и его фону, а так же о том, как использовать рисунок в качестве фона элемента и управлять его положением.

Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему "Цвета в интернете".

Цвет в CSS может быть задан 3 методами:

  • Именным значением, например:red - красный.
  • Значением цвета RGB, например:RGB(255,0,0) - опять таки красный.
  • 16-ным значением цвета RGB, например:#ff0 - всё тот же красный.

    С именным значением цвета всё понятно black - черный, green - зелёный, olive - оливковый и т.д.

    Однако по понятным причинам не для всех оттенков цветов зарезервировано индивидуальное имя. Когда возникает необходимость в использовании какого либо "нестандартного" цвета необходимо определить его значение RGB(Red,Green,Blue) сочетание красного, зеленого и синего цвета в числовом выражении. Каждый оттенок из основных цветов в системе RGB может выражаться в числе от 0 до 255.

    Например, черный цвет будет иметь значение 0,0,0, т.е. отсутствие всякого цвета (белый - значение 255,255,255) теоретически если смешать основные цвета должен получится белый, а вот например классический синий цвет имеет значение 0,0,255, т.е. на "мольберте" присутствует только синий. На рисунке наглядно показано, что происходит с красками если их смешать, так смешивая оттенки основных цветов можно добиться любого цвета из видимого спектра.

    Однако в большинстве случаев "веб краски" имеют 16-ное выражение 10-ного значения RGB.

    В 16-ном исчислении цифры от 10 до 15 заменены латинскими буквами и числовой ряд приобретает следующий вид: 0,1,2…9,A,B,C,D,E,F.

    Числа больше 15 в 16-ной системе образуются путём объединения 2 и более чисел в 1. Так например, числу 255 в 10-ной системе соответствует число FF в 16-ной системе.

    Значит, для того чтобы выразить нужный оттенок в 16-ном виде, нам понадобиться 3 пары чисел, где 1-я пара - значение красного цвета, 2-я пара значение зелёного и 3-я пара синего цвета. Так, например, тот же классический синий в 16-ном выражении будет выглядеть так:#0ff. Знак решётки перед числом ставится для указания того что данное число является 16-ным, например, в числе #808 нет латинских букв однако со знаком решётки понятно что оно 16-ное и выражает собой оливковый цвет.

    И еще. выражая цвет в 16-ном виде можно обойтись 3 числами, которые затем будут дублироваться, например запись #daf будет сокращённой формой #ddaaff.

    Цвет элемента

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

    Как уже сказано выше, цвет в CSS может быть задан следующими методами:

  • #ff0 - 16-ное значение цвета rgb;
  • red - именное значение цвета;
  • rgb(255,0,0) - значение цвета rgb.

    Пример:

    <title>Цвет элемента</title>

    <div style=color:red>Блок 1</div>

    <div style=color:#ff0>Блок 2</div>

    <div style=color:RGB(255,0,0)>Блок 3</div>

    смотреть пример

    Цвет фона элемента

    А вот свойство background - определяет цвет фона элемента.

    Цвет фона может иметь следующие значения:

  • #ff0 - 16-ное значение цвета rgb;
  • red - именное значение цвета;
  • rgb(255,0,0) - значение цвета rgb;
  • transparent - прозрачный фон (по умолчанию).

    Пример:

    <title>Цвет фона элемента</title>

    <body style=background:#ffd>

    <div style=background:white>Белый блок</div>

    <div style=background:#0ff>Синий блок</div>

    <div style=background:RGB(255,0,0)>Красный блок</div>

    <div style=background:transparent>Прозрачный блок</div>

    смотреть пример

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

    Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства:background-image.

    Возможные значения background-image:

  • url - путь к файлу с изображением;
  • none - изображение отсутствует (по умолчанию).

    Для того чтобы сделать некую картинку фоном для элемента необходимо указать к ней путь согласно следующего синтаксиса url(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке.

    В примере ниже в качестве основного фона (элемент body) используется 1 графическое изображение, а для блока div другое, возможность использования различных фоновых изображений для разных элементов страницы позволяет решать практически любые дизайнерские задумки.

    Пример:

    <title>Фоновое изображение</title>

    <style>

    body{background-image:url(fon.jpg)} div{background-image:url(fon1.gif);border:5px double #245;height:250px} p{text-align:center;color:#008;font:bold 24px Arial} </style>

    <p>Страница с фоновым изображением

    <div><p>Блок с фоновым изображением</div>

    смотреть пример

    Если рисунок не заполняет собой весь фон элемента, то он выкладывается "плиткой".

    Фиксация фонового изображения

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

    Зафиксировать фоновое изображение позволяет свойство background-attachment, которое может принимать 1 из 2 значений:

  • fixed - фиксированный фон.
  • scroll - подвижный фон (по умолчанию).

    Пример:

    <title>Фиксация фонового изображения</title>

    <style>

    body{background-image:url(fon.jpg);background-attachment:fixed} h1{color:#0ff;font:bold 28px} div{line-height:2;white-space:pre;color:#0ff;font-size:24px} </style>

    <h1>Песенка мамонтенка</h1>

    <div>

    По синему морю, к зелёной земле

    Плыву я на белом своём корабле.

    . . .

    . . .

    </div>

    смотреть пример

    Повторение фонового изображения

    Как уже говорилось выше, если рисунок не заполняет собой весь фон элемента, то он повторяется и выкладывается "плиткой". Свойство background-repeat - регулирует повторение фонового изображения.

    Возможные значения:

  • no-repeat - запретить повторение, показать только 1 изображение.
  • repeat - повторять изображение (по умолчанию).
  • repeat-x - повторять только по горизонтали.
  • repeat-y - повторять только по вертикали.

    Пример:

    <title>Повторение фонового изображения</title>

    <body style=background-image:url(fon.jpg);background-repeat:repeat-x>

    <samp style=background:#fff>Изображение повторяется только по оси х.

    смотреть пример

    Позиция фонового изображения

    При помощи CSS свойства background-position - можно управлять позицией фонового изображения в элементах где оно задано с помощью background-image.

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

    Например, запись: background-position:200px 100px; будет обозначать, что фоновое изображение будет смещено по горизонтали на 200px от левой границы элемента и по вертикали на 100px от верхней границы элемента.

    Так же можно использовать следующие значения: по горизонтали:

  • left - расположить слева.
  • center - расположить по центру.
  • right - расположить справа. по вертикали:
  • top - расположить сверху.
  • center - расположить по центру.
  • bottom - расположить снизу.

    Пример:

    <title>Позиция фонового изображения</title>

    <style>

    body{background-image:url(fon.jpg);background-repeat:no-repeat;background-position:center 100px} </style>

    В этом примере фоновое изображение по горизонтали расположено по центру, а по вертикали в ста пикселях от верхней границы элемента.

    смотреть пример

    Background

    Ну и в довершении главы немного о базовом свойстве background.

    Являясь базовым свойством, background может одновременно принимать те или иные значения от его дочерних свойств:

  • background-attachment
  • background
  • background-image
  • background-position
  • background-repeat

    Все эти свойства мы рассмотрели выше, так что вдаваться в подробности нет смысла.

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

    Пример:

    <title>Background</title>

    <body style="background:url(fon.jpg)fixed repeat-x center">

    <p style=background:red>Фон этого параграфа такой же красный как если бы мы использовали background:red.

    <p>А у элемента body в базовом свойстве background указанно сразу 4 возможных значения взятых от его дочерних свойств.

    смотреть пример

    Полезные советы:

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

    << предыдущая глава | следующая глава >>

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович:
    8-965-148-98-02, diplom07@mail.ru.
    Печатать страницу: Глава 4. Цвет и фон

    Глава 4, Цвет и фон, Глава, 4, Цвет, и, фон, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, Создание сайтов, web-программирование, seo-продвижение, создание и раскрутка сайтов, вбиваю в топ-10, как гвозди, попробуйте бесплатно, Создание сайтов, web-программирование, seo-продвижение, Глава, 4, Цвет, и, фон, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, раскрутка сайтов, Вбиваю в ТОП-10, как гвозди, раскрутка сайтов, Делаю и раскручиваю сайты, Дмитрий Владимирович

    ×

    Ваше письмо