Цвет и фон в CSS.



Цвет - color


Цвета в CSS указывают также как и в html. Свойство color задает цвет текста внутри элемента. Это свойство является наследуемым. Любая страница html представляет собой древо с вложенными элементами.


Наследование, это процесс при котором свойства родительского элемента передаются к дочерним элементам, даже если эти свойства не были чётко определены.

В нашем примере для элемента em предком является в первом случае p1;
для a предком является p2,
для p1 и p2 предком является div;
для div предком является body;
для body предком является HTML


Задать цвет можно тремя способами.


Пример записи кода:

body{ color:pink; } h1{ color:#7FBA33; } h2{ color:rgb(255,0,0); }

Для обозначения применяют именные цвета (pink), шестнадцатеричные коды цветов (#7FBA33) и десятичные коды цвета в модели RGB (rgb(255, 0, 0).

Фон - background


Фоновый фон можно задать не только для страницы, но и для таблиц, заголовков, параграфов, ссылок и др. В группу свойств background входят:

  • background-color определяет цвет фона элемента, по умолчанию не наследуется, но можно сделать наследуемым. Для этого имеется значение inherit, значение transparent устанавливает прозрачный фон.
    Пример записи кода:

    body{ background-color:#243CED; color:white; }

    РЕЗУЛЬТАТ В БРАУЗЕРЕ:

       ПРИМЕР

  • background-image устанавливает фоновое изображение для элемента. Правило написания свойства обозначается функцией url, а затем в круглых скобках указывается путь к файлу.
    Пример записи кода:

    body{ background-image:url(../imgCSS/S.jpg); background-repeat: repeat; }

    РЕЗУЛЬТАТ В БРАУЗЕРЕ:

       ПРИМЕР


  • background-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Как видите, фоновое изображение по умолчанию повторяется по вертикали и по горизонтали до полного заполнения страницы. Контролировать повторение можно с помощь background-repeat.
    Свойство может принимать следующие значения:

       Background-repeat: repeat-x ;   повторяет по горизонтали   Пример
       Background-repeat: repeat-y ;   повторяет по вертикали   Пример
       Background-repeat: repeat ;   повторяет по горизонтали
       и по вертикали (по умолчанию)
       Пример
       Background-repeat: no-repeat ;   не повторяется   Пример


  • background-attachment При наличии фонового рисунка данное свойство предписывает: будет ли фоновое изображение прокручиваться вместе со страницей или будет неподвижным.
    Оно может принимать два значения:


  • Пример записи кода:

    body{ background-image:url(../imgCSS/S.jpg); background-repeat: no-repeat; background-attachment: scroll ; }

    РЕЗУЛЬТАТ В БРАУЗЕРЕ:

       ПРИМЕР


    Пример записи кода:

    body{ background-image:url(../imgCSS/S.jpg); background-repeat: no-repeat; background-attachment: fixed ; }

    РЕЗУЛЬТАТ В БРАУЗЕРЕ:

       ПРИМЕР


  • background-position задает расположение фонового изображения относительно браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Точкой отсчета берется верхний левый угол браузера ( здесь по умолчанию располагается изображение).
    Пример: background-position:20%  60%;. При обозначении сначала указывают значение по горизонтали, затем пробел и значение по вертикали.
    Положение может задаваться ключевыми словами.

    • left  -слева
    • right  -справа
    • center  -центр
    • top   -сверху
    • bottom  -снизу

    Таблица комбинации значений

      Полное значение  Краткое значениеРасположение
       left top   в левом верхнем углу
       left center   left   с левой стороны по центру
       left bottom   в левом нижнем углу
       center top   top   по центру сверху
       center center   center   по центру
       center bottom   bottom   по центру снизу
       right top   в правом верхнем углу
       right center   right   справа по центру
       right bottom   в правом нижнем углу

    Пример записи кода:

    body{ background-image:url(../imgCSS/S.jpg); background-repeat: no-repeat; background-position:20% 10%; }

    РЕЗУЛЬТАТ В БРАУЗЕРЕ:

       ПРИМЕР


    Пример записи кода:

    body{ background-image:url(../imgCSS/S.jpg); background-repeat: no-repeat; background-position: top right; }

    РЕЗУЛЬТАТ В БРАУЗЕРЕ:

       ПРИМЕР


    Пример записи кода:

    body{ background-image:url(../imgCSS/S.jpg); background-repeat: no-repeat; background-position: 300px 500px ; }

    РЕЗУЛЬТАТ В БРАУЗЕРЕ:

       ПРИМЕР


Сокращенная запись свойства background


Для многих свойств в CSS применяют сокращенную запись. Как правило все свойства перечисляются в произвольном порядке через пробел.
Пример записи кода:

background-image:url(../imgCSS/S.jpg) no-repeat #33CCFF center top; background-position: 300px 500px ;

Далее рассмотрим: Шрифты в CSS