Язык CSS
Свойства - color (цвет) и background (фон).
Цвет – color
Свойство color задает цвет текста внутри элемента. Свойство color является наследуемым.
Попробуем на практике.
Создадим html-документ со следующими элементами: заголовок h1, параграф и просто текст (материал из документа “СSS Урок 4 Материал для практического задания.doc”). Зададим стиль для элемента body:
body{
color:green}
Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать свой стиль. Например, сделаем цвет заголовка h1 красным:
h1{
color:red}
Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего "предка" - элемента body.
Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента "предка". Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано.
Дерево элементов - структура всех элементов html-страницы, отражающая их вложенность друг в друга.
Схематично дерево элементов для нашего примера выглядит так:
В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.
Значениями свойства color могут быть именные цвета (red, blue...), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)).
Итак, задать цвет текста для элемента можно тремя способами:
body{
color:green}
h1{
color:#FF0000}
h2{
color:rgb(255,0,0)}
Фон - background
На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу.
Рассмотрим группу свойств background:
background-color - задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения (не у body) указать значение inherit.
Попробуем на практике.
body{
background-color:#243CED;
color:yellow}
Проверьте результат в браузере.
background-image - задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу (в имени файла использовать только английские буквы и не использовать пробелы). Путь к файлу указывается относительно таблицы стилей.
Попробуем на практике. Графику к тексту взять из “СSS Урок 4 Материал для практического задания.doc”, в графическом редакторе сохранить как “ riba.gif ”:
body{
background-image:url(riba.gif);
background-color:#243CED;
color:yellow}
h1{
color:#bd0707}
Проверьте результат в браузере.
Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое изображение будет лежать поверх фонового цвета.
background-repeat - задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:
repeat - повторять изображение по горизонтали и вертикали;
repeat-x - повторять изображение только по горизонтали;
repeat-y - повторять изображение только по вертикали;
no-repeat - не повторять изображение.По умолчанию используется значение repeat, как мы и убедились в предыдущем примере.
Практическое задание: Проверить все варианты, как ведут себя остальные значения background-repeat.
background-attachment - указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:
scroll - фон прокручивается вместе с текстом. Это значение используется по умолчанию;
fixed - фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.
Практическое задание: Проверить вариант, как ведет себя значение fixed.
Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.
background-position - задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов.
Попробуем на практике.
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:10% 30%;
color:yellow}
Проверьте результат в браузере. Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали.
Следует заметить, что это свойство по-разному воспринимается разными браузерами (разные размеры отступов). Этой проблемы можно избежать, задавая размер в пикселах:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:150px 150px;
color:yellow}
Проверьте результат в браузере. Левый верхний угол изображения будет смещен на 150 пикселов по горизонтали и на 150 пикселов по вертикали.
Попробуем такой вариант:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:center top;
color:yellow}
Проверьте результат в браузере. Изображение будет выровнено по горизонтали - по центру, а по вертикали - по верхнему краю страницы.
Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова:
left - по левому краю;
center - по центру;
right - по правому краю.
Для выравнивания по вертикали (второй параметр):
top - по верхнему краю;
center - по центру;
bottom - по нижнему краю.
Сокращенная запись свойства background
В CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке. Например, для последнего примера сокращенная запись будет выглядеть так:
Попробуем на практике.
body{
background:url(picture.gif) no-repeat #33CCFF center top; color:yellow}
Мы рассмотрели свойства цвета и фона. Их можно применять ко всем элементам.
Практическое задание: задайте фон для заголовка и параграфа, «причешите» дизайн страницы.
Источники:
| ← Язык CSS. Псевдоэлементы и псевдоклассы. | Язык CSS. Шрифты и их свойства. → |