В этой статье мы постараемся рассказать как задаётся фон сайту, а так же цвета отдельных элементов и блоков сайта.
Основными свойствами можно задавать цвета: тексту, фону текста, фону изображений, фону блока, менять цвета рамок и т.д.
Цвета в CSS прописываются как шестнадцатеричным значением, так и просто названием. Но шестнадцатеричное значение позволяет более точно подобрать нужный вам цвет. Пример шестнадцатеричного значения: #AB2348.
Основные свойства и как их применять:
COLOR
Это свойство задаёт цвет текста или элемента. К примеру, если Вы планируете все заголовки выделить красным цветом, а параграфы золотым, то в CSS это будет выглядеть следующим образом:
H1 {color: #FF0000}
P { color: #FFD700}
Для выбора нужного Вам цвета, просто спросите у яндекса: «цвета HTML», он вам предложит множество сервисов.
BACKGROUND-COLOR
Это свойство задаёт фон элемента, им можно задать фоновый цвет абсолютно любым элементам сайта. Так же можно использовать свойство BACKGROUND, оно задаёт фоновую картинку нужному элементу, если картинка не найдена по нужному адресу, то фон элемента будет прописанного вами цвета.
body{ background-color: #e8e8e8 } – в этом примере фон сайта будет серого цвета #e8e8e8.
body{ background-color: #e8e8e8 url(../img/bg.jpg) center top no-repeat} – в этом примере задан фон сайта, которым является картинка bg.jpg в папке img, если картинку из папки удалить, то фон сайта будет серого цвета #e8e8e8.
Пример совмещения первых двух свойств:
body{ background-color: #e8e8e8; color: #FF0000 } – в данном случае у вас получиться красный текст на сером фоне.
BACKGROUND-REPEAT
С помощью этого свойства можно контролировать количество повторений изображения по горизонтали и вертикали или вообще отключить повторение изображения. Если свойство не задано, то изображение будет повторяться в пределах блока или сайта.
Это свойство может принимать четыре значения:
Background-repeat: repeat-x ; - повторение по горизонтали
Background-repeat: repeat-y ; - повторение по вертикали
Background-repeat: repeat ; - по вертикали и по горизонтали (значение по-умолчанию)
Background-repeat: no-repeat ; - не повторяется
body{ background-image: url(../img/bg.jpg) repeat-x} – в данном случае фоновое изображение будет повторяться только по горизонтали.
BACKGROUND-ATTACHMENT
Этим свойством можно зафиксировать фоновое изображение на экране, другими словами если вы будете упускаться в низ сайта, то фон будет не подвижен. Может иметь только два значения:
- SCROLL - фон прокручивается вместе с содержимым;
- FIXED - фон строго зафиксирован.
По умолчанию (если свойство не прописано, то фон будет перемещаться вместе с контекстов сайта).
Пример:
body{background-image : url(img/bg.png); background-repeat: no-repeat; background-attachment: scroll;} - фон прокручивается вместе с содержимым;
body {background-image : url(img/bg.png); background-repeat: no-repeat; } - фон прокручивается вместе с содержимым;
body {background-image : url(img/bg.png); background-repeat: no-repeat; background-attachment: scroll;} - фон строго зафиксирован;
BACKGROUND-POSITION
Данное свойство позволяет расположить картинку в нужном месте на экране. Расположение можно прописать в пикселях или процентах, отсчёт начинается с верхнего левого угла.
Рекомендуем прописывать в процентах, так как размеры монитора у всех разные и при пиксельном позиционировании расположение вашей картинки на всех мониторах будет разное.
body {background-image : url(img/bg.png); background-repeat: no-repeat; background-position: 300px 500px;} – в данном случае изображение (точнее его верхний левый угол) будет на 300 пикселей правее и на 500 пикселей ниже краёв экрана.
body {background-image : url(img/bg.png); background-repeat: no-repeat; background-position: 50% 10%;} – в данном случае изображение (точнее его верхний левый угол) будет по центру (горизонтально) и на 10% ниже в зависимости от размеров экрана.
Стоит запомнить, что в начале всегда пишется горизонтальное, а потом вертикальное позиционирование.
BACKGROUND
Это свойство предназначено для сокращения всех вышеупомянутых свойств.
body {
background-color:#е8е8е8 ;
background-image : url(../img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 30%;}
body {background: #e8e8e8 url(../img/bg.jpg) no-repeat fixed 50% 30% ;}
Рекомендуем использовать все возможные сокращения, так количество строк в вашем CSS файле будет влиять на вес CSS файла, а следовательно и на скорость загрузки Вашего сайта!!!
- Основы CSS
- Что такое CSS
- Как подключить таблицу CSS к документу HTML
- Синтаксис CSS
- Фон и цвет в CSS
- Шрифты в CSS
- Текст в CSS
- Списки в CSS
- Ссылки в CSS
- Типы селекторов в CSS
- Блоковая модель в CSS
- Рамки в CSS
- Поля и отступы в CSS
- Высота и ширина в CSS
- Позиционирование блоков
- Плавающие блоки
- Слои в CSS
- Заключение, правильное написание, образцы.