Урок 5: Абзацы и блоки

Главная|Учебник HTML|Учебник CSS|Новости|Вопрос/ответ|Советы|Ссылки|Downloadы|Анкета

Абзацы

Отступ первой строки
Если в HTML сделать "красную строку" было мучительно (об этих извращениях я даже не говорил в учебнике HTML). То в CSS это раз плюнуть: ставим атрибут text-indent, присваиваем ему значение в любой из следующих единиц:

Межстрочное расстояние
Если Вы захотите расположить строчки ближе друг к другу, по-плотнее, то какраз кстати атрибут line-height, который контролирует "высоту строки". Единицы измерения те же что и у абзацных отступов, только проценты считаются уже не от размеров окна, а от текущей высоты букв текста. Есть еще способ задания этого атрибута: любым десятичным числом. В таком случае 1 - это 100%, 0.5 - 50%, а 10 - соответственно 1000%(в десять раз больше высоты текста).

Межбуквенное расстояние
Управляя этим атрибутом, можно сделать текст таким просторным или таким вот сжатым. Атрибут сей называется letter-spacing. Единицы измерения старые (кроме процентов - они тут не работают).Если задавать отрицательное расстояние между буквами, они будут "налазить" друг на друга.

Блоки

Что это?
Под блоком в CSS может подразумеваться любой объект. Таблицы, рисунки, абзацы, заголовки, простой текст. Это позволяет, например, окружить абзац рамкой и задать для него фоновый цвет и даже рисунок.

Свойства обрамления
Все атрибуты CSS, касающиеся рамок, начинаются с border-, затем через дефис пишется само свойство. Например, border-color - цвет рамки. Такие атрибуты задают свойства всей рамки, а если надо задать что-то для определенной стороны, то в середину имени атрибута добавим название стороны рамки: border-left-color - цвет левой рамки. Для славянофилов расшифрую:

Цвет рамок задается стандартными способами атрибутом border-color, на этом я останавливаться не буду.

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


solid none (никакой) dotted ridge double outset groove


Толщина задается атрибутом border-width. Пример:
<h1 style=border-style:solid;border-width:5>
Так мы создадим заголовок с одинарной рамкой толщиной 5 пикселов.

Поля блоков
Для каждого блока существует два поля: внешнее и внутреннее и, возможно, рамка. Вообще-то рамка есть всегда, но это только теоретически, ведь она может быть не видна. Взгляните на рисунок:

Не надо так громко смеяться, этот "рисунок" я нарисовал в Paint'e за 1 минуту=).

Голубым (или каким-то салатовым) цветом я обозначил внешние поля, в браузере они находятся между блоком и краями окна браузера (или краями другого блока, в котором лежит данный). Зеленое - это рамка. Ну и белое - внутреннее поле; это поле между рамкой и содержимым блока.

Внешние поля
Внешние поля задаются параметром margin. Можно применять описанные выше приемы: margin-top, margin-left...и т. д. Единицы измерения стандартные.

Внутренние поля
Способ их задания такой же как и у предыдущего вида полей. Только атрибут для этого дела звучит по-иному: padding.

Размеры
Размеры блока задаются, как не трудно догадаться, атрибутами width - ширина и height - высота. Но если Вы задали поля, то эти атрибуты не сработают.

Обтекание
То каким образом блок будет обтекаться текстом определяется атрибутом float. При float:left блок расположится левее текста (т.е. текст расположится справа от него), при right то правее.

Расположение
Полезный атрибут CSS position позволяет задать точные координаты блока на экране. И не имеет значения что находится в указанных координатах - блок его "накроет". Если position:absolute, то координаты считаются от левого верхнего угла экрана. Если relative - то от угла предыдущего блока. Затем нужно указать собственно координаты блока:

style=position:absolute;left:100;top:50
Такой стиль говорит браузеру следующее: данный блок размещен в ста пикселах от левого края экрана и в пятидесяти от верхнего.

Слои
В связи с новыми подходами CSS к позиционированию объектов появились такие эффекты как наложение блоков друг на друга (умышленное, разумеется). Поэтому нужно задавать порядок расположения слоев - кто на ком лежит:) Делается это при помощи атрибута z-index. Самым верхним будет тот блок у которого z-index больше. Можно использовать отрицательные числа и даже дробные. Пример:

style=z-index:1
style=z-index:0
Если указать эти атрибуты двум блокам соответственно, то первый блок будет сверху.
Думаю, о блоках достаточно.

Предыдущий урок | Следующий урок