Фиксация фонового изображения.

Если на странице или в каком либо блоке присутствует полоса прокрутки, то фоновое изображение будет прокручиваться вместе с остальным содержанием данного блока.

Зафиксировать фоновое изображение позволяет свойство background-attachment, которое может принимать одно из двух значений:

fixed - фиксированный фон.

scroll - подвижный фон (по умолчанию).

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Фиксация фонового изображения< /title>
< style type=" text/css" >
body{
background-image: url(fon.jpg);
background-attachment: fixed;
}
h1{
color: #0000ff;
font: bold 28px;
}
div{
line-height: 2;
white-space: pre;
color: #0000ff;
font-size: 24px;
}
< /style>
< /head>
< body>
< h1> Песенка мамонтенка< /h1>
< div>
По синему морю, к зелёной земле
Плыву я на белом своём корабле.
.........
.........
Музыка: В. Шаинский
Слова: Д. Непомнящий
< /div>
< /body>
< /html>

Повторение фонового изображения.

Как уже говорилось выше, если рисунок не заполняет собой весь фон элемента, то он повторяется и выкладывается " плиткой". Свойство background-repeat - регулирует повторение фонового изображения.

Возможные значения:

no-repeat - запретить повторение, показать только одно изображение.

repeat - повторять изображение (по умолчанию).

repeat-x - повторять только по горизонтали.

repeat-y - повторять только по вертикали.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Повторение фонового изображения< /title>
< /head>
< body style=" background-image: url(fon.jpg); background-repeat: repeat-x " >
< samp style=" background-color: #ffffff" > Изображение повторяется только по оси х.< /samp>
< /body>
< /html>

Позиция фонового изображения.

При помощи CSS свойства background-position - можно управлять позицией фонового изображения в элементах где оно задано с помощью background-image.

Позицию фонового изображения, а точнее его верхнего левого угла, можно задать в процентах, пикселях, а также любых других единицах измерения CSS, с помощью двух значений, где первое значение будет являться отступом от левой границы элемента, а второе значение отступом от верхней границы элемента.

Например, запись: background-position: 200px 100px; будет обозначать, что фоновое изображение будет смещено по горизонтали на 200 пикселей от левой границы элемента и по вертикали на 100 пикселей от верхней границы элемента.

Так же можно использовать следующие значения:

по горизонтали:

left - расположить слева.

center - расположить по центру.

right - расположить справа.

по вертикали:

top - расположить сверху.

center - расположить по центру.

bottom - расположить снизу.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Позиция фонового изображения< /title>
< style type=" text/css" >
body{
background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: center 100px;
}
< /style>
< /head>
< body>
< samp> В этом примере фоновое изображение по горизонтали расположено по центру, а по вертикали в ста пикселях от верхней границы элемента.< /samp>
< /body>
< /html>

Background.

Ну и в довершении главы немного о базовом свойстве background.

Являясь базовым свойством, background может одновременно принимать те или иные значения от его дочерних свойств:

Background-attachment

Background-color

Background-image

Background-position

Background-repeat

Все эти свойства мы рассмотрели выше, так что вдаваться в подробности нет смысла..

Нужные значения дочерних свойств указываются через пробел, в любом порядке и по мере необходимости.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Background< /title>
< /head>
< body style=" background: url(fon.jpg) fixed repeat-x center " >
< p style=" background: red " > Фон этого параграфа такой же красный как если бы мы использовали background-color: red.< /p>
< p> А у элемента body в базовом свойстве background указанно сразу четыре возможных значения взятых от его дочерних свойств< /p>
< /body>
< /html>

Полезные советы:

При использовании изображения в качестве фона с помощью свойства background-image заодно заливайте фон альтернативным цветом с помощью background-color. Так если, по каким либо причинам, не загрузится фоновое изображение или же пользователь умышленно отключит в настройках браузера загрузку рисунков, фон элемента не останется " голым".

Не используйте большие весом " мегабайтные" изображения берегите время деньги и нервы пользователей.. А если уж без этого не обойтись, то перед тем как выкладывать такие изображения, как следует, поработайте с ней в графических редакторах на предмет " лишнего веса". Почти всегда можно значительно сжать картинку особо не проиграв в качестве изображения.

Глава 5

Границы элемента.

В этой главе мы поговорим о том, как сделать с помощью CSS рамку - бордюр, вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу) да и не всегда он мог решить ту или иную дизайнерскую задумку.

В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого(! ) элемента выводимого на экран.

Стиль границы.

Если в HTML бордюр мог быть только в виде сплошной линии вокруг элемента, то в CSS это уже достаточно широкий набор возможных стилей рамок.

Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.

none - граница отсутствует (по умолчанию).

dotted - граница из ряда точек.

dashed - пунктирная граница.

solid - сплошная граница

double - двойная граница

groove - граница " бороздка"

ridge - граница " гребень"

inset - вдавленная граница

outset - выдавленная граница

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Стиль границы< /title>
< style type=" text/css" >
p {
background-color: #f5f5f5;
text-align: center;
}
< /style>
< /head>
< body>
< p style=" border-style: none; " > граница отсутствует< /p>
< p style=" border-style: dotted; " > граница из ряда точек< /p>
< p style=" border-style: dashed; " > пунктирная граница< /p>
< p style=" border-style: solid; " > сплошная граница< /p>
< p style=" border-style: double; " > двойная граница< /p>
< p style=" border-style: groove; " > граница " бороздка" < /p>
< p style=" border-style: ridge; " > граница " гребень" < /p>
< p style=" border-style: inset; " > вдавленная граница< /p>
< p style=" border-style: outset; " > выдавленная граница< /p>
< /body>
< /html>

Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border- style. Таковых значений может быть от одного до четырёх по числу сторон элемента.

В каждом из четырёх случаев действуют свои " правила" по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:

Число значений	Результат
	Пример: div {border-style: solid; } Первое значение - Устанавливает единый стиль бордюра для всех сторон элемента.
	Пример: div {border-style: solid double; } Первое значение - Устанавливает стиль верхней и нижней границы элемента. Второе значение - Устанавливает стиль левой и правой границы элемента.
	Пример: div {border-style: solid double dashed; } Первое значение - Устанавливает стиль верхней границы элемента. Второе значение - Устанавливает стиль левой и правой границы элемента. Третье значение - Устанавливает стиль нижней границы элемента.
	Пример: div {border-style: solid double dashed ridge; } Первое значение - Устанавливает стиль верхней границы элемента. Второе значение - Устанавливает стиль правой границы элемента. Третье значение - Устанавливает стиль нижней границы элемента. Четвёртое значение - Устанавливает стиль левой границы элемента.

Толщина границы.

Свойство border-width - устанавливает ширину границы элемента.

Ширина бордюра может быть заданна с помощью следующих аргументов:

thin - тонкая граница

medium - средняя толщина границы

thick - толстая граница

А также в пикселях или любых других единицах измерения принятых в CSS.

По аналогии со стилем, толщина бордюра тоже может иметь от одного до четырёх значений и в каждом случае устанавливает ёе для тех или иных сторон бордюра как показано в таблице ниже.

Число значений	Результат
	Пример: div {border-style: solid; border-width: 1px; } Первое значение - Устанавливает единую толщину бордюра со всех сторон.
	Пример: div {border-style: solid; border-width: 1px 4px; } Первое значение - Устанавливает толщину верхней и нижней границы элемента. Второе значение - Устанавливает толщину левой и правой границы элемента.
	Пример: div {border-style: solid; border-width: 1px 4px 7px; } Первое значение - Устанавливает толщину верхней границы элемента. Второе значение - Устанавливает толщину левой и правой границы элемента. Третье значение - Устанавливает толщину нижней границы элемента.
	Пример: div {border-style: solid; border-width: 1px 4px 7px 5px; } Первое значение - Устанавливает толщину верхней границы элемента. Второе значение - Устанавливает толщину правой границы элемента. Третье значение - Устанавливает толщину нижней границы элемента. Четвёртое значение - Устанавливает толщину левой границы элемента.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Толщина границы< /title>
< /head>
< body>
< div style=" border-style: solid; border-width: 3px 1px 10px 4px " >
Толщина границ данного блока:
< ul>
< li> Сверху 3 пикселя
< li> Справа 1 пиксель
< li> Снизу 10 пикселей
< li> Слева 4 пикселя
< /ul>
< /div>
< br> < br>
< div style=" border-style: double; border-width: thick " > В этом блоке границы со всех сторон одинаково толстые< /div>
< /body>
< /html>

Цвет границы.

Цвет рамки или её сторон по отдельности определяется свойством border-color.

Цвет бордюра может иметь следующие значения:

· #ff0000 - шестнадцатеричное значение цвета RGB.

· red - именное значение цвета.

· RGB(255, 0, 0) - значение цвета RGB.

· transparent - прозрачная граница.

Ну и так же как и в случаях с толщиной и стилем, цвет бордюра тоже может иметь от одного до четырёх цветовых значений при каждом " раскладе" окрашивая нужные стороны бордюра как показано в таблице ниже.

Число значений	Результат
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000; } · Первое значение - Устанавливает единый цвет бордюра со всех сторон.
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff; } · Первое значение - Устанавливает цвет верхней и нижней границы элемента. · Второе значение - Устанавливает цвет левой и правой границы элемента.
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000; } · Первое значение - Устанавливает цвет верхней границы элемента. · Второе значение - Устанавливает цвет левой и правой границы элемента. · Третье значение - Устанавливает цвет нижней границы элемента.
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000 #ffff00; } · Первое значение - Устанавливает цвет верхней границы элемента. · Второе значение - Устанавливает цвет правой границы элемента. · Третье значение - Устанавливает цвет нижней границы элемента. · Четвёртое значение - Устанавливает цвет левой границы элемента.

Что то уж больно много почти идентичных таблиц получилось.. ну не судите строго у каждого читателя свой уровень подготовки, да и учебник этот с маркой: -" CSS для начинающих" так что лучше перестраховаться, рассмотрев каждый случай отдельно, не желе чем быть непонятым..

Так вот перестраховываясь, привожу пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Цвет границы< /title>
< /head>
< body>
< div style=" border-style: solid; border-width: 10px; border-color: #ff0000 #ffff00 #00ff00 #0000ff; " >
< p style=" border-style: double; border-width: 5px; border-color: #008000; " > Зелёный< /p>
< p style=" border-style: double; border-width: 5px; border-color: red; " > Красный< /p>
< p style=" border-style: double; border-width: 5px; border-color: rgb(0, 0, 255); " > Синий< /p>
< /div>
< /body>
< /html>

⇐ Предыдущая123456789Следующая ⇒

Поделиться:

Популярное:

1. Индивидуальная фиксация с помощью веревок
2. Они еще не могут чувствовать, что их тело и тела других - это различные тела. Это трудно для них. Они еще не зафиксированы в своем теле, но эта фиксация постепенно придет.
3. Фиксация хода и результатов обыска
4. Четвертый блок относительно изображений,что ангелы не заходят в то помещение где изображения.