СSS – Цвет и фон

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

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

«Color»

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

Синтаксис

Color: цвет

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

P {

color: green;

}

Результат:

 Свойство color

«background-color»

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

Синтаксис

background-color: цвет

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

P {

background-color: green;

color: red;

}

Результат

 background-color

«background-image»

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

Синтаксис

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

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

body {

background-image: url(/rss.png);

}

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

 background-image

«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-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-position

 

«background»

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

Синтаксис

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

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

body {

background-image: url(/rss.png);

Background-repeat: repeat-x

}

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

body {

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

}

Результат аналогичный.

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

Автор блога https://delajblog.ru/

Добавить комментарий

Ваш e-mail не будет опубликован.