Цвет и фон


Содержание

Цвет текста и цвет фона в CSS

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

Содержание:

Свойство COLOR

Это свойство задает цвет элемента, а точнее, цвет текста внутри элемента. Значение задается одной из возможных форм:

  • наименованием цвета (GREEN, BLACK, RED. );
  • шестнадцатеричным кодом цвета (008000, 000000, FF0000. );
  • десятичным кодом цвета в RGB (color:rgb (40, 175, 250));

Свойство COLOR является наследуемым, и при не заданном значении для какого-либо элемента значение унаследуется от его предка. Но может получиться так, что и для предка оно не задано — тогда будет применена таблица стилей браузера с использованием значений по умолчанию. Цвет элемента в этом случае скорее всего будет черным.

Как я уже упоминал, задавать цвет можно практически всем элементам, это могут быть заголовки (H1. H6), теги выделения текста (strong, em) и даже целые абзацы (p) и даже границам таблиц, но об этом позже.

Смотрим пример задания цвета текста при помощи CSS:

В этом примере все заголовки первого уровня web-страницы будут синего цвета:

В этом случае все то, что в тексте страницы будет выделено тегом strong, окрасится в красный цвет.

Можно записать так:

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

Когда же возникает необходимость выделять заголовки различными цветами, то применяются селекторы по классу. Для определения класса в HTML используется атрибут class, который можно применять к любым элементам. В HTML — коде нужно будет записать:

В таблице стилей CSS, в этом случае, пишем правило, где селектором будет элемент H1, а через точку (.) имя класса:

В HTML — документах исползуются так же селекторы по идентификатору, определяются они атрибутом id. Идентификатор является более значимым или приоритетным признаком, чем класс. И если в HTML — коде для элемента будет указан и класс и идентификатор, то применится стиль идентификатора. Обозначается идентификатор знаком решетки (#). Для применения в HTML — коде идентификатора, нужно будет записать:

В таблице стилей в свою очередь:

Свойство BACKGROUND-COLOR

Это свойство позволяет задать цвет фона для страницы вцелом, абзаца, ссылки, вообщем для любого элемента HTML. Для этого в значении свойства указывается цвет или значение transparent(прозрачный). Код для фона страницы пишется:

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

Получаем желтый фон заголовков первого уровня.

Цвет и фон в CSS

Свойство BACKGROUND-REPEAT

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

  • repeat — изображение повторяется по вертикали и горизонтали;
  • repeat-x — изображение повторяется только по горизонтали;
  • repeat-y — изображение повторяется только по вертикали;
  • no-repeat — изображение не повторяется.

Код пишется так:

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

Свойство BACKGROUND-ATTACHMENT

Это свойство применяется для указания браузеру, должно ли фоновое изображение страницы прокручиваться с текстом (scroll) или оставаться неподвижным (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
>

Свойство BACKGROUND

Пришло время записать полный пример задания фона для web-страницы:

Фоновое изображение закреплено по центру экрана, не повторяется ни в одном из направлений и не прокручивается вместе с текстом страницы. Показанный выше код можно оптимизировать и записать проще, что тоже будет верно:

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

CSS: Фон

CSS свойства background используются для создания эффектов на заднем фоне страницы.

Список свойств для стилизации заднего фона, которые будут
рассмотрены ниже:

  • background-color
  • background-image
  • background-repeat
  • background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

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

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

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

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

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

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

Попробовать »

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

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Попробовать »

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

это то же самое что и:

Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.

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

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

Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

Несколько фоновых изображений

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

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

Стоит отметить, что порядок указания картинок имеет важное значение. Первое добавляемое изображение будет отображаться над всеми остальными, последнее под всеми остальными фоновыми изображениями. Мы можем увидеть как это работает, если первым фоновым изображением задать картинку, которая не имеет прозрачных областей, в этом случае она будет перекрывать все остальные картинки, заданные для фона:

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

DigiPortfoolio OÜ печать на футболках в Нарве

You are using an outdated browser.
Please upgrade your browser to improve your experience.

Цвет и фон страницы

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

В уроке будут использованы CSS-свойства:

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

Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему: «Цвета в Интернете»

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

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

Илон Маск рекомендует:  Что такое код swftextfield &#62;setleftmargin

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

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

Однако в большинстве случаев «веб краски» имеют шестнадцатеричное выражение десятичного значения RGB.

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

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

Значит, для того чтобы выразить нужный оттенок в шестнадцатеричном виде, нам понадобиться три пары чисел, где первая пара — значение красного цвета, вторая пара значение зелёного и третья пара синего цвета. Так, например, тот же классический синий в шестнадцатеричном выражении будет выглядеть так: #0000FF. Знак решётки перед числом ставится для указания того что данное число является шестнадцатеричным, например в числе #808000 нет латинских букв однако со знаком решётки понятно что оно шестнадцатеричное и выражает собой оливковый цвет.

Выражая цвет в шестнадцатеричном виде можно обойтись тремя числами, которые затем будут дублироваться, например запись #DAF будет сокращённой формой #DDAAFF.

Свойство color описывает цвет переднего плана элемента.

Сделаем все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом

. В нижеприведённом коде цвет элемента

устанавливается красным.

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

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255,0,0) — значение цвета RGB.

Свойство background-color описывает цвет фона элемента.

В элементе размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу .

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

Заметьте, что устанавливает два свойства для

, разделяя их точкой с запятой.


CSS-свойство background-image используется для вставки фонового изображения.

Ниже мы используем в качестве фонового изображение. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите «сохранить изображение как/save image as»), либо вы можете использовать другое изображение.

Для вставки рисунка в качестве фонового изображения web-страницы просто примените свойство background-image в тэге и укажите местоположение рисунка.

Повторение/мультипликация фонового изображения [background-repeat]

Вы заметили в предыдущем примере, что изображение повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.

В таблице указаны четыре значения background-repeat.

Значение Описание
Background-attachment: scroll Изображение прокручивается вместе со страницей — разблокировано
Background-attachment: fixed Изображение блокировано

Например, следующий код фиксирует изображение.

Расположение фонового рисунка [background-position]

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

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение ‘100px 200px’ располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:

В таблице дано несколько примеров.

Попробуем на практике.
Создадим html-документ со следующими элементами: заголовок h1, параграф и просто текст (материал из документа “СSS Урок 4 Материал для практического задания.doc”). Зададим стиль для элемента body:
body <
color:green>
Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать свой стиль. Например, сделаем цвет заголовка h1 красным:
h1 <
color:red>
Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего «предка» — элемента body.

Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента «предка». Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано.
Дерево элементов — структура всех элементов html-страницы, отражающая их вложенность друг в друга.
Схематично дерево элементов для нашего примера выглядит так:

В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.

Значениями свойства color могут быть именные цвета (red, blue. ), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)).
Итак, задать цвет текста для элемента можно тремя способами:

body <
color:green>
h1 <
color:#FF0000>
h2 <
color:rgb(255,0,0)>

На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу.
Рассмотрим группу свойств background:

background-color — задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения (не у body) указать значение inherit.

Попробуем на практике.
body <
background-color:#243CED;
color:yellow>
Проверьте результат в браузере.

background-image — задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу (в имени файла использовать только английские буквы и не использовать пробелы). Путь к файлу указывается относительно таблицы стилей.

Попробуем на практике. Графику к тексту взять из “СSS Урок 4 Материал для практического задания.doc”, в графическом редакторе сохранить как “ riba.gif ”:
body <
background-image:url(riba.gif);
background-color:#243CED;
color:yellow>
h1<
color:#bd0707>
Проверьте результат в браузере.

Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое изображение будет лежать поверх фонового цвета.

background-repeat — задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:

repeat — повторять изображение по горизонтали и вертикали;
repeat-x — повторять изображение только по горизонтали;
repeat-y — повторять изображение только по вертикали;
no-repeat — не повторять изображение.

По умолчанию используется значение repeat, как мы и убедились в предыдущем примере.

Практическое задание: Проверить все варианты, как ведут себя остальные значения background-repeat.

background-attachment — указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:

scroll — фон прокручивается вместе с текстом. Это значение используется по умолчанию;
fixed — фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.

Практическое задание: Проверить вариант, как ведет себя значение fixed.

Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.

background-position — задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов.

Попробуем на практике.
body <
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:10% 30%;
color:yellow>
Проверьте результат в браузере. Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали.
Следует заметить, что это свойство по-разному воспринимается разными браузерами (разные размеры отступов). Этой проблемы можно избежать, задавая размер в пикселах:
body <
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:150px 150px;
color:yellow>
Проверьте результат в браузере. Левый верхний угол изображения будет смещен на 150 пикселов по горизонтали и на 150 пикселов по вертикали.
Попробуем такой вариант:
body <
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:center top;
color:yellow>
Проверьте результат в браузере. Изображение будет выровнено по горизонтали — по центру, а по вертикали — по верхнему краю страницы.

Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова:

left — по левому краю;

center — по центру;

right — по правому краю.

Для выравнивания по вертикали (второй параметр):

top — по верхнему краю;

center — по центру;

bottom — по нижнему краю.

Сокращенная запись свойства background

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

Илон Маск рекомендует:  list-style-image в CSS
Попробуем на практике.
body <
background:url(picture.gif) no-repeat #33CCFF center top; color:yellow>

Мы рассмотрели свойства цвета и фона. Их можно применять ко всем элементам.

СSS – Цвет и фон

В CSS (Каскадные таблицы стилей) можно задавать цвет и фон элементов с помощью свойств:

  • Color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

«Color»

Определяет цвет текста элемента.

Например, сделаем текст параграфа зелёным. Цвет можно задавать как названием цвета, так и шестнадцатеричным значением (#00FF00)

«background-color»

Определяет цвет фона элемента.

Например, сделаем текст красным, а фон параграфа теста зелёным.

«background-image»

Определяет фоновое изображение для элемента.

background-image: url(путь к файлу)

Например, сделаем фон веб-страницы с картинкой из RSS.Для этого прописываем правило для тега BODY

Результат – вся страница залита повторяющимися изображениями загруженного рисунка.

«background-repeat»

Определяет, как будет меняться фоновое изображение (по горизонтали, по вертикали или в обе стороны), установленное свойством background-image.

Background-repeat: repeat-x Рисунок повторяется по горизонтали

background-repeat: repeat-y Рисунок повторяется по вертикали

background-repeat: repeat Рисунок повторяется по горизонтали и вертикали background-repeat: no-repeat Рисунок не повторяется

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

«background-attachment»

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

Background-attachment: scroll Изображение прокручивается вместе со страницей — разблокировано

Background-attachment: fixed Изображение блокировано

Например, сделаем так, чтобы картинка была фиксированной (как бы мы не прокручивали страницу – картинка будет всегда виден).

«background-position»

Определяет начальное положение картинки, установленной с помощью свойства background-image. Начальное положение задаётся с помощью координат. Например, значение «120px 200px» располагает картинку на 120 пикселей слева и на 200 пикселей сверху в окне браузера. Допускается задание координат: в процентах, пикселях, сантиметрах, а также ключевыми словами. Положение по горизонтали — left, center, right. Положение по вертикали — top, center, bottom.

Например, расположим фоновую картинку слева вверху.

background-position: top left;

«background»

Позволяет записать в сокращенном виде все вышеперечисленные свойства.

background: перечисление свойств (перечисление через пробел)

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

А теперь применим сокращенную запись свойства background

background: url(/rss.png) repeat-x;

Таким образом, в СCS можно легко менять цвет и фон веб-страницы.

Цвет и фон.

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

Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему: «Цвета в Интернете»

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

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

С именным значением цвета всё понятно black — черный, green — зелёный, olive — оливковый и т.д. (полную палитру базовых красок, т.е. цветов для которых зарезервированы именные значения, смотрите здесь.)

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

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

Однако в большинстве случаев «веб краски» имеют шестнадцатеричное выражение десятичного значения RGB.

В шестнадцатеричном исчислении цифры от 10 до 15 заменены латинскими буквами и числовой ряд приобретает следующий вид:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.


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

Значит, для того чтобы выразить нужный оттенок в шестнадцатеричном виде, нам понадобиться три пары чисел, где первая пара — значение красного цвета, вторая пара значение зелёного и третья пара синего цвета. Так, например, тот же классический синий в шестнадцатеричном выражении будет выглядеть так: #0000FF . Знак решётки перед числом ставится для указания того что данное число является шестнадцатеричным, например в числе #808000 нет латинских букв однако со знаком решётки понятно что оно шестнадцатеричное и выражает собой оливковый цвет.

И еще.. выражая цвет в шестнадцатеричном виде можно обойтись тремя числами, которые затем будут дублироваться, например запись #DAF будет сокращённой формой #DDAAFF .

Фух.. затянул я с водной частью давайте же наконец учить CSS..

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

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

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

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255,0,0) — значение цвета RGB.

CSS: цвет и фон

В этой статье мы узнаем как использовать цвет и фон. А также рассмотрим методы позиционирования и управления фоновым изображением. Речь пойдет о следующих свойствах:

  • color
  • background-color
  • background-image
  • backrgound-repeat
  • background-attachment
  • background-position
  • background

Цвет элемента
Чтобы задать какому-либо элементу страницы цвет, необходимо использовать свойство color. Значение можно указывать в шестнадцатеричном формате (#nnnnnn), непосредственно название (black) или RGB-значения (RGB(0,0,0)). Например, следующий пример демонстрирует цвет заголовков страницы:

Цвет фона элемента
Для придания фона элементу достаточно задать для него свойство background-color. Надеюсь комментарии тут излишни:

Фоновое изображение
Следующей записью:

мы в качестве фона разместим изображение fon.jpg. Заметим, что здесь мы указали путь url(«fon.jpg»), это означает, что изображение с фоном находится в той же папке, что и таблица стилей. Также можно указывать путь до картинки, находящейся как в другом каталоге, так и во всемирной паутине интернет.

Повтор изображения
За повтор фонового изображения отвечает свойство background-repeat, которое может принимать следующие значения:
background-repeat: repeat-x; //изображение повторяется по горизонтали
background-repeat: repeat-y; //изображение повторяется по вертикали
background-repeat: repeat; //изображение повторяется по горизонтали и по вертикали
background-repeat: no-repeat; //изображение не повторяется

Фиксация изображения
Очень полезное свойство, позволяющее зафиксировать фоновое изображение без прокрутки, т.е. вы прокручиваете страницу, а изображение остается на месте. Пример продемонстрирован в этом блоге.
background-attachment: scroll; //изображение прокручивается вместе с текстом
background-attachment: fixed; //изображение зафиксировано

Позиционирование изображения
По-умолчанию, фоновый рисунок будет расположен в левом верхнем углу экрана. Свойство background-position позволяет изменить это положение. Положение может быть задано несколькими способами. Однако обобщенно, все они представляют собой набор координат. Например, позиции значение «100px 200px» разместит фоновый рисунок с левой стороны на 100px и на 200px от верхней части окна браузера.
Координаты можно указывать в процентах от окна браузера, в фиксированных единицах (пикселы, сантиметры и т.д.), также можно использовать слова: left, right, top, bottom. Следующий рисунок демонстрирует возможные варианты значений и их альтернативы:

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

Веб-дизайн для начинающих

Цвет и фон

CSS — Справочник

color — Определяет цвет элемента. color: <Цвет>; Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых. Поддерживается NN начиная с 4.0

background — задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat. background: [<background-color>] [<background-image>] [<background-repeat>] [<background-attachment>] []; Значения этих свойств могут располагаться в любом порядке. Значение по умолчанию transparent none repeat scroll 0% 0%. Поддерживается IE начиная с 3.02; задание значений background-position и background-repeat поддерживается начиная с 4.0

background-color — задает фоновый цвет Web-страницы или ее элемента. background-color: <Цвет>|transparent; Предопределенное значение transparent задает «прозрачный» фон. Оно же является значением по умолчанию. Поддерживается IE начиная с 4.0, в составе атрибута background — с 3.02 Поддерживается NN начиная с 4.0

background-image — задает фоновый рисунок Web-страницы или ее элемента. background-image: url(<Интернет-адрес файла рисунка>)|none; Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию. Поддерживается IE начиная с 4.0, в составе атрибута background — с 3.02 Поддерживается NN начиная с 4.0

background-attachment — данный атрибут позволяет «зафиксировать» фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы. background-attachment: scroll|fixed; background-attachment: scroll; — фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию); background-attachment: fixed; — фоновое изображение фиксируется на одном месте и не прокручивается с содержимым страницы. Применяется только для тега . Поддерживается IE начиная с 4.0, в составе атрибута background — с 3.02

background-repeat — устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе. Иногда этот атрибут необходим, чтобы занять все свободное пространство, если фоновый рисунок слишком мал, чтобы покрыть пространство без повторения. background-repeat: repeat|no-repeat|repeat-x|repeat-y; background-repeat: repeat; — размножает фоновое изображение во всех направлениях (значение по умолчанию); background-repeat: no-repeat; — запрещает фоновому изображению повторяться; background-repeat: repeat-x; — размножает фоновое изображение только по горизонтали; background-repeat: repeat-y; — размножает фоновое изображение только по вертикали. Поддерживается IE начиная с 4.0

background-position — задает местонахождение фонового рисунка. Это комбинированный атрибут, заменяющий атрибуты background-position-x и background-position-y. background-position: [<background-position-x>] [<background-position-y>]; Если задана только одна координата, то она считается горизонтальной, а для вертикальной принимается значение 50%. Значение по умолчанию 0% 0%. Поддерживается IE начиная с 4.0

background-position-x — задает горизонтальную координату фонового рисунка. background-position-x: |%|left|center|right; Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: left, center, right , которые задают выравнивание фонового рисунка на странице по левому краю, по центру и по правому краю соответственно. Значение по умолчанию 0%. Поддерживается IE начиная с 4.0

background-position-y — задает вертикальную координату фонового рисунка. background-position-y: |%|top|center|bottom; Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: top, center, bottom , которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно. Значение по умолчанию 0%. Поддерживается IE начиная с 4.0

Цвета полосы прокрутки

scrollbar-3dlight-color — задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок. scrollbar-3dlight-color: <Цвет>; Поддерживается IE начиная с 5.5

scrollbar-arrow-color — задает цвет стрелок на кнопках полосы прокрутки. scrollbar-arrow-color: <Цвет>; Поддерживается IE начиная с 5.5

scrollbar-base-color — задает цвет бегунка и кнопок-стрелок полосы прокрутки. scrollbar-base-color: <Цвет>; Поддерживается IE начиная с 5.5

scrollbar-darkshadow-color — задает цвет «тени», отбрасываемой бегунком и кнопками прокрутки полосы прокрутки (цвет правых и нижних гранией). scrollbar-darkshadow-color: <Цвет>; Поддерживается IE начиная с 5.5

scrollbar-face-color — задает цвет бегунка и кнопок прокрутки полосы прокрутки. scrollbar-face-color: <Цвет>; Поддерживается IE начиная с 5.5

scrollbar-highlight-color — задает цвет «освещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней). scrollbar-highlight-color: <Цвет>; Поддерживается IE начиная с 5.5

scrollbar-shadow-color — задает цвет «неосвещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом «тени», задаваемым атрибутом scroll-darkshadow-color. scrollbar-shadow-color: <Цвет>; Поддерживается IE начиная с 5.5

scrollbar-track-color — задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок. scrollbar-track-color: <Цвет>; Поддерживается IE начиная с 5.5

Цвет и фон

Здравствуйте Уважаемые владельцы блогов. Давайте поговорим о сочетании цветовых фонов, в нашем конкретном случае о дизайне сайта/блога. Согласитесь, в дизайне первое впечатление-как воспринимается сайт посетителями.

Совместимость цветового фона играет определяющую роль: задержится ли посетитель на страницах Вашего блога или покинет его сразу, если фон подобран, как говорят «вырви глаз». В принципе нужно научиться подбирать цвета и для написания текста на разных цветовых фонах. Поможет нам в подборе совместимости фонов использование цветового круга. Давайте приступим:

Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.

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

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

  • background-color — задает цвет фона для любого Html элемента;
  • background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
  • background-repeat — параметр повторения фоновой картинки;
  • background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
  • background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.

Далее рассмотрим подробнее каждое свойство.

Background-color и background-image

Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

background-color: transparent| |inherit

Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.

Например, зададим для абзаца черный цвет фона и белый текст. Так это будет выглядеть в коде html страницы:

У этого абзаца черный фон и белый текст

Либо так в коде CSS файла:

p <
background-color:#000000;
color:#ffffff
>

У этого абзаца черный фон и белый текст

Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

По умолчанию background-image имеет значение none, то есть никакого изображения для фона не используется. В случае если все таки в качестве фона необходимо использовать картинку, то необходимо указать адрес файла заключить его в скобки и перед всей этой записью поставить url:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

А вот оригинальный вид фонового изображения:

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

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

Background-repeat — параметры повторения фонового изображения

Свойство background-repeat может принимать следующие значения:

no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

Позиционирование фона с помощью background-position

Позицию фонового изображения относительно элемента web страницы для которого оно назначено можно указать с помощью свойства background-position:

Горизонтальная позиция может принимать следующие значения:

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

  • left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру элемента;
  • right — фон прижимается к правому краю элемента.

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

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

  • top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру;
  • bottom — фон прижимается к нижнему краю.

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

Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

background-image:url (//webcodius.ru/example/logo.png);
background-repeat:no-repeat;
background-position:250px 10px;

Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

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

Вообще соотношение между ключевыми словами и процентной записью следующее:

  • top left = left top = 0% 0% (выравнивание по левому верхнему углу)
  • top = top center = center top = 50% 0% (вверху по центру)
  • right top = top right = 100% 0% (по правому верхнему углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (по левому нижнему углу)
  • bottom = bottom center = center bottom = 50% 100% (внизу по центру)
  • bottom right = right bottom = 100% 100% (по правому нижнему углу)

На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по X, а вторая по Y. А ключевые слова хоть и кажутся более понятными, но могут стоять в различной последовательности и это может ввести в заблуждение.

Фиксация фона background-attachment

По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:

scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

Обычно фиксируют фоновый рисунок заданный для все веб страницы, а для отдельных элементов оставляют прокручивающийся фон.

Сборное правило background

Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.

Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:

background: url (//webcodius.ru/example/logo.png) 50% no-repeat;

А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL