HTML & CSS для начинающих

HTML & CSS для начинающих (Часть 31): Цвета и фоны

Все видео урока HTML и CSS для начинающих

Свойство color описывает цвет переднего плана (цвет текста) элементов. Указать цвета можно различными способами. Классически используются шестнадцатеричные значения. Эти значения всегда начинаются с решетки. За ними обычно следуют три пары цифр и/или букв. Они представляют красный, зеленый и синий. Таким образом, цвета всегда указываются по следующей схеме:

RRGGBB



Значение #ffffff обозначает белый цвет. Если же использовать #000000, то будет показан черный цвет. В "разумных" HTML-редакторах есть соответствующие палитры цветов.

HTML & CSS для начинающих (часть 31): Цвета и фоны

Вы можете вычислить шестнадцатеричные коды. Кроме того, на множестве веб-сайтов (например, http://www.farbtabelle.net/) есть соответствующие таблицы цветов

HTML и CSS для начинающих (Часть 31): Цвета и фоны.

В CSS есть возможность сократить запись шестнадцатеричных цветов. Однако этот принцип применим не ко всем цветам. Это действительно работает только тогда, когда значение состоит из трех равных пар. Типичными примерами являются определения цветов для черного и белого. Обычно они записываются так:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}



Этот синтаксис также можно сократить.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}



В CSS также допускаются RGB-значения. Здесь указываются десятичные значения от 0 до 255, разделенные запятыми. Порядок указания цветов соответствует порядку шестнадцатеричных цветов.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}



Как показано в примере, также возможны процентные значения, хотя на практике они встречаются редко.

Другим вариантом для определения цветов являются ключевые слова для цветов. Вот несколько примеров:

black

red

blue

yellow

white

green

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

p { 
 color: white; 
 background: black; 
}



Обратите внимание, что с появлением CSS3 палитра доступных ключевых слов для цветов значительно расширилась. CSS3 добавил цвета из спецификации SVG. Обзор доступных названий цветов можно найти на http://www.w3.org/TR/SVG/types.html#ColorKeywords.

HTML & CSS для начинающих (Часть 31): Цвета и фоны

Определение фона

При использовании background важно знать следующие возможные значения, которые будут подробно рассмотрены в следующих разделах этого учебного пособия:

• background-attachment

background-color

background-image

background-position

background-repeat

Эти данные разделены пробелами. Порядок их следования не имеет значения. Не обязательно указывать все значения.

Пример:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Цвета фона

Чтобы назначить элементу цвет фона, используется свойство background-color.

div { 
   background-color: #009999;
}



В качестве значения укажите нужный цвет.

HTML & CSS для начинающих (Часть 31): Цвета и фоны

Графические фоны

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

none – без фоновой графики

• URI – путь к изображению

Приведем краткий пример.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Добро пожаловать на PSD-Tutorials.de!
</div>



Однако при использовании фоновых изображений следует проявлять осторожность. Слишком яркие фоновые изображения не способствуют удобству чтения текста.

HTML & CSS для начинающих (Часть 31): Цвета и фоны



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

Прокручиваемые фоны

При длинных элементах фоновое изображение будет двигаться вместе со скроллом страницы. С помощью background-attachment это можно предотвратить.

fixed – движется вместе

scroll – фоновое изображение остается на месте и выравнивается по окну браузера (Viewport).

Свойство background-attachment обычно используется в сочетании с background-image.

Пример:

div.fest {
	background-image: url(background.gif);
	background-repeat: no-repeat;
}

Положение фона

Свойство background-repeat задает позицию, с которой начнется фон. Отсчет происходит от элемента, для которого была определена графика.

• Процентированный – одно или два значения, определяющие расстояние графики от верхнего левого угла элемента. В случае двух значений первое обозначает горизонтальное, а второе вертикальное расстояние. Точкой отсчета не является верхний левый угол графики, а точка внутри графики, которая также указывается x/y-значениями.

• Линейный – определяет расстояние графики от ее левого верхнего угла до левого верхнего угла элемента. Разрешены одно или два значения. Если указаны два значения, первое определяет горизонтальное расстояние, второе вертикальное.

Дополнительно возможны следующие ключевые слова:

left – по горизонтали слева

center – по центру

right – по горизонтали справа

top – по вертикали сверху

bottom – по вертикали снизу

Вот пример, как это может выглядеть:

p {
	background-position: 8ем сверху;
}

Повторяющиеся фоновые изображения

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

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

повторить-x – графика будет повторяться только горизонтально.

повторить-у – графика будет повторяться только вертикально.

no-repeat – графика не будет повторяться.

Вот пример:

body {
	background-repeat: повторить-y;
}



В этом случае графика будет повторяться только вертикально.

HTML & CSS для новичков (Часть 31): Цвета и фоны

Если указать повторить-y, то повторение будет осуществляться исключительно горизонтально.

HTML & CSS для новичков (Часть 31): Цвета и фоны



Этот учебник показал, насколько мощен CSS также в области цветов и изображений.