HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

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

У свойства clip значением по умолчанию является auto, согласно которому окошко просмотра совпадает с прямоугольником, включающим в себя элемент. В качестве альтернативы можно указать геометрическую фигуру, определяющую окошко просмотра в пределах области на экране, отведенной под элемент. В настоящее время единственной фигурой, поддерживаемой стандартом CSS21, является прямоугольник, задаваемый с помощью ключевого слова rect. Например:

p {
overflow : hidden;
clip : rect(15px, -10px, 5px, 10px)
}

Эти четыре значения определяют верхнюю, правую, нижнюю и левую стороны усекающего прямоугольника. Каждое значение является смещением относительно сторон прямоугольника, включающего в себя элемент. В нашем примере верхняя сторона усекающего прямоугольника расположена на 15 пикселов ниже верхней стороны прямоугольника, содержащего элемент, правая сторона – на 10 пикселов правее
соответствующей правой стороны, нижняя – на 5 пикселов выше нижней стороны, а левая – на 10 пикселов правее левой стороны.

Обратите внимание, что свойство clip имеет силу только в том случае, когда свойство overflow данного элемента имеет значение, отличное от visible. Когда overflow равно visible, усечение не происходит и свойство clip игнорируется.

Как и родственный ему атрибут clear для тега <br>, свойство clear говорит броузеру, помещать ли содержимое тега рядом с «плавающим» элементом или на первой строке под ним. Текст обтекает плавающие элементы, такие как изображения и таблицы с атрибутами align=left и align=right, и HTML/XHTML элементы, у которых свойство float отлично от none.

Значением свойства clear может быть none, left, right или both. Значение none, принятое по умолчанию, подразумевает, что броузер действует обычным образом и размещает содержимое тега рядом с плавающими элементами по обе стороны, если там есть место. Значение left запрещает располагать содержимое слева от плавающего элемента,
right – справа, both не допускает размещения содержимого тега рядом с плавающим элементом вообще.

Результат применения этого свойства совпадает с тем, который достигается, когда перед тегом помещается тег <br> с атрибутом clear. Таким образом:

h1 {clear: left}

имеет тот же результат, как если бы перед каждым тегом <h1> стояло <br clear=left>.

Поскольку описание сложной рамки может наскучить, стандарт CSS2 предоставляет пять свойств, которые принимают любое или все сразу из значений толщины, цвета и стиля для одной или всех сторон рамки. Свойства border-top, border-bottom, border-left и border-right действуют на соответствующие стороны рамки. Всеобъемлющее свойство border управляет всеми четырьмя сторонами рамки одновременно. Например:

border top: thick solid blue
border left: 1ex inset
border bottom: blue dashed
border: red double 2px

Первое свойство выполняет верх рамки толстой сплошной синей линией. Второе – устанавливает для левой стороны эффект утопленности на толщину, равную высоте строчной буквы в шрифте, оставляя цвет рамки тем же, что и цвет элемента. Третье свойство проводит по низу элемента синюю пунктирную линию, толщина которой равна medium – значению по умолчанию. Наконец, последнее свойство выводит все четыре
стороны рамки красными двойными линиями толщиной в 2 пиксела.

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

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

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

В соответствии с моделью CSS2 можно применить к рамкам HTML эле
ментов множество украшений.

Свойство border-style принимает следующие значения: none (по умолчанию), dotted, dashed, double, groove, ridge, inset и outset. Броузер, разбирающийся в стилях рамок, применяет от одного до четырех значений этого свойства к каждой из сторон рамки.

Броузер рисует dotted (точечная), dashed (штриховая), solid (сплошная) и double (двойная) рамки в виде плоских линий поверх фона тега. Значения groove, ridge, inset и outset создают «трехмерные» рамки: groove – углубленную линию (паз), ridge – выпуклую линию (ребро), inset утапливает содержимое тега и outset приподнимает его над поверхностью документа. Воздействие трехмерной природы последних четырех стилей на фоновое изображение не определено и оставлено на усмотрение броузера. Netscape поддерживает трехмерные эффекты.

Свойство border-width управляет толщиной рамки. Как и свойство border-color, оно принимает от одного до четырех значений, которые применяются к разным сторонам рамки в том же порядке.

Помимо длин для указания толщины рамки можно использовать три ключевых слова: thin (тонкая), medium (средняя) и thick (толстая). По умолчанию, если толщина не установлена явно, принимается значение medium. Типичные спецификации толщины рамки:

border: 1px
border: thin thick medium
border: thick 2mm

Первый пример устанавливает для всех четырех сторон рамки толщину в 1 пиксел. Второй пример делает верх рамки тонким, правую и левую стороны толстыми, а низ – средним. Последний пример делает верх и низ рамки толстыми, а для правой и левой сторон устанавливает толщину в 2 миллиметра.

Если неудобно определять толщину всех четырех сторон рамки при одном подходе, то можно использовать индивидуальные свойства: border-top-width, border-bottom-width, border-left-width и border-right-width для определения толщины каждой стороны в отдельности. Любое свойство принимает ровно одно значение, по умолчанию устанавливается medium.

Используйте border-color для задания цвета рамки. Если он не определен, броузер рисует рамку, применяя значение свойства color для элемента. Свойство border-color принимает от одного до четырех цветовых значений. Количество значений определяет способ их применения к рамке. Если установить только одно значение, все четыре стороны рамки будут одного цвета. Два значения приводят к тому, что верх и низ рамки окрашиваются в первый цвет, а левая и правая сторона рамки – во второй. В случае трех значений первое будет цветом верха рамки, второе – левой и правой сторон, третье – нижней стороны рамки. Четыре значения определяют цвет каждой из сторон: верха, правой стороны, низа, левой стороны.

Каждый элемент документа может быть помещен в прямоугольный контейнер. Авторы CSS2 называют этот контейнер «ядром» (core content area) и помещают его в еще три контейнера: подложку, рамку и поля. Рисунок показывает эти контейнеры и определяет некоторые полезные понятия.

Верхний (top), нижний (bottom), левый внешний (left outer edge) и правый внешний (right outer edge) края ограничивают ядро элемента и связанные с ним области подложки (padding), рамки (border) и полей (margin space). Внутренний верхний (inner top), внутренний нижний (inner bottom), левый внутренний (left inner edge) и правый внутрен
ний (right inner edge) края определяют границы ядра. Дополнительное пространство вокруг элемента – это область между внутренними и внешними краями, включающая подложку, рамку и поля. Броузер может опускать любое из этих дополнительных пространств, и для многих элементов внешние и внутренние края совпадают.

Когда элементы являются смежными по вертикали, нижнее поле верхнего элемента и верхнее поле нижнего элемента перекрываются так, что полное расстояние между смежными элементами будет равно величине большего из полей. К примеру, пусть у одного абзаца нижнее поле равно одному дюйму, а верхнее поле следующего абзаца равно половине дюйма, тогда между абзацами будет расстояние, равное ширине большего (однодюймового) поля. Этот метод известен как схлопывание полей и обычно ведет улучшению внешнего вида документов.

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

Как видно из рисунка, полная ширина элемента равна сумме семи величин: левого и правого полей, левой и правой рамки, левой и правой подложки и ядра элемента. Сумма этих семи величин должна равняться полной ширине элемента. Из этих семи величин только трем может быть присвоено значение auto: ширине элемента и его левому и правому полю. Это означает, что броузер может вычислять значение для этих свойств. При необходимости броузер следует перечисленным ниже правилам:

• Если ни для одного из этих свойств не установлено значение auto и полная ширина оказывается меньше ширины родительского элемента, свойству margin-right назначается auto и правое поле увеличивается, чтобы сделать полную ширину элемента равной ширине родительского.
• Если auto назначено ровно одному свойству, именно оно будет сделано достаточно большим, чтобы полная ширина стала равной ширине родительского элемента.
• Если width, margin left и margin right установлены в auto, поддерживающий стандарт CSS2 броузер определит левое и правое поля равными нулю и назначит width достаточно большим, чтобы сделать полную ширину равной ширине родительского элемента.
• Если левое и правое поля установлены в auto, они всегда будут равными, чтобы центрировать элемент относительно родительского.

Существуют специальные правила для плавающих элементов. Поля плавающего элемента (такого как изображение с выравниванием align=left), если только они не отрицательные, не схлопываются с полями охватывающего или предыдущего элемента.

<body>
<p>
<img align=left src=»pics/img.gif»>
Some sample text…
</body>

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