Опубликован: 06.10.2006 | Уровень: для всех | Доступ: платный
Дополнительный материал 2:

Приложение B. Cведения о CSS

Размер и позиционирование

float

Устанавливает выравнивание и тип обтекания объекта (вроде атрибута align в тэге <IMG>, но не только для рисунков). Установите как left или right, чтобы выровнять объект с левыми или правыми полями и установить обтекание текста, или установите none (по умолчанию), чтобы предотвратить обтекание.

Пример
img {float:left;margin-right:10px;}
Текст обтекает все рисунки с полями в 10 пикселей с правой стороны
<div style="float:right;width:120;">
  <img src="mel.jpg"width=120          
    height=200><br>
  Caption under the picture</div>
Рисунок и подпись появляются напротив правого поля в то время как остальное содержимое страницы обтекается слева

clear

Если параграф или объект обтекает другие объекты на странице, установите параметр clear, чтобы он начинался со следующего открытого правого или левого поля (после других элементов). Установите как left, right, both или none.

width и height

Устанавливает размеры объектов, таких как рисунок или абзац. Абзац всегда использует указанный параметр width. С параметром height, когда рамка меньше абзаца, текст сжимается до указанной высоты (если вы не установили параметр overflow ).

overflow, overflow-x и overflow-y

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

Чтобы вырезать лишний текст, установите hidden ; установите auto, чтобы отображать полосу прокрутки, если необходимо; установите scroll, чтобы всегда отображать две полосы прокрутки. Используйте параметры overflow-x и overflow-y, чтобы обеспечить разные настройки для горизонтального и вертикального переполнения и прокрутки.

Пример
.boxnote {width:160px;height:100px; 
  overflow:auto;float:right;fixed-size 
  border:2px solid navy;padding:4px;     
}
Параграфы класса boxnote содержатся в рамке напротив правого поля; если текст не будет помещаться, в рамке появится вертикальная полоса прокрутки
#mustfit {width:100px;height:12px;    
  overflow:hidden;}
Элемент с ID mustfit должен быть точно 100 на 12 пикселов; не поместившийся текст вырезается

position, top, и left

Параметр position заставляет элемент, такой как рисунок или блок <DIV>, переместиться с места, изначально занимаемого на странице. Установите position как absolute, чтобы установить элемент на определенном расстоянии от левого и верхнего краев страницы, закрывая пространство, которое он занял бы в другом случае.

Укажите position как relative, чтобы разрешить позиционирование объекта, оставляя открытым пространство, которое он занял бы в другом случае.

Параметры для top и left могут быть положительными (для движения вниз и вправо) или отрицательными (для движения вверх и налево).

Абсолютное позиционирование обычно связано с верхним левым углом страницы, но вы также можете установить его относительно других элементов. Например, если вы устанавливате position как relative к блоку <DIV>, абсолютное размещение в этом блоке будет связано с его левым верхним углом.

Абсолютное позиционирование удобно в DHTML-программировании, где вы определяете объекты на вашей странице, а затем устанавливаете расположение, содержимое и видимость, используя JavaScript.

Пример
<div style=                                     
  "position:absolute;top:0;left:200"> 
    <img src=spaceship.gif>                  
</div>
Левый край рисунка отстоит на 200 пикселов от левого края окна, и рисунок касается верхнего поля
The word <span style=                    
  "position:relative;top:-8;">higher
  </span>is higher than the others
Слово higher выше, чем остальные

z-index

Определяет, какие позиционированные объекты накладываются друг на друга.

Большее значение элемента z-index отправляет элемент на передний план, а меньшая величина располагает его позади других элементов. Отрицательное значение отодвигает элемент за непозиционированные элементы страницы.

Пример
<div style=                                     
  "position:absolute;top:200;
  left:200;z-index:2">
    <img src="front.gif"></div>
<div style=
  "position:absolute;top:250;
  left:250;z-index:1">
    <img src="back.gif"></div>
Рисунок front.gif частично перекрывает back.gif
<div style=                                   
  "position:absolute;top:250;          
  left:250;z-index:-1">
    <img src="chau.gif"></div>.
Рисунок появляется после содержимого страницы, на расстоянии 250 пикселов от верхнего и левого краев страницы

display

Установите как none, чтобы элемент исчез со страницы, закрыв занимаемое им в другом случае пространство. Установите как block, чтобы отображать элемент как блок (по умолчанию) или inline, чтобы отображать его как часть конкретной строки (как в тэге <SPAN>).

visibility

Установите как hidden, чтобы элемент исчез со страницы, но все еще занимал место. Установите visible (по умолчанию), чтобы отобразить объект.

Татьяна Кондрашова
Татьяна Кондрашова
Россия
Игорь Воробьев
Игорь Воробьев
Россия, Михнево Ступинского МО