|
|
Книги-onlinea {color:darkred;text-decoration:underline;} a.doc {color:#003366;text-decoration:underline;} td {font-size:10pt;} .example {margin-left:10px;color:darkred;font-family:monospace;font-size:10pt;text-align:left} #ht {color:darkred;} #first {color:white;background-color:darkred;} #second {color:darkred;} Каскадные Таблицы Стилей. Учебник. Cascading Style Sheets ( CSS ). Guide. Координаты и размеры Стандарт CSS-P позволяет с точностью до пикселя разместить блочный элемент разметки в рабочем поле окна браузера. При таком подходе возникает естественный вопрос о том, как устроена система координат, в которой автор страницы производит размещение компонентов страницы. CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга. Блоки - это не абстрактные точки, которые не занимают на плоскости cтраницы места. Блоки - это прямоугольники, которые "заметают" площадь. Текст и другие компоненты страницы под блоком перестают быть доступными пользователю, поэтому линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем координаты блока. Абсолютные координатыПри использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно: Если в этой системе координат некоторый блочный элемент должен быть размещен на 10px ниже верхнего обреза рабочей области браузера и на 20px правее правого края рабочей области браузера, то его описание будет выглядеть следующим образом:
.example {position:absolute;top:10px;left:20px;} В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20px), координата Y задана атрибутом top (значение - 10px). Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат. Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100px (высота) на 200px(ширина) достаточно отпозиционировать его следующим образом:
.example {position:absolute; Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без скроллинга ("прокрутки"), либо когда элементы разметки находятся в начале страницы и их взаимное размещение важно с точки зрения дизайна, например, для организации всплывающих меню. Относительные координатыДанная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества и необходимость наличия такой координатной системы очевидны. Она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках умолчания. В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз. Для задания координат блока в этой системе применяют запись типа:
<div style="border-width:1px;border-style:solid; Этот блок находится в точке отсчета относительных координат
А этот блок смещен вправо на 50px
Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что в NN, например, параграф не может содержать параграфов. Любой блок немедленно закрывает параграф, следовательно, вложить в него что-либо нельзя. Следует отметить, что NN вообще непредсказуем в работе с относительными координатами, поэтому в нем их следует избегать. В относительной системе координат можно пользоваться отрицательными смещениями:
<div В данном примере слой, первоначально сдвинутый на 50 пикселей вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселей влево, получая отрицательную величину смещения по оси X (left:-50px). После повторного нажатия на ссылку положение блока восстанавливается. Линейные размеры блокаЛинейные размеры блока задаются двумя параметрами: шириной(width) и высотой(height) блока. В браузерах ширина и высота блока интерпретируется по разному. В NN ширина и высота блока - это рекомендуемые параметры. Если текст выходит за эти ограничения, то блок увеличивается до необходимых размеров, если текста нет вообще, то блок сжимается до маленького квадрата:
<p style="width:200px; Текст размещен для того, чтобы блок был виден в Netscape Navigator Приведенного в примере описания должно хватить для получения результата, но в NN для такого блока нужно применить некоторые дополнительные атрибуты:
<p style="width:200px; Без границы блок не будет залит темно-красным цветом, а без span текст будет отображаться цветом умолчания для данной страницы. Никакому разумному объяснению такое поведение браузера не поддается, поэтому не стоит на этих атрибутах строить дизайн страниц. Внимание! Если у вас не получилось найти нужную информацию, используйте рубрикатор или воспользуйтесь поиском . книги по программированию исходники компоненты шаблоны сайтов C++ PHP Delphi скачать |
|