Листинг 4.4. Применение свойства overflow (html, txt)

Рис. 4.3. Задание позиции, размера и поведения при переполнении блоков

Упражнения. Измените значение scroll на auto. Добавьте в блок, на который влияет это свойство, столько текста, чтобы появился скроллер. Чем ограничена высота блока?

clip создает прямоугольное окно, которое показывает часть элемента. Значения: rect(y1, x2, y2, x1), причем вырезанная область будет представлять собой прямоугольник с левым верхним углом в (x1; y1) и левым нижним в (x2; y2). Порядок координат легко запомнить, если заметить, что x1 перенесено в конец списка. Данное свойство влияет только на абсолютно позиционированные элементы.

#div1, #div2 {

position: absolute;

width: 320px;

height: 320px;

}

#div1 {

background-image: url(clipped.png);

}

#div2 {

clip: rect(10px 240px 280px 20px);

background-color: Blue;

}

...

<div id="div1"></div>

<div id="div2"></div>

Листинг 4.5. Обрезка абсолютно позиционированных блоков (html, txt)

Рис. 4.4. Обрезка блока

Упражнение. Модифицируйте значение свойства clip так, чтобы показать а) верхнюю половину; б) левую половину; в) правую нижнюю четверть прямоугольника.

display позволяет вариант отображения элемента: строчный сделать блочным (что вызывает разрыв линии над и под элементом, как у абзаца и секции), а блочный - строчным (что заставит элемент отображаться на той же линии, что и окружающие элементы, как якорь или изображение). Значения: block, inline, none (всего 17 значений, большинство из которых не дают никакого эффекта в современных браузерах). Значение none заставляет элемент полностью исчезнуть со страницы.

h1 {

display: inline;

}

a {

display: block;

}

...

<div>

<h1>

Этому заголовку назначено стилевое свойство display: inline

</h1>

и поэтому он располагается в одной строке с соседними элементами.

<a href="#">Эта и следующая гиперссылки</a>

<a href="#">сделаны блочными элементами</a>

и поэтому они располагаются на отдельных строках.

</div>

Листинг 4.6. Изменение варианта отображения элемента при помощи свойства display (html, txt)

Упражнение. Пронаблюдайте влияние свойства display, устанавливая его значения поочередно в block, inline и none.

visibility определяет, отображает ли браузер элемент. В отличие от значения none свойства display, установка которого скрывает элемент и удаляет его из потока страницы, значение hidden свойства visibility оставляет пустое пространство в том месте, где был бы элемент.

cursor позволяет изменять вид указателя мыши, когда он передвигается над определенным элементом. Значения: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress.

Рис. 4.5. Применение свойства display

Наследование. Разбивка на страницы

Наследование элементами свойств контейнеров

Наследование — это механизм, с помощью которого свойства, относящиеся к какому-либо элементу страницы, распространяются и на вложенные в него элементы. Например, поскольку элемент р (абзац) всегда находится внутри элемента body (тело документа), то атрибуты, применяемые к body, наследуются и р. Например, задав CSS-свойство color элементу body, вы тем самым установите цвет для всего текста документа (на каком бы уровне вложенности текст ни находился - в абзаце, списке или заголовке). Таким образом, механизм наследования экономит время: без него дизайнеру пришлось бы заботиться отдельно о секциях, абзацах, выделениях и т.п.

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

Обычно наследуются следующие основные свойства: color, font, letter-spacing, line-height, list-style, text-align, text-decoration, text-indent, text-transform, visibility, word-spacing. Но и здесь возможны исключения: задание свойств color и font-size для body не повлияет на цвет гиперссылок, а размеры заголовков, хотя и изменятся, но останутся больше размера обычного текста - это вытекает из здравого смысла.

body {

color: red;

font-size: 20px;

border: 5px double blue;

padding: 5px;

}

...

<div>

<h1>

Заголовок 1 уровня</h1>

Текст в абзаце. В данном примере элементу body назначены следующие стилевые

свойства: цвет текста, размер шрифта, рамка и поле. Как видите, вложенные

элементы наследуют эти свойства выборочно.

<a href="#">Гиперссылка</a>.

</div>

Листинг 4.7. Наследование стилей (html, txt)

Рис. 4.6. Наследование стилей

Упражнение. Какие свойства элемента и какими элементами унаследованы в данном примере от свойств body?

Свойства, относящиеся к представлению документа на печатном носителе

page-break-before и page-break-after управляют разрывом страниц. Если применить одно из этих свойств со значением always к какому-либо элементу страницы, то при печати документа будет произведен переход на новую страницу соответственно до или после этого элемента. Существует и ряд других свойств, относящихся к печатному носителю, но они пока не получили единой поддержки во всех браузерах.

<style media="print" type="text/css">

.breaking {

page-break-after: always;

}

</style>

<style media="screen" type="text/css">

p {

border: 2px solid gray;

padding: 3px;

}

</style>

...

<p>

В данном примере документ содержит два элемента style - один для представления

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

рамки и поля, а печатный - ничего.

</p>

<p class="breaking">

Данному абзацу назначено стилевое свойство page-break-after: always, в

результате чего при печати следующий абзац будет выведен на новой странице.

</p>

<p>

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

командой меню Файл - Предварительный просмотр.

</p>

Листинг 4.8. Свойства, относящиеся к представлению документа на печатном носителе (html, txt)

Рис. 4.7. Свойства для печатной версии

Рис. 4.8. Предварительный просмотр

Упражнение. Попробуйте применить свойство page-break-before. Проверьте результат в окне предварительного просмотра.

Вопросы

1. Перечислите единицы измерения, применяемые в CSS. Какие из них используются наиболее часто?

2. Какими способами можно задать цвет в CSS?

3. Какие способы применяются для задания размера шрифта?

4. Какие параметры шрифта можно указать при помощи CSS-свойства font?

5. Перечислите основные свойства CSS, относящиеся к тексту.

6. Какие свойства рамок регулируются правилами CSS?

7. Чем отличаются отступы от полей? Какие свойства CSS задают то и другое?

8. Как задать положение и размеры элемента (при абсолютном позиционировании)?

9. Что такое наследование стилей?

10. Какие свойства вызывают разрывы страниц при печати?

15