Урок №4. CSS – цвет и фон.

В данном уроке разберем следующее:

CSS – цвет.
CSS – фон.
Сокращенная запись.

 


 

В предыдущих уроках все примеры были построены вокруг цвета текста и фона самого документа.
В этом уроке мы разберем в деталях цвет и фон.

CSS – цвет

Цвет текста в CSS задается с помощью свойства color.

Свойство color передается так сказать «по наследству». Сейчас все поймете. Допустим, у нас есть документ со следующим содержимым:

   <html>

     <head>

       <title>css - цвет</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <h1>Заголовок первого уровня</h1>

       <p>В этом параграфе содержится самый обычный текст.</p>

       Здесь просто текст.      </body>

   </html>

 

В таблицу стилей запишем следующее правило:

body{

  color:red;

}

 

С помощью этого правила, весь текст на странице будет по умолчанию красного цвета. Если необходимо изменить цвет текста внутри какого-то элемента, необходимо прописать еще одно правило:

body{

  color:red;

}

h1{

  color:gold;

}

 

Теперь цвет всех заголовков первого уровня будет золотистым. Потому что прописано правило color для всех заголовков h1.

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

Исходя из выше прописанного кода видно, что для тегов h1 и p родителем является тег body, так как они прописаны внутри. Соответственно тег body прописан внутри тега html и является для него ребёнком. Думаю, структуру Вы уловили.

Значением для свойства color могут являться цвета, прописаны словами на английском языке (pink, gold, red, black…), шестнадцатеричные коды цветов (#AF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)).

На примере показан каждый из способов:

h1{

  color:red;

}

h2{

  color:#FF0000;

}

h1{

  color:rgb(255;0;0);

}

 

 


 

CSS – фон.

Фон в CSS это уникальная штука. С его помощью можно задавать фон не только всего документа, но и заголовков, блоков, параграфов, да и всех блочных элементов.

Фон задается с помощью свойства background + определитель фона(цвет, картинка):

Пример HTML:

   <html>

     <head>

       <title>css фон</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       Урок №4. Фон задать легко, попробуйте!

     </body>

   </html>

 

Давайте в качестве фона используем синий цвет. Сделать это можно с помощью свойства – background-color.

background-color – определяет цвет фона.

Пример CSS:

body{

  background-color:blue;

  color:red;

}

 

Вот такой вид сейчас имеет наша страница:

Пример свойства background-color

 

А попробуем в качестве фона, какую то картинку, например картинку льва.

Сделать это можно с помощью свойства – background-image.

background-image – задает фоновое изображение. Значением свойства является ссылка на место хранения изображения. Путь к файлу задается относительно места хранения таблицы стилей.

Пример:

body{

  background-image:url(picture.png);

  background-color:blue;

  color:red;

}

 

Сейчас наша страница выглядит вот так:

Пример свойства background-image

 

Обратите внимание, что в данном случае картинка размещена в одной папке с таблицей стилей.

Еще Вы, наверное, заметили, что было задано как фон, так и фоновое изображение. Это делается в тех случаях, когда по каким либо причинам не удается подгрузить картинку, в таком случае она заменяется фоновым цветом. При корректной работе сайта, фоновое изображение будет поверх фона.

Разберем еще парочку background-тегов:

Background-repeat – определяет возможность повторения изображения на странице. Простыми словами, свойство определяет повторять ли картинку на странице и если да, то как? Имеет 4 значения:

    repeat – повторяет изображения во всех направлениях. Используется по умолчанию.

    repeat-x – повтор изображения только по горизонтали.

    repeat-y – повтор изображения только по вертикали.

    no-repeat – не повторяет изображения.

Пример no-repeat:

body{

  background-image:url(picture.png);

  background-repeat:no-repeat;

  background-color:blue;

  color:red;

}

 

Результат:

Пример свойства no-repeat

 

Пример repeat-y:

body{

  background-image:url(picture.png);

  background-repeat:repeat-y;

  background-color:blue;

  color:red;

}

 

Что бы увидить разницу, добавьте больше текста на страницу, что бы появился скроллбар.

Результат:

Пример свойства repeat-y

 

Пример repeat-x:

body{

  background-image:url(picture.png);

  background-repeat:repeat-x;

  background-color:blue;

  color:red;

}

 

Результат:

Пример свойства repeat-x

 

 

Background-attachment – определяет, будет ли прокручиваться изображение вместе с текстом или будет неподвижно. Принимает два значения:

    scroll – прокручивается вместе с текстом. Данное значение используется по умолчанию.

    fixed – картинка зафиксирована по отношению к тексту.

Пример:

body{

  background-image:url(picture.png);

  background-repeat:no-repeat;

  background-attachment:fixed;

  background-color:blue;

  color:red;

}

 

Помните, что зафиксированное изображения не очень привычно смотрится и раздражает глаз. Если и применять, то только в обосновано нужных случаях.

 

Background-position – данное свойство задает позицию элемента относительно браузера. Задается в процентах, в единицах длины, словами.

Проценты:

body{

  background-image:url(picture.png);

  background-repeat:no-repeat;

  background-attachment:fixed;

  background-color:blue;

  background-position:15% 35%;

  color:red;

}

 

Отсчет будет производиться от левого верхнего угла картинки. То есть, картинка будет смещена на 15% от левого верхнего угла по горизонтали и на 35% от высоты окна по вертикали.

Возьмите себе на вооружения то, что при процентных величинах в каждом браузере ваша страница будет выглядеть по-разному.

Поэтому, лучше использовать пиксели:

body{

  background-image:url(picture.png);

  background-repeat:no-repeat;

  background-attachment:fixed;

  background-color:blue;

  background-position:35px 35px;

  color:red;

}

 

Левый угол смещен на 35 пикселей по горизонтали и на 35 по вертикали. Все так же, как и с процентами.

Также можно позиционировать с помощью слов, но это достаточно грубо и неточно.

Возможны значения:

      По горизонтали:

Left – по левому краю.

Center – по центру.

Right – по правому краю.

      По вертикали:

Top – по верхнему краю.

Center – по центру.

Bottom – по нижнему краю.

Пример:

body{

  background-image:url(picture.png);

  background-repeat:no-repeat;

  background-attachment:fixed;

  background-color:blue;

  background-position:right bottom;

  color:red;

}

 

Изображение выровнено по горизонтали – по правому краю, вертикаль – по нижнему краю

 


 

Сокращенная запись

Как то слишком много бэкграундов, есть вероятность запутаться в коде.

Для таких случаев и придумали сокращенную запись:

body{

  background:url(picture.gif) no-repeat #24CCFF right bottom;

  color:red;

}

 

Вот и все. Помните, что цвет и фон можно применять к любым элементам. Практикуйтесь, экспериментируйте и у вас все получится.

До встречи на следующем уроке.

Закрыть меню