Панель Управления





Курс CSS. Урок 26. Краткая запись фоновых свойств.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 26. Краткая запись фоновых свойств. Для фоновых свойств элементов также можно использовать краткую запись: background: color position size repeat origin clip attachment image; или background: color position repeat attachment image;. Вообще, любые значения можно опускать, тогда будут использованы значения по умолчанию. Пример записи: background: 0% 100px no-repeat fixed url('images/tel.jpg');.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 26. Краткая запись фоновых свойств.
Точно также, как для свойств Шрифт (font:), Рамка (border:), Список (list-style:) для фоновых свойств элементов также можно использовать краткую запись:
Сокращенная запись для фоновых свойств:

Фон (background):

[<'background-color'>||<'background-position'>||<'background-repeat'>||<'background-attachment'>||<'background-image'>]

На самом деле, если добавить еще свойства спецификации CSS 3, полная запись синтаксиса будет такой:
background: color position size repeat origin clip attachment image;

Если отбросить свойства спецификации CSS 3, то такой:
background: color position repeat attachment image;

Для лучшего понимания сведем все возможные параметры в таблицу:
Краткая запись фоновых значений background:
Значение Пояснение Пример CSS
background-color Определяет цвет фона, который будет использоваться. По умолчанию прозрачный. background:red; 1
background-position Определяет позицию рисунка фона. По умолчанию левый верхний угол. background: 50% 50% repeat-x url('images/pattern02.gif'); 1
background-size Определяет размер рисунка фона. По умолчанию естественный размер. Пример не приводим 3
background-repeat Определяет, как повторять рисунок фона. По умолчанию повторяет по ширине и по высоте. background: repeat-y url('images/pattern02.gif'); 1
background-origin Определяет область позиционирования рисунка фона. Пример не приводим 3
background-clip Определяет область зарисовки рисунка фона. Пример не приводим 3
background-attachment Определяет, закреплен ли рисунок фона или должен перемещаться с остальными объектами страницы. По умолчанию - должен перемещаться. background: no-repeat url('images/pattern03invert.gif') scroll; 1
background-image Определяет ОДИН рисунок фона (CSS 1) или БОЛЕЕ, чем один (CSS 3). background: repeat-x url('images/pattern02.gif'), repeat-y url('images/pattern03.gif'); 1 (3)
Обратите внимание, что любые значения можно опускать, тогда будут использованы значения по умолчанию.
Для закрепления теоретических знаний приводим вот такой пример со свойствами не выходя за границы CSS 2.1
background: #F0FFFF 50% 50% repeat-x url('images/pattern02.gif');




xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Таким образом, следующие свойства:
	background-image: url('images/tel.jpg');
	background-repeat:no-repeat;
	background-position:0% 100px; 
	background-attachment:fixed; 
можно преобразовать в одну строку:
background: 0% 100px no-repeat fixed url('images/tel.jpg');

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

Авторитеты спорят, какая запись более правильная:
background: 0% 100px no-repeat fixed url('images/tel.jpg');
background: url('images/tel.jpg') no-repeat fixed 0% 100px;

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

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_026_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_026_001.zip ← скачайте пример, чтобы установить на свой сайт...

***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: :: /


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

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p026.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑