Как задать цвет и фон на сайте с таблицей стилей css.

На этом уроке мы посмотрим как задать цвет и фон CSS на сайте. Научимся применять цвет и фон с помощью таблицей стилей ко всем страницам нашего сайта это на много удобней и эффективней чем мы уже рассматривали в html

1) Давайте посмотрим свойство COLOR его можно применить, если мы хотим выделить или придать различным элементам определённый цвет. Сейчас приведу пример как применить это свойство, например, к заголовку и параграфу сделаем чтоб наш заголовок был синего цвета а параграф зелёного.

Пример содержание файла style.css для свойства COLOR.


h2 {color: blue;}
p {color: green ;}


Смотрите у нас в браузере как мы и указали в файле style.css все заголовки второго уровня стали синими а параграфы зелёными.

цвет color в CSS

2) Свойство BACKGROUND-COLOR с ним мы можем придавать цвет для фона. Если мы с помощью COLOR придавали определенный цвет тексту, то здесь мы задаём цвет фону. В этом примере мы зададим жёлтый фон всей странице с помощью элемента BODY заголовку первого уровня зададим зелёный фоновый цвет, а заголовку второго уровня фоновый цвет тоже зададим зеленый, а цвет текста красным. Смотрим пример и ниже итог в браузере захваченный скриншотом.

Пример содержание файла style.css для свойства BACKGROUND-COLOR.


body {                                            
background-color : yellow;
}                                   
h1 {                                        
background-color : green ;
}                                   
h2 {                                        
color: red;                      
background-color : green ;
}                                    


Смотрите на скриншот всё получилось как мы и задали с помощью таблицы CSS в файла style.css.

background-color в CSS

3) Свойство BACKGROUND-IMAGE с его помощью мы можем добавлять фоновое изображение. Здесь мы тоже используем предыдущий пример и в элемент BODY поменяем строку. Смотрите в скобках нам надо указывать путь к изображению, если у вас изображение находится в одной папке со страницей то пишем имя и расширение картинки, а если в другой папке, то указываем путь к изображению. Если вы ещё не знаете, как это делается, то можете заглянуть сюда.

Пример содержание файла style.css для свойства BACKGROUND-IMAGE.


body {                                                                    
background-image : url(images/primer.gif) ;
}                                                           
h1 {                                                                
background-color : green ;                       
}                                                           
h2 {                                                                
color: red;                                              
background-color : green ;                        
}                                                           


Смотрите у нас в браузере как мы и указали в файле style.css весь фон страницы заполнилось изображением из за своих малых размеров оно повторяется. Так же мы можем задать фоновое изображение и к заголовку или параграфу, уменьшив или увеличив изображение.

Свойство background-image в CSS

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

Продолжаем изучать цвет и фон в CSS часть 2.
Вернуться к работе со шрифтом CSS.



Рейтинг@Mail.ru   Яндекс.Метрика