Фиксация фонового изображения.
Если на странице или в каком либо блоке присутствует полоса прокрутки, то фоновое изображение будет прокручиваться вместе с остальным содержанием данного блока.
Зафиксировать фоновое изображение позволяет свойство 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>
Не нашли, что искали? Воспользуйтесь поиском по сайту:
©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.
|