Видимая часть элемента.
Свойство clip определяет видимую область элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, "обрезается" и становится невидимым. На данный момент единственно доступная форма области - прямоугольник.
clip работает только для абсолютно позиционированных элементов и показывает лишь ту его часть, что входит в прямоугольную область заданную четырьмя значениями от левого и верхнего краёв данного элемента.
Значения:
- rect(сверху справа снизу слева) - Обрезает элемент сверху, справа, снизу и слева в соответствии с заданными, в скобках, четырьмя значениями, которые могут выражаться в процентах от ширины/длины элемента, пикселях или любых других единицах измерения принятых в CSS.
- auto - Оставляет элемент или одну из сторон элемента без изменений (по умолчанию).
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>clip</title>
</head>
<body>
<div style="position: absolute; clip: rect(15px auto auto 15px); width: 100px; height: 100px; background: #c5ffa0; border: double 5px #008000">
Этот блок частично обрезан слева и сверху
</div>
</body>
</html>
Смотреть пример
О том, что такое position: absolute; - абсолютно позиционированный элемент и вообще что такое позиционирование мы поговорим в отдельной главе.
Полезные советы:
· В виду того, что свойство visibility: collapse; не поддерживается ранними версиями браузера Internet Explorerрекомендую, при работе с таблицами использовать display: none, результат будет аналогичным collapse только работающим в IE.
· Свойства display, visibility и clip в сочетании с скриптами, а так же псевдоэлементами позволяют достичь весьма интересных результатов.
Глава 11
Поплавки.
Эх рыбалка.. хорошо бы было сейчас закинув удочку посидеть на каком ни будь тихом пруду под пенье птиц и шорох камыша.. сидишь себе наблюдаешь за поплавком, потягиваешь пивко, где то неподалёку горит костер.. запах ухи смешавшись с ароматами разнотравья кружит голову и ты окунаешься в нирвану.. в мир спокойствия и гармонии..
Ладно, будем считать, что отдохнули перед очередной порцией информации.. и хотя в этой главе речь пойдёт о поплавках диалоги будут вовсе не о рыбалке..
Итак, свойство float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим"
Теперь побольше конкретики и примеров..
Обтекание элемента
Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.
Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.
Значения свойства float:
- left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа.
- right - Выравнивает элемент по правому краю, остальные элементы обтекают его слева.
- none - Выравнивание элемента не задается. (по умолчанию)
Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией "всплывёт" с левой стороны.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float</title>
</head>
<body>
<div style="border: solid 1px black; width: 220px">
<div style="float: left;">
<img src="graphics/fon.jpg">
</div>
Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, "всплывает" слева.
</div>
</body>
</html>
Смотреть пример
А вот в примере ниже показано как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float</title>
</head>
<body>
<div style="float: right; background: #c5ffa0; border: solid 1px black; padding: 10px; width: 420px">
<span style="float: left; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по левому краю</span>
<span style="float: right; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по правому краю</span>
содержание блока div обтекает выровненные элементы span слева и справа
</div>
</body>
</html>
Смотреть пример
Запрет обтекания
Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон.
Значения:
- both - Запрещает обтекание элемента с левой и правой стороны.
- left - Запрещает обтекание элемента с левой стороны.
- right - Запрещает обтекание элемента с правой стороны.
- none - Запрет на обтекание элемента не задается.(по умолчанию)
Вот пример где clear отменяет действие float
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>clear</title>
</head>
<body>
<div style="background:#cc0; width:150px; height: 50px; float:left;">Этот блок всплывает слева.</div>
<div style="background:#c0c; width:150px; height: 100px; float:left;">И этот блок всплывает слева.</div>
<div style="background:#0c0; width:300px; height: 80px; clear:left;">А этот блок отменяет обтекание с левой стороны.</div>
</body>
</html>
Смотреть пример
Блочная вёрстка.
В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц и фреймов, теперь имея накопленный багаж знаний, настало время познакомить Вас с блочной версткой сайта, используя блоки div и свойства 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 style="background: #cc0; margin:0;">
<div style="clear:both; background: #0c0; padding: 5px;">Логотип</div>
<div style="float: left; background: #c0c; padding: 5px; width: 170px">Меню</div>
<div style="float: right; background: #c0c; padding: 5px; width: 170px">Реклама</div>
<div style="margin:0 180px; background: #0cc; padding: 5px;">Основное содержание<br><br><br><br><br> И ещё куча текста..</div>
<div style="clear:both; background: #0c0; padding: 5px;">Подвал</div>
</body>
</html>
Смотреть пример
Что было понятно "расшифрую" каждую строчку из примера выше:
<!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: #cc0; margin:0;">
- Используем margin:0 для того чтобы обнулить поля в окне браузера.
<div style="clear:both; background: #0c0; padding: 5px;">Логотип</div>
- Создаём контейнер с будущим логотипом и запрещаем его обтекание с обеих сторон, используя clear:both, теперь что бы не случилось, последующие блоки будут идти снизу, а шапка сайта как ей и положено будет располагаться сверху.
<div style="float: left; background: #c0c; padding: 5px; width: 170px">Меню</div>
- Левая колонка с "Меню" выровнена по левому краю свойством float: left и имеет фиксированный размер в 170 пикселей.
<div style="float: right; background: #c0c; padding: 5px; width: 170px">Реклама</div>
- Правая колонка с рекламой выровнена по правому краю свойством float: right; и тоже имеет фиксированный размер 170пикселей.
<div style="margin:0 180px; background: #0cc; padding: 5px;">Основное содержание</div>
- Центральная колонка никак не выравнивается, но занимает своё место по центру, так как имеет широкие поля слева и справаmargin:0 180px, тем самым не накладываясь на правую и левую колонки. Почему поля 180 пикселей, а не 170 в соответствии с ширенной колонок "Меню" и "Реклама"? Отвечаю: потому что кроме ширины width: 170px эти колонки имеют ещё и отступы со всех сторон padding: 5px складываем 170+5+5=180 - такая вот арифметика..
<div style="clear:both; background: #0c0; padding: 5px;">Подвал</div>
- Ну и "подвал" блок, в котором, как правило, располагаются контактные данные и авторские права, так же как логотип запрещает на всякий случай обтекание слева и справа clear:both и тем самым устремляется вниз страницы.
</body>
</html>
- Это нужно "расшифровывать"? :)
В данном примере стилевое описание блоков div происходит с помощью атрибута style - на самом деле это глупо.. привел такой пример, что бы просто понятнее было разобраться в коде, а вообще при блочной верстке обычно назначают каждому блоку свой идентификатор id (см. Глава 6 Классы и идентификаторы.)и всё это дело с остальными потрохами выносят в отдельный css файл..
Полезные советы:
· Верстка блоками div стремительно набирает популярность, и позволяет сверстать сайт практически любой сложности, однако не всегда стоит полностью отказываться от табличного способа верстки. Зачастую верным решением является комбинированный способ верстки, где грубым "каркасом" сайта является таблица, наполненная блоками div которые выполняют более тонкие задачи верстки сложного по структуре сайта.
Глава 12
Позиционирование.
Для начала разберемся с самим понятием позиционирование. Позиционированием называют определение конкретного месторасположения на странице того или иного элемента (бокса). Позиционирование бывает абсолютным, относительным, фиксированным и статическим.
Потороплюсь с примером, ниже будем разбираться, что в нем написано.
<!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="float: left; background: #c00; border-style: double; padding: 5px; height: 1500px; width: 300px">
<div style="position: relative; left: 10px; top: 50px; background: #c0c; border-style: double; padding: 5px; width: 200px">Блок позиционирован относительно крёв элемента родителя.</div>
</div>
<div style="position: absolute; left:200px; top: 350px; background: #cc0; border-style: double; padding: 5px; width: 200px">Блок абсолютно позицонорован и выведен из общего потока, его положение задаётся от краёв окна браузера. Как видите данный блок может накладываться на другие элементы страницы.</div>
<div style="position: fixed; left: 150px; top: 150px; background: #0cc; border-style: double; padding: 5px; width: 200px">А это фиксированный блок, тоже выведен из общего потока однако при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.</div>
</body>
</html>
Смотреть пример
Итак, для того, что бы позиционировать какой либо элемент к нему применяют свойство position и одно из его возможных значений:
- absolute - Абсолютное позиционирование элемента.
- relative - Относительное позиционирование элемента.
- fixed - Фиксированное позиционирование элемента.
- static - Статическое позиционирование элемента. (Элемент отображаются как обычно.)
- inherit - Наследует значение элемента родителя.
Теперь давайте углубляться..
Дата добавления: 2016-02-16; просмотров: 648;