Свойства цвета и фона
Присвоение элементам цветовых и фоновых значения помогают создать зрелищную WEB-страницу. В CSS можно использовать множество свойств, которые придадут вашей странице требуемую привлекательность.
color
Определяет цвет текста.
Значение:
background-color
Определяет цвет фона.
Значение:
background-image
Определяет фоновое изображение элемента.
Значение:
background-repeat
Определяет направление, по которому экран будет заполняться копиями фонового изображения.
Значение:
background-attachment
Определяет, будет ли фоновое изображение зафиксировано в окне браузера или будет прокручиваться вместе с документом.
Значение:
background-position
Определяет положение изображения относительно верхнего левого угла содержащего его элемента. Одиночное значение устанавливает расстояние по горизонтали и вертикали. Смещение по умолчанию равно 50%. Возможно сочетание нескольких ключевых слов.
Значение:
background
Удобное свойство для установки сразу всех параметров фона. Если какие либо параметры будут пропущены, то берутся их значения по умолчанию.
Значение:
opacity
Свойство opacity устанавливает уровень прозрачности. Данное свойство является нововведением в CSS3 и на сегодняшний день поддерживается только браузерои Firefox (с приставкой –moz-) и Opera 9.
Значение:
Для браузера Opera 9
Присвоение элементам цветовых и фоновых значения помогают создать зрелищную WEB-страницу. В CSS можно использовать множество свойств, которые придадут вашей странице требуемую привлекательность.
color
Определяет цвет текста.
Значение:
- любое соответствующее стандарту значение цвета.
- inherit - применяется значение родительского элемента.
Код:
p{color:red}
p{color:rgb(255,0,0)}
p{color:#ff0000}
background-color
Определяет цвет фона.
Значение:
- любое соответствующее стандарту значение цвета.
- transparent - фон элемента делается прозрачным (по умолчанию).
- inherit - применяется значение родительского элемента.
Код:
body{background-color: black}
background-image
Определяет фоновое изображение элемента.
Значение:
- none - фоновое изображение не устанавливается.
- любое соответствующее стандарту значение URL фонового изображение.
- inherit - применяется значение родительского элемента.
Код:
h1{background-image: url(pictures.gif)}
background-repeat
Определяет направление, по которому экран будет заполняться копиями фонового изображения.
Значение:
- repeat - фоновое изображение повторяется по горизонтали и по ветикали (по умалчанию).
- repeat-x - фоновое изображение повторяется только по горизонтали.
- repeat-y - фоновое изображение повторяется только по вертикали.
- no-repeat - фоновое изображение не повторяется.
- inherit - применяется значение родительского элемента.
Код:
body {background-image: url(pictures.gif); background-repeat: repeat-x }
background-attachment
Определяет, будет ли фоновое изображение зафиксировано в окне браузера или будет прокручиваться вместе с документом.
Значение:
- scroll - фоновое изображение прокручивается вместе с документом (по умолчанию)
- fixed - фоновое изображение фиксируется в окне браузера.
- inherit - применяется значение родительского элемента.
Код:
body{background-image: url(pictures.gif); background-attachment: fixed;}
background-position
Определяет положение изображения относительно верхнего левого угла содержащего его элемента. Одиночное значение устанавливает расстояние по горизонтали и вертикали. Смещение по умолчанию равно 50%. Возможно сочетание нескольких ключевых слов.
Значение:
- Первое стандартное значение длины - расстояние по горизонтали от левого края элемента до изображения. Допускаются и отрицательные значения.
- Второе, соответствующее стандарту значение длины - расстояние по вертикали от левого края элемента до изображения. Допускаются и отрицательные значения.
- Первое, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображение от левого края по горизонтали к длине содержащего его элемента. Значение по умолчанию 0%, что равносильно верхнему левому углу.
- Второе, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображения от левого края по вертикали к высоте содержащего его элемента.
- top - размещение фонового изображение по верхнему краю
- center - размещение фонового изображение по центру содержащего его элемента.
- bottom - размещение фонового изображения по нижнему краю.
- left - размещение фонового изображение по левому краю.
- light - размещение фонового изображение по правому краю.
- inherit - применяется значение родительского элемента.
Код:
body {background-image : url(pictures.gif); background-position : center;}
background
Удобное свойство для установки сразу всех параметров фона. Если какие либо параметры будут пропущены, то берутся их значения по умолчанию.
Значение:
- background-color - значение цвета фона.
- background-image - значение фонового изображения.
- background-repeat - значение повторения фонового изображения.
- background-attachment - значение фиксации фонового изображения.
- background-position - значение положения фонового изображения.
- inherit - применяется значение родительского элемента.
Код:
body{background:black url(graf/bomba.jpg) center no-repeat;}
opacity
Свойство opacity устанавливает уровень прозрачности. Данное свойство является нововведением в CSS3 и на сегодняшний день поддерживается только браузерои Firefox (с приставкой –moz-) и Opera 9.
Значение:
- число от 0-1 – уровень прозрачности элемента.
- inherit - применяется значение родительского элемента.
Код:
div{-moz-opacity:0.5;}
Для браузера Opera 9
Код:
div{opacity:0.5;}
Вам необходимо зарегистрироваться для просмотра ссылок