First Of Hack

Объявление

НАШ НОВЫЙ САЙТ http://xakz.org ЗАХОДИТЕ, РЕГИСТРИРУЙТЕ, Т.К. ЭТОГО ФОРУМА БОЛЬШЕ НЕ БУДЕТ!

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » First Of Hack » HTML / CSS » Цвет и фон

Цвет и фон

Страница: 1

Сообщений 1 страница 7 из 7

1

  • Автор: Chupa
  • Администратор
  • Chupa
  • Откуда: London
  • Зарегистрирован: 2008-06-25
  • Приглашений: 0
  • Сообщений: 65535
  • Уважение: +37
  • Позитив: +7
  • Пол: Мужской
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2011-02-28 15:03:51

BACKGROUND

Описание

Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Синтаксис

background-attachment: fixed | scroll
Аргументы

Значение fixed делает фоновое изображение элемента неподвижным, scroll — позволяет перемещаться фону вместе с содержимым.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-attachment</title>
<style type="text/css">
BODY {
background-image: url('images/sample.gif'); /* Путь к фоновому изображению */
background-attachment: fixed; /* Фиксируем фон веб-страницы */
}
</style>
</head>
<body> <table>
<tr>
<td style="height:2000px">
&nbsp;
</td>
</tr>
</table>
</body>
</html>
Объектная модель

[window.]document.getElementById("elementID").style.backgro undAttachment
Замечание

Если фон устанавливается для слоя, то в браузере Opera и Firefox параметр background-attachment не действует, фоновый рисунок остается фиксированным, независимо от значения.

0

2

  • Автор: Chupa
  • Администратор
  • Chupa
  • Откуда: London
  • Зарегистрирован: 2008-06-25
  • Приглашений: 0
  • Сообщений: 65535
  • Уважение: +37
  • Позитив: +7
  • Пол: Мужской
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2011-02-28 15:03:51

Background-attachment

Описание

Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Синтаксис

background-attachment: fixed | scroll
Аргументы

Значение fixed делает фоновое изображение элемента неподвижным, scroll — позволяет перемещаться фону вместе с содержимым.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-attachment</title>
<style type="text/css">
BODY {
background-image: url('images/sample.gif'); /* Путь к фоновому изображению */
background-attachment: fixed; /* Фиксируем фон веб-страницы */
}
</style>
</head>
<body> <table>
<tr>
<td style="height:2000px">
&nbsp;
</td>
</tr>
</table>
</body>
</html>
Объектная модель

[window.]document.getElementById("elementID").style.backgro undAttachment
Замечание

Если фон устанавливается для слоя, то в браузере Opera и Firefox параметр background-attachment не действует, фоновый рисунок остается фиксированным, независимо от значения.

0

3

  • Автор: Chupa
  • Администратор
  • Chupa
  • Откуда: London
  • Зарегистрирован: 2008-06-25
  • Приглашений: 0
  • Сообщений: 65535
  • Уважение: +37
  • Позитив: +7
  • Пол: Мужской
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2011-02-28 15:03:51

background-color
Описание

Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.
Синтаксис

background-color: цвет | transparent
Аргументы

Значение цвета можно задавать тремя способами.
1. По его названию

Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.
Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-color</title>
<style type="text/css">
BODY {
background-color: #3366CC; /* Цвет фона веб-страницы */
}
H1 {
background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */
}
P {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: white; /* Цвет текста */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

0

4

  • Автор: Chupa
  • Администратор
  • Chupa
  • Откуда: London
  • Зарегистрирован: 2008-06-25
  • Приглашений: 0
  • Сообщений: 65535
  • Уважение: +37
  • Позитив: +7
  • Пол: Мужской
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2011-02-28 15:03:51

background-image
Описание

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
Синтаксис

background-image: url(путь к файлу) | none
Аргументы

В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. Когда фоновое изображение не требуется, аргумент может принимать значение none.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-image</title>
<style type="text/css">
BODY {
background-image: url('images/bg.gif'); /* Путь к фоновому изображению */
background-color: #fc0; /* Цвет фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

0

5

  • Автор: Chupa
  • Администратор
  • Chupa
  • Откуда: London
  • Зарегистрирован: 2008-06-25
  • Приглашений: 0
  • Сообщений: 65535
  • Уважение: +37
  • Позитив: +7
  • Пол: Мужской
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2011-02-28 15:03:51

background-position
Описание

Задает начальное положение фонового изображения, установленного с помощью параметра background-image.
Синтаксис

background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]
Аргументы

У этого параметра два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-position</title>
<style type="text/css">
BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: no-repeat; /* Отменяем повторение фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

0

6

  • Автор: Chupa
  • Администратор
  • Chupa
  • Откуда: London
  • Зарегистрирован: 2008-06-25
  • Приглашений: 0
  • Сообщений: 65535
  • Уважение: +37
  • Позитив: +7
  • Пол: Мужской
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2011-02-28 15:03:51

background-repeat
Описание

Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Синтаксис

background-repeat: no-repeat | repeat | repeat-x | repeat-y
Аргументы

no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу).repeatФоновое изображение повторяется по горизонтали и вертикали.repeat-xФоновый рисунок повторяется только по горизонталиrepeat-yФоновый рисунок повторяется только по вертикали
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-repeat</title>
<style type="text/css">
BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: repeat-y; /* Повторяем фон по вертикали */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

0

7

  • Автор: Chupa
  • Администратор
  • Chupa
  • Откуда: London
  • Зарегистрирован: 2008-06-25
  • Приглашений: 0
  • Сообщений: 65535
  • Уважение: +37
  • Позитив: +7
  • Пол: Мужской
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2011-02-28 15:03:51

color
Описание

Определяет цвет текста элемента.
Синтаксис

color: значение
Аргументы

Значение цвета можно задавать тремя способами.
1. По его названию

Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>color</title>
<style type="text/css">
.letter {
color: red; /* Цвет символа */
font-size: 200%; /* Размер шрифта */
}

P {
color: RGB(49, 151, 116); /* Цвет текста */
}
</style>
</head>
<body>

<p><span class="letter">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p><span class="letter">U</span>t wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

0

Страница: 1

Вы здесь » First Of Hack » HTML / CSS » Цвет и фон