HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS
Цвета RGB Шестнадцатеричный ВШЛ
CSS-фоны
Фоновый цвет Фоновая картинка Повторение фона Фоновое приложение Фоновая стенография
CSS границы
Границы Ширина рамки Цвет границы Пограничные стороны Пограничная стенография Закругленные границы
CSS поля
Поля Свернуть поля
CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS
Контур Ширина контура Цвет контура Контурная стенография Смещение контура
CSS-текст
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-шрифты
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-иконки CSS-ссылки CSS-списки CSS-таблицы
Table Borders Table Size Table Alignment Table Style Table Responsive
Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS
Float Clear Float Examples
Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS
Navbar Vertical Navbar Horizontal Navbar
Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты
Linear Gradients Radial Gradients Conic Gradients
CSS-тени
Shadow Effects Box Shadow
Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Сокращение фона CSS

❮ Предыдущий Следующий ❯

Фон CSS — сокращенное свойство

Чтобы сократить код, также можно указать все свойства фона в одном свойстве. Это называется сокращенным свойством.

Вместо того, чтобы писать:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Вы можете использовать сокращенное свойство background:

Пример

Используйте сокращенное свойство, чтобы установить свойства фона в одном объявлении:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

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

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

Не имеет значения, если одно из значений свойства отсутствует, пока остальные находятся в этом порядке. Обратите внимание, что в приведенных выше примерах мы не используем свойство background-attachment, так как оно не имеет значения.

Проверьте себя с помощью упражнений

Упражнение:

Установите цвет фона элемента <h1> на «голубой».

<style>
h1 {
  : lightblue;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Все свойства фона CSS

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image(s) is/are positioned
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)

❮ Предыдущий Следующий ❯