Курс CSS. Урок 26. Краткая запись фоновых свойств.
Точно также, как для свойств
Шрифт (font:),
Рамка (border:),
Список (list-style:)
для фоновых свойств элементов также можно использовать краткую запись:
background: color position size repeat origin clip attachment image;
Если отбросить свойства спецификации CSS 3, то такой:
background: color position repeat attachment image;
Для лучшего понимания сведем все возможные параметры в таблицу:
Обратите внимание, что любые значения можно опускать, тогда будут использованы значения по умолчанию.
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 3, полная запись синтаксиса будет такой:Фон (background):
[<'background-color'>||<'background-position'>||<'background-repeat'>||<'background-attachment'>||<'background-image'>]
background: color position size repeat origin clip attachment image;
Если отбросить свойства спецификации CSS 3, то такой:
background: color position repeat attachment image;
Для лучшего понимания сведем все возможные параметры в таблицу:
Значение | Пояснение | Пример | 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: #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 *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.