Фон и цвет в CSS.
Данное занятие будет, посвящается цветам и фонам в CSS . Вы сразу же заметите на сколько эффективнее это работает, нежели в html.
Важно помнить: все цвета в CSS указываются таким же образом, как и в html. К примеру вы можете указывать шестнадцатиричное значение типа #ff3355, или же просто написать название цвета (red, green, blue и прочие.)
Основные свойства фона и цвета в CSS:
Давайте теперь разберемся подробнее и по порядку:
Свойство COLOR
Давайте зададим цвет переднего плана того или иного документа. К примеру, если же мы хотим сделать цвет всех заголовков первого уровня черным, а цвет текста параграфов синим, то таблица стилей будет выглядеть так:
H1 {
color: red;
}
P {
color: green;
}- Посмотреть пример
Отвечает за фоновый цвет вашего элемента. Отличается от html тем, что в CSS , фоновый цвет можно задать для таблиц, заголовков, параграфов, ссылок и др., а не для одного конкретного предмета. Важно сразу определить, что нам нужно.
К примеру для изменения фонового цвета всей страниц, нужно задать это свойство для элемента BODY – ведь именно он отвечает за тело документа , а именно за всю страницу.
BODY {
background-color:#FFEE3C;
}
H1 {
color: red ;
background-color:green;
}
P {
color: black ;
}Так же само можно задать фоновый цвет и параграфам. Попробуйте поэкспериментировать для закрепления урока.
Свойство BACKGROUND-IMAGE
Данным свойством будем задавать фоновое изображение. Ниже я укажу фоновое изображение для моей страницы, т.е. для элемента BODY.
BODY {
background-color : #FFEE3C ;
background-image : url(smile.png);
}
H1 {
color: green;
background-color :red;
}
P {
color: blue;
}Если вы заметили, то в значении свойства мы указываем путь к файлу изображения, немного отличается от html. Сначала пишем URL а после сразу же, Без пробелов!!! в круглых скобках положение картинки. Если же она расположена в той же папке, то просто прописываем имя изображения, как указано на примере выше. Если допустим в подпапке img , то пишем так url(img/smile.png). Тут ничего сложного.
Фоновое изображение в CSS можно задать для любого из элементов, не только для таблиц и всей страницы. Вверху, две картинки смайлика – большая и маленькая. Сохраните их себе на компьютер и потренируйтесь с ними. Установите большой смайл как фон всей страницы, а маленький на фон заголовка первого уровня.
Для сохранений нажмите правой кнопкой на картине и выберите «Сохранить рисунок».
Свойство BACKGROUND-REPEAT
Я думаю вы заметили, что фоновое изображение по-умолчанию дублируется и повторяется, начиная с верхнего левого угла, как по вертикали , так и по горизонтали, и так пока не закроет весь экран. Именно с помощью свойства background-repeat мы будем контролировать эти повторения.
У этого свойства есть четыре значения:
| Background-repeat: repeat-x ; | повторение по горизонтали | Посмотреть пример |
| Background-repeat: repeat-y ; | повторение по вертикали | Посмотреть пример |
| Background-repeat: repeat ; | по вертикали и по горизонтали(значение по-умолчанию) | Посмотреть пример |
| Background-repeat: no-repeat ; | не повторяется | Посмотреть пример |
Это полезное свойство, в html ему аналогов нет.
Пример записи стиля:
BODY {
background-image : url(smile.png) ;
background-repeat: repeat-x;
}Если свойство не указать, то оно будет использоваться по-умолчанию – фоновое изображение будет повторяться по вертикали и по горизонтали.
Свойство BACKGROUND-ATTACHMENT
Если у вас установлен фоновый рисунок, то данной свойство отвечает за то, будет ли рисунок неподвижен при прокручивании страницы, или же будет прокручиваться вместе с ней. Принимает два значения:
SCROLL - фон прокручивается вместе с содержимым;
FIXED – фон строго зафиксирован.
BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
}BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed ;
}Значение по умолчанию – scroll , если это свойство не прописать, то фон будет прокручиваться вместе с содержимым, как указано в первом примере.
С этим вам все понятно? Сложного ничего нет, пробуйте. Попытайтесь сделать так, чтобы фон, например, размножался по горизонтали, и прокручивался вместе со страницей.
Свойство BACKGROUND-POSITION
Задает позицию фонового изображения. Значение задается в единицах длины, в процентах и в ключевых словах. Отсчет начинается с верхнего левого угла браузера, там же по умолчанию и располагается фоновый рисунок. На рисунке приведены примеры позиционирования (точка это типа изображение, а то что под ней – примерные координаты)
Сначала необходимо указать координаты по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можем задавать как в процентах, так и в пикселях. Можно так же в сантиметрах, но я бы вам не советовал этого делать.
Эти же положения можно задавать специальными словами:
left – лево, right – право, center -центр, top – верх, bottom – низ . Смотрите рисунок:
Примеры стилей:
BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: top right;
}BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: 400px 600px ;
}BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: 55% 35%;
}
Сокращенная форма записи – BACKGROUND
Свойство BACKGROUND служит для сокращенной записи всех выше расмотренных свойств.
Порядок свойств этого элемента таков:
background-color_background-image_background-repeat_background-attachment _background-position
Как мы видим, просто записывается пять значений свойств через пробел. На примере ниже все будет понятно:
То, что записано так:
BODY {
background-color:#ffee3c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}Можно записать и в одной строке:
BODY {
background:#ffee3c url(smile.png) no-repeat fixed top right;
}Как вы заметили, все значения свойств пишутся только чрез пробел. Если вы не укажите хотя бы одно из свойств, то ему автоматически присвоится значение по- умолчанию.
Тут все просто, немного попрактикуетесь и все поймете!
