Содержание
В CSS (Каскадные таблицы стилей) можно задавать цвет и фон элементов с помощью свойств:
- Color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
«Color»
Определяет цвет текста элемента.
Синтаксис
Color: цвет
Например, сделаем текст параграфа зелёным. Цвет можно задавать как названием цвета, так и шестнадцатеричным значением (#00FF00)
P {
color: green;
}
Результат:
«background-color»
Определяет цвет фона элемента.
Синтаксис
background-color: цвет
Например, сделаем текст красным, а фон параграфа теста зелёным.
P {
background-color: green;
color: red;
}
Результат
«background-image»
Определяет фоновое изображение для элемента.
Синтаксис
background-image: url(путь к файлу)
Например, сделаем фон веб-страницы с картинкой из RSS.Для этого прописываем правило для тега BODY
body {
background-image: url(/rss.png);
}
Результат – вся страница залита повторяющимися изображениями загруженного рисунка.
«background-repeat»
Определяет, как будет меняться фоновое изображение (по горизонтали, по вертикали или в обе стороны), установленное свойством background-image.
Синтаксис
Background-repeat: repeat-x Рисунок повторяется по горизонтали
background-repeat: repeat-y Рисунок повторяется по вертикали
background-repeat: repeat Рисунок повторяется по горизонтали и вертикали background-repeat: no-repeat Рисунок не повторяется
Например, сделаем так, чтобы рисунок повторялся только по горизонтали.
body {
background-image: url(/rss.png);
Background-repeat: repeat-x
}
Результат
«background-attachment»
Определяет, будет или нет прокручиваться фоновое изображение вместе с картинкой или нет.
Синтаксис
Background-attachment: scroll Изображение прокручивается вместе со страницей — разблокировано
Background-attachment: fixed Изображение блокировано
Например, сделаем так, чтобы картинка была фиксированной (как бы мы не прокручивали страницу – картинка будет всегда виден).
body {
background-image: url(/rss.png);
Background-attachment: fixed
}
«background-position»
Определяет начальное положение картинки, установленной с помощью свойства background-image. Начальное положение задаётся с помощью координат. Например, значение «120px 200px» располагает картинку на 120 пикселей слева и на 200 пикселей сверху в окне браузера. Допускается задание координат: в процентах, пикселях, сантиметрах, а также ключевыми словами. Положение по горизонтали — left, center, right. Положение по вертикали — top, center, bottom.
Синтаксис
background-position: координаты
Например, расположим фоновую картинку слева вверху.
body {
background-image: url(/rss.png);
background-repeat: no-repeat;
background-position: top left;
}
Результат
«background»
Позволяет записать в сокращенном виде все вышеперечисленные свойства.
Синтаксис
background: перечисление свойств (перечисление через пробел)
Например, сделаем так, чтобы рисунок повторялся только по горизонтали. Вариант рассмотренный ранее
body {
background-image: url(/rss.png);
Background-repeat: repeat-x
}
А теперь применим сокращенную запись свойства background
body {
background: url(/rss.png) repeat-x;
}
Результат аналогичный.
Таким образом, в СCS можно легко менять цвет и фон веб-страницы.
Автор блога https://delajblog.ru/
