ГЛАВА 11. Отступы, рамки и выделение
ГЛАВА 11. Отступы, рамки и выделение
В предыдущей главе мы занимались контейнерным Web-дизайном: создавали блочные контейнеры, помещали в них содержимое и задавали для них параметры с помощью особых атрибутов стиля CSS. Результат — вполне профессионально созданная Web-страница. Но чего-то в ней не хватает… Какой-то мелочи недостает, чтобы придать Web- странице лоск. Может быть, отступов и рамок? Так давайте же разберемся с атрибутами стиля, с помощью которых задают пара- метры отступов и рамок! И доделаем наконец нашу Web-страницу.
Параметры отступов
Стандарт CSS предлагает средства для создания отступов двух видов.
1. Отступ между воображаемой границей элемента Web-страницы и его содержимым — внутренний отступ. Такой отступ принадлежит данному элементу Web-страницы, находится внутри его.
2. Отступ между воображаемой границей данного элемента Web-страницы и воображаемыми границами соседних элементов Web-страницы — внешний отступ. Такой отступ не принадлежит данному элементу Web-страницы, находится вне его.
Чтобы лучше понять разницу между внутренним и внешним отступами, давайте рассмотрим ячейку таблицы. Ячейка наполнена содержимым, скажем, текстом, имеет воображаемую границу и окружена другими ячейками.
— Внутренний отступ — это отступ между границей ячейки и содержащимся в ней текстом.
— Внешний отступ — это отступ между границами отдельных ячеек таблицы. Атрибуты стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента Web-страницы:
padding-left|padding-top|padding-right|padding-bottom:<отступ>|auto|inherit
Мы можем указать в качестве величины отступа абсолютное или относительное значение. Значение auto задает величину отступа по умолчанию, обычно оно равно нулю.
В листинге 11.1 мы указали внутренний отступ для ячеек таблицы, равный двум пикселам со всех сторон.
Листинг 11.1
TD, TH { padding-left: 2px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px }
А вот стиль, создающий внутренние отступы, равные двум сантиметрам слева и справа:
indented { padding-left: 2cm; padding-right: 2cm }
Мы можем привязать такой стиль к абзацу и посмотреть, что получится.
Атрибут стиля padding позволяет сразу указать величины внутренних отступов со всех сторон элемента Web-страницы:
padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
— Если указано одно значение, оно задаст величину отступа со всех сторон эле- мента Web-страницы.
— Если указаны два значения, первое установит величину отступа сверху и снизу, а второе — слева и справа.
— Если указаны три значения, первое определит величину отступа сверху, второе — слева и справа, а третье — снизу.
— Если указаны четыре значения, первое задаст величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.
Пример:
TD, TH { padding: 2px }
indented { padding: 0cm 2cm 0cm 2cm }
Здесь мы просто переписали определения приведенных ранее стилей с использованием атрибута стиля padding.
Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:
margin-left|margin-top|margin-right|margin-bottom: <отступ>|auto|inherit
Здесь также доступны абсолютные и относительные значения. Значение auto задает величину отступа по умолчанию, как правило, равное нулю.
Пример:
H1 { margin-top: 5mm }
Этот стиль создаст у всех заголовков первого уровня отступ сверху 5 мм.
В качестве значений внешних отступов допустимы отрицательные величины:
UL { margin-left: -20px }
В этом случае Web-обозреватель создаст "отрицательный" отступ. Такой прием позволяет убрать отступы, создаваемые Web-обозревателем по умолчанию, например, отступы слева у больших цитат и списков.
Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента Web-страницы:
margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Этот атрибут стиля ведет себя так же, как его "коллега" padding.
Пример:
H1 { margin: 5mm 0mm }
Однако мы не можем использовать атрибуты стиля margin-left, margin-top, margin- right, margin-bottom и margin для задания внешних отступов у ячеек таблиц (т. е. расстояния между ячейками) — они просто не будут действовать. Вместо этого следует применить атрибут стиля border-spacing:
border-spacing: <отступ 1> [<отступ 2>]
Отступы могут быть заданы только в виде абсолютных значений.
— Если указано одно значение, оно задаст величину отступа со всех сторон ячейки таблицы.
— Если указаны два значения, первое задаст величину отступа слева и справа, а второе — сверху и снизу.
Атрибут стиля применяется только к таблицам (тегу <TABLE>):
TABLE { border-spacing: 1px }
Здесь мы задали отступы между ячейками таблицы, равные одному пикселу.
ВНИМАНИЕ!
Задавая отступы, внутренние или внешние, нужно помнить, что они увеличивают раз- меры элемента Web-страницы. Поэтому, если мы применим отступы к блочным контейнерам, формирующим дизайн Web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они сместятся, и дизайн будет нарушен.
Также нужно знать, что при применении отступов к элементу Web-страницы с размерами, заданными в виде относительных величин, Web-обозреватель сначала вычисляет абсолютный размер элемента, а потом к нему добавляет величины отступов. Так, если мы зададим ширину контейнера в 100 %, а потом укажем для него отступы, то Web-обозреватель сначала вычислит его абсолютную ширину, основываясь на размерах окна Web-обозревателя, а потом прибавит к ней величину отступов. В результате ширина контейнера станет больше, чем ширина окна Web-обозревателя, и в окне появятся полосы прокрутки. Весьма неприятный сюрприз…
Более 800 000 книг и аудиокниг! 📚
Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением
ПОЛУЧИТЬ ПОДАРОКДанный текст является ознакомительным фрагментом.
Читайте также
Отступы
Отступы Представьте, что вы форматируете несколько HTML-страниц размером с небольшую книгу. Язык HTML не предоставляет специальных средств для задания отступа абзаца, и отступ приходится делать с помощью пробелов. Согласитесь, не очень-то удобно в начале каждого абзаца
9.6. Поля и отступы
9.6. Поля и отступы В этом разделе мы разберем важный момент при создании веб-страниц – задание полей и отступов. Итак, начнем с
Отступы
Отступы Для выравнивания текста и введения отступов используются символы табуляции. Размер одного символа табуляции при отображении соответствует восьми позициям. Это не означает, что для структурирования можно использовать восемь или четыре символа "пробел" либо
ГЛАВА 11. Отступы, рамки и выделение
ГЛАВА 11. Отступы, рамки и выделение В предыдущей главе мы занимались контейнерным Web-дизайном: создавали блочные контейнеры, помещали в них содержимое и задавали для них параметры с помощью особых атрибутов стиля CSS. Результат — вполне профессионально созданная
Многоцветные рамки
Многоцветные рамки Мы уже знаем, что с помощью особых атрибутов стиля CSS можно создавать одноцветные рамки у любых элементов Web-страницы.Однако для рамок, толщина которых превышает один пиксел, мы можем задать сразу несколько цветов. В этом случае рамка будет представлена
7. Временные рамки
7. Временные рамки «Как сделать что-то за 15 минут» – это может быть небольшая статья, где вы даете алгоритм решения той или иной проблемы за три минуты. Это очень хорошее название для статей и видео. Вы планируете записать бесплатный каст на 15 минут, в котором
Отступы в программе
Отступы в программе Запомните: следует выработать правила использования отступов и неуклонно их придерживаться. Компилятор VBA игнорирует все пробелы в начале строк, так что вы можете смело использовать отступы для наведения порядка. Сравните следующие два фрагмента
Автоматические отступы
Автоматические отступы Чтобы до минимума уменьшить объем выполняемой вами работы, редактор Visual Basic автоматически устанавливает отступ в новой строке, равный отступу в предыдущей. Если в новой строке отступ должен быть меньше, просто нажмите клавишу удаления символа
Используйте отступы!
Используйте отступы! Правильное использование отступов служит основой создания понятного программного кода. В примере из предыдущего раздела каждая пара операторов, определяющих одну структуру, напечатана с одним и тем же отступом. При наличии отступов проще выяснить,
Глава 13 Выделение фрагментов изображения
Глава 13 Выделение фрагментов изображения Очень часто при работе с графикой возникает необходимость выделить часть изображения. Это может понадобиться для выборочного применения команды или фильтра, перемещения или удаления объектов, рисования в ограниченной области и
Глава 3 Выделение, перемещение и копирование объектов
Глава 3 Выделение, перемещение и копирование объектов • Выделение объектов• Добавление и удаление объектов из набора• Выделение объектов с помощью фильтров• Перемещение объектов• Копирование объектов• РезюмеЦелью данной главы является дальнейшее освоение базовой
Отступы и выступы
Отступы и выступы Отступ – это расстояние между текстом и левым или правым полем страницы. Регулировать отступ можно вручную при помощи горизонтальной линейки (как включить отображение, читайте в подразд. «Линейка» разд. 1.4).Отступы можно разделить на три вида:• отступ
Глава 15 Выделение
Глава 15 Выделение • Понятие выделения• Графическое отображение выделения• Создание выделения произвольной формы• Создание выделения на основе изображения• Редактирование выделения• Сохранение и загрузка выделенияВ этой главе мы познакомимся с понятием
Глава 3 Выделение, перемещение и копирование объектов
Глава 3 Выделение, перемещение и копирование объектов Выделение объектовДобавление и удаление объектов из набораВыделение объектов с помощью фильтровПеремещение объектовКопирование объектовРезюмеЦелью данной главы является дальнейшее освоение базовой техники
Глава 10 Выделение, каналы и маски
Глава 10 Выделение, каналы и маски 10.1. Инструменты простого и сложного выделения10.2. Меню Select (Выделение)10.3. Дополнительное меню выделения10.4. Маска10.5. Режим Quick Mask (Быстрая маска)10.6. Дополнительные