Подробное описание модели визуального форматирования


Содержание

Визуальное форматирование

меню

Hа титульную
Что такое CSS?
Синтаксис CSS
Свойства текста
Свойства шрифта
Свойства цвета и фона
Блочная модель
Позиционирование
Визуальное форматирование
Полоса прокрутки
Фильтры
Таблицы
Списки
Аппаратно-зависимый стиль
Страничные носители
Акустический CSS
Статьи

Определяет вид создаваемого элемента. Эти разные виды по-разному взаимодействуют друг с другом зависимости от расположения на странице.

Значение:

  • inline — встроенный элемент (по умолчанию).
  • block — блочный элемент,
  • list-item — встроенный элемент пункта списка.
  • marker — общее содержимое, которое появляется перед элементом или после него. Используется только с псевдо-элементами : before (перед) и safter (после),
  • none — отсутствие элемента. Элемент в общей схеме не работает.
  • run-in — элемент типа блочного, свойства которого зависят от его местоположения.
  • compact — элемент типа встроенного, свойства которого зависят от его местоположения,
  • table (таблица), inline-table (оперативная таблица), table-row-group (группа строк таблицы), table-column (столбец таблицы), table-column-group (группа столбцов таблицы), table-header-group (группа верхних заголовков таблицы), table-footer-group (группа нижних заголовков таблицы), table-row (строка таблицы), table-cell (ячейка таблицы), table-caption (подпись таблицы) — элемент таблицы, соответствующий имени свойства.
  • inherit — принимается значение родительского элемента.

Определяет ширину элемента.

Значение:

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

Определяет соответственно минимальную или максимальную ширину элемента.

Значение:

  • любая соответствующая стандарту длина — число, представляющее минимальную или максимальную ширину элемента.
  • любое соответствующее стандарту процентное значение — отношение в процентах минимальной или максимальной ширины элемента к ширине окна.
  • none — ширина не ограничивается; такое значение применяется только к свойству max-width.
  • inherit — принимается значение родительского элемента.

Определяет высоту элемента.

Значение:

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

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

Значение:

  • любая соответствующая стандарту длина — число, представляющее минимальную или максимальную высоту элемента.
  • любое соответствующее стандарту процентное значение — отношение в процентах минимальной или максимальной высоты элемента к высоте окна, попе — высота не ограничивается; такое значение применяется только к свойству max-height.
  • inherit — принимается значение родительского элемента.

Определяет интерлиньяж для текстового элемента. Интерлиньяж — это расстояние между базовыми линиями двух соседних строк.

Значение:

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

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

Значение:

  • baseline — выравнивание базовой линии элемента по базовой линии его родительского элемента (по умолчанию).
  • middle — выравнивание средней линии элемента по базовой линии его родительского элемента
  • top — выравнивание верхней части элемента по верхнему краю его текста.
  • bottom — выравнивание нижней части элемента по базовой линии его родительского элемента.
  • sub — выравнивание текста элемента, чтобы он стал подстрочным по отношению к базовой линии родительского элемента.
  • super — выравнивание элемента, чтобы он стал надстрочным по отношению к базовой линии родительского элемента.
  • text-top — выравнивание верхней части элемента по верхней части текста родительского элемента.
  • text-bottom — выравнивание нижней части элемента по нижней части текста родительского элемента.
  • любая соответствующая стандарту длина — число, показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже.
  • любое соответствующее стандарту процентное значение — отношение в процентах, показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже.
  • inherit — принимается значение родительского элемента.

Определяет обтекание элемента слева или справа.

Значение:

  • none — элемент не обтекается (по умолчанию).
  • left — элемент передвинут влево, а остальные элементы обтекают его справа.
  • right — элемент передвинут вправо, а остальные элементы обтекают его слева.
  • inherit — принимается значение родительского элемента.

Определяет, как данный элемент обтекается по сторонам другими элементами.

Значение:

  • none — обтекание доступно со всех сторон (по умолчанию).
  • left — элементов не должно быть слева от данного элемента.
  • right — элементов не должно быть справа от данного элемента.
  • both — элементов не должно быть справа и слева от данного элемента.
  • inherit — принимается значение родительского элемента.

Определяет, как отображать элемент, когда он перекрывает другой элемент.

Значение:

  • visible — перекрываемый элемент виден полностью, и из него ничего не вырезано (по умолчанию).
  • hidden — перекрываемая часть вырезается.
  • scroll — перекрываемая часть вырезается, и становятся видимыми любые полосы прокрутки.
  • auto — браузером определяется, надо ли вырезать перекрываемые области
  • inherit — принимается значение родительского элемента.

Определяет, является ли элемент видимым.

Значение:

  • visible — элемент видим.
  • hidden — элемент не видим, но он все равно влияет на общую структуру страницы.
  • collapse — если не применяется к таблицам, то получается тот же эффект, что и для hidden.
  • inherit — (по умолчанию) принимается значение родительского элемента.

Определяет, является ли элемент видимым.

Значение:

  • visible — элемент видимый.
  • hidden — элемент не видимый, но он все равно влияет на общую структуру страницы.
  • collapse-если не применяется к таблицам, то получается тот же эффект, что и для hidden.
  • inherit — (по умолчанию) принимается значение родительского элемента.

Определяет для перекрываемых частей вырезаемые области.

Значение:

  • auto — вырезаемая область должна иметь те же размеры и местоположение, что и перекрываемая часть (по умолчанию).
  • rect (top, right, bottom, left)-вырезаемая область определяется значениями сдвига соответственно сверху, справа, снизу и слева.
  • inherit — принимается значение родительского элемента.

Определяет направление текста в текстовых блоках.

Значение:

  • Itr — слева направо (по умолчанию).
  • rtl — справа налево.
  • inherit — принимается значение родительского элемента.

Позволяет менять направление текста.

Значение:

  • normal — менять направление письма не разрешено (по умолчанию).
  • embed — можно устанавливать направление письма с помощью свойства direction.
  • bidi-override — можно устанавливать направление письма с помощью свойства direction. Применяется к дополнительным текстовым блокам
  • inherit — принимается значение родительского элемента.

Определяет, как выглядит указатель мыши при прохождении по элементу.

Значение:

  • auto — внешний вид определяется браузером (по умолчанию).
  • crosshair — принимает форму указателя «графическое выделение».
  • default — внешний вид, как у указателя, установленного в системе пользователя по умолчанию.
  • pointer — принимает форму указателя «выбор ссылки».
  • move — принимает форму указателя «перемещение».
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s- resize, w-resize — принимает формы указателей изменения размеров.
  • text — принимает форму указателя выделения текста.
  • wait — принимает форму указателя «система недоступна».
  • help — принимает форму указателя «выбор справки».
  • любой соответствующий стандарту URL — URL файла указателя мыши.
  • inherit — принимается значение родительского элемента.

Свойство cursor в CSS3

  • cору — указывает на то, что что-то будет скопировано. Может изображаться как стрелка с небольшим знаком плюса рядом с ней.
  • alias — представляет альтернативу или ярлык на что-либо. Часто изображается как стрелка с небольшой изогнутой стрелкой сразу, за ней.
  • context menu — этот курсор указывает на наличие контекстного меню, обычно открываемого щелчком на объекте правой кнопкой мыши. Чаете изображается в виде стрелки с небольшой картинкой меню сразу за ней.
  • cell — указывает на то, что может быть выбрана ячейка или группа ячеек. Курсор должен выглядеть как жирный знак плюс.
  • grab — указывает на то, что объект может быть ухвачен. Курсор должен выглядеть как разжатая кисть.
  • grabbing — указывает на то, что объект был схвачен. Курсор должен выглядеть как сжатая в кулак кисть.
  • spinning — свидетельствует о том, что программа выполняет задачу. Похоже на свойство wait, но пользователь может продолжать взаимодействовать с программой. Возможны различные изображения курсора, включая вращающийся мячик.
  • count up — указывает на то, что программа осуществляет отсчет в прямом направлении. Курсор должен быть изображен в виде отсчитывающих пальцев.
  • count down — указывает на то, что программа осуществляет отсчет в обратном направлении. Подобно отсчету в прямом направлении, курсор должен быть изображен в виде отсчитывающих пальцев.
  • count up-down — указывает на то, что программа осуществляет отсчет сначала в прямом, а затем в обратном направлении.

Средства визуального моделирования

Визуальное моделирование применяется на практике с помощью методов, языков и соответствующих программных инструментов (см. рис. 1.3).

Рис. 1.3.Визуальное моделирование: языки, методы, программные средства

Языки визуального моделирования (или визуальные языки) — это формализованные наборы графических символов и правила построения из них визуальных моделей. Сейчас известны и активно используются на практике такие языки визуального моделирования, как UML и BPMN. Однако существуют и более старые языки: SDL и MSC для моделирования телекоммуникационных систем, SADT/IDEF0 для моделирования бизнес-процессов, IDEF1x для моделирования баз данных и некоторые другие. Кроме того, в исследовательской среде создано множество других визуальных языков, например, язык WebML для моделирования web-приложений.

Методы использования визуального моделирования предписывают правила применения визуальных языков для решения тех или иных задач процесса разработки ПО.

В качестве примера кратко рассмотрим метод SADT (Structured Analysis and Design Technique) [1.2], [1.13], к которому мы неоднократно будем обращаться в дальнейшем. Этот метод предназначен для структурного анализа создаваемой или модифицируемой системы и является способом уменьшить количество дорогостоящих ошибок за счет структуризации знаний о системе на ранних этапах ее разработки, улучшения взаимодействия разработчиков и пользователей/заказчиков, а также сглаживания перехода от анализа к проектированию. Он включает в себя визуальный язык, а также подробно описанные принципы и технологию использования этого языка. Термин «структурный анализ» был введен в обиход Дугласом Россом (Douglas Ross) — главным автором SADT — в конце 60-х годов.

Коротко историю развития SADT можно представить следующим образом:

· 60-е годы — группа ученых из MIT (Massachusetts Institute of Technology) под руководством Дугласа Росса создала метод иерархической модульной декомпозиции программных систем под названием SADT ;

· в 1969 авторы SADT основали компанию SoftTech, которая стала развивать и коммерциализировать этот метод;

· 1973 год — первая масштабная апробация SADT — проект по созданию завода будущего;

· конец 70-х годов — SADT был использован в программе интегрированной компьютеризации производства ICAM (Integrated Computer-Aided Manufacturing) военно-воздушных сил США, что привело к стандартизации части SADT под названием IDEF0 [1.14] и широкому распространению этого стандарта в военной промышленности США.

В настоящее время при разработке ПО SADT не используется, но активно применяется при моделировании бизнес-процессов.

Среди современных методов визуального моделирования, пожалуй, самым широко распространенным является RUP/USDP — промышленный метод создания ПО, использующий UML практически на всех стадиях и во всех видах деятельности разработки. RUP/USDP является тяжеловесным методом применения UML: он содержит множество предписаний, непростую последовательность шагов, определяет разные роли участников, охватывает все стадии разработки ПО. Его внедрение в процесс компании требует значительных затрат и существенной перестройки принципов ее работы.

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

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

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: На стипендию можно купить что-нибудь, но не больше. 8989 — | 7235 — или читать все.

Таблицы в модели визуального форматирования

Введение в таблицы CSS

Таблицы представляют отношения между данными. Авторы определяют эти отношения в языке документа и указывают способ их представления в CSS: визуальное или звуковое.

Авторы могут определять визуальное форматирование таблиц в виде прямоугольной сетки ячеек. Строки и столбцы ячеек могут объединяться в группы строк и группы столбцов. Вокруг строк, столбцов, групп строк, групп строк и ячеек могут быть видимые границы (в спецификации CSS2 представлено две модели границ). Внутри ячейки данные могут выравниваться по вертикали или по горизонтали. Кроме того, данные могут выравниваться во всех ячейках или столбцах.

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

Далее представлена таблица из трех строк и трех абзацев, описанная на языке HTML 4.0:

Обычная таблица размером 3×3
Заголовок 1 Ячейка 1 Ячейка 2
Заголовок 2 Ячейка 3 Ячейка 4
Заголовок 3 Ячейка 5 Ячейка 6

В этом коде создается одна таблица (элемент TABLE), три строки (элементы TR), три ячейки заголовков (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере указаны неявно: в таблице столько столбцов, сколько понадобится для ячеек заголовков и данных.

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

Следующие правила позволяют выровнять текст ячеек заголовков по базовой линии, а текст каждой ячейки данных — вертикально по центру:

Следующие правила определяют наличие сплошной линии границы синего цвета толщиной 3 пиксела вокруг верхней строки и сплошной границы черного цвета толщиной в 1 пиксел вокруг каждой из последующих строк:

Следует помнить, однако, что границы вокруг строк могут перекрываться в местах пересечения строк. Какого цвета (черная или синяя) и толщины (1 пиксел или 3 пиксела) будет граница между строкой 1 и 2? Это обсуждается в разделе об устранении конфликтов между границами.

Согласно следующему правилу заголовок таблицы помещается над самой таблицей:

И наконец, следующее правило указывает, что при звуковом представлении таблицы каждая строка данных будет произноситься в формате «Заголовок, Данные, Данные»:

Например, первая строка будет произноситься в формате «Заголовок1 Ячейка1 Ячейка2». А в соответствии со следующим правилом:

эта строка будет произноситься в формате «Заголовок1 Ячейка1 Заголовок1 Ячейка2».

В предыдущих примерах показано, как CSS влияет на элементы HTML 4.0; в HTML 4.0 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) определена строго. В других языках документов (например, в приложениях XML) элементы таблицы могут быть не определены заранее. Таким образом, спецификация CSS2 позволяет авторам «отображать» элементы языка документа на элементы таблицы с помощью свойства ‘display’. Например, за счет следующего правила элемент FOO действует как элемент HTML TABLE, а элемент BAR работает как элемент CAPTION:

Различные элементы таблицы рассматриваются в следующем разделе. В данной спецификации термин элемент таблицы относится к любому элементу, используемому при создании таблицы. «Внутренним» элементом таблицы называется элемент, образующий строку, группу строк, столбец, группу столбцов или ячейку.

Модель таблиц CSS

Модель таблиц CSS основана на модели таблиц HTML 4.0, в которой структура таблицы тесно связана с визуальным представлением таблицы. В этой модели таблица состоит из необязательного заголовка и произвольного количества строк ячеек. Такая модель таблиц считается «ориентированной на строки», так как в языке документа явным образом определяются строки, а не столбцы. Столбцы определяются только после указания всех строк — первая ячейка каждой строки относится к первому столбцу, вторая — ко второму и так далее). Строки и столбцы могут образовывать структурные группы с отражением при представлении таблицы (например, вокруг группы строк может располагаться граница).

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

Для модели CSS не обязательно, чтобы язык документа включал элементы, соответствующие всем этим компонентам. Для языков документов (таких как приложения XML), не имеющих заранее определенных элементов таблиц, авторы могут отображать элементы языка документа на элементы таблицы; такая процедура осуществляется с помощью свойства ‘display’. Следующие значения ‘display’ связывают семантику таблицы с произвольным элементом:

table (В HTML: TABLE)

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

inline-table (В HTML: TABLE)

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

table-row (В HTML: TR)

Указывает, что элемент является строкой ячеек.

table-row-group (В HTML: TBODY)

Указывает, что элемент группирует одну или несколько строк.

table-header-group (В HTML: THEAD)

Работает аналогично ‘table-row-group’, но для визуального форматирования эта группа строк всегда отображается вперед всех других строк и их групп, после главного заголовка. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки нижнего заголовка на каждой странице, занимаемой таблицей.

table-footer-group (В HTML: TFOOT)

Работает аналогично ‘table-row-group’, но для визуального форматирования эта группа строк всегда отображается после всех строк и их групп, перед нижними заголовками. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки нижнего заголовка на каждой странице, занимаемой таблицей.

table-column (В HTML: COL)

Указывает, что элемент определяет столбец ячеек.

table-column-group (В HTML: COLGROUP)

Указывает, что элемент объединяет один или несколько столбцов.

table-cell (В HTML: TD, TH)

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

table-caption (В HTML: CAPTION)

Задает заголовок таблицы.

Элементы, у которых для свойства ‘display’ установлено значение ‘table-column’ или ‘table-column-group’, не представляются (как если было указано значение ‘display: none’), но они могут быть полезны, поскольку могут иметь атрибуты для создания определенного стиля для представляемых столбцов.

Использовании этих значений в HTML 4.0 показано в стандартной таблице стилей для HTML 4.0 в приложении:

Агенты пользователей могут игнорировать эти значения свойства ‘display’ для документов HTML, так как авторы не должны изменять предполагаемое поведение элемента.

Анонимные объекты таблицы

Языки документов, отличные от HTML, могут не включать все элементы из модели таблиц CSS2. В этом случае для работы модели таблиц должно считаться, что «отсутствующие» элементы существуют. Отсутствующие элементы генерируют анонимные объекты (например, анонимные блоки в визуальное схеме таблицы) согласно следующим правилам:

  1. Все элементы таблицы будут автоматически генерировать вокруг себя необходимые анонимные объекты таблицы, состоящие по меньшей мере из трех вложенных объектов, соответствующих элементам ‘table’/’inline-table’, a ‘table-row’ и ‘table-cell’.
  2. Если родительский элемент P элемента T ‘table-cell’ не является элементом ‘table-row’, объект, соответствующий ‘table-row’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последующие элементы ‘table-cell’ (в дереве документа) в T.
  3. Если значение родительского элемента P элемента ‘table-row’ T отлично от ‘table’, ‘inline-table’ или ‘table-row-group’, объект, соответствующий элементу ‘table’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы (в дереве документа) элемента T, у которых родительский элемент ‘table’ должен быть ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-column’, ‘table-column-group’ и ‘caption’.
  4. Если родительский элемент P элемента T ‘table-row-group’ (или ‘table-header-group’ или ‘table-footer-group’) не является ‘table’ или ‘inline-table’, объект, соответствующий элементу ‘table’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы (в дереве документа) элемента T, у которых родительский элемент ‘table’ должен быть ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-column’, ‘table-column-group’ и ‘caption’.
  5. Если дочерний элемент T элемента P ‘table-row’ не является элементом ‘table-cell’, объект, соответствующий элементу ‘table-cell’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы T, которые не являются элементами ‘table-cell’.

В этом примере для XML элемент ‘table’ может содержать элемент HBOX:

George 4287 1998

так как с ним связана следующая таблица стилей:

В данном примере предполагается, что три элемента ‘table-cell’ в элементах ROW содержат. Обратите внимание, что далее текст помещается в анонимные последовательные блоки, как описано в модели визуального форматирования:

Это top строка. Это middle строка. Это bottom строка.

Агенты пользователей HTML могут не создавать анонимные объекты согласно описанным выше правилам.

Селекторы столбцов

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

Следующие свойства применяются к элементам столбцов и групп столбцов:

Различные свойства границы применяются к столбцам, только если для свойства ‘border-collapse’ в элементе таблицы установлено значение ‘collapse’. В этом случае границы устанавливаются вокруг столбцов, а группы столбцов передаются в алгоритм разрешения конфликтов, который выбирает стили границ для каждого края ячейки.

Свойства фона определяют фон для ячеек в столбце, но только если ячейка и строка имеют прозрачный фон. См. раздел «Слои и прозрачность таблицы».

Свойство ‘width’ определяет минимальную ширину столбца.

Если свойству столбца ‘visibility’ присвоено значение ‘collapse’, ни одна ячейка столбца не представляется, а ячейки, охватывающие другие столбцы, урезаются. Кроме того, ширина таблиц уменьшается на ширину этого столбца. См. ниже раздел «Динамические эффекты». Другие значения свойства ‘visibility’ не имеют влияния.

Вот несколько примеров правил, определяющих свойства столбцов. Первые два правила реализуют атрибут «rules» HTML 4.0, имеющий значение «cols». Третье правил выделяет столбец «totals» синим цветом, а последние два правила указывают способ фиксирования размера столбца, используя алгоритм фиксированного расположения.

Top


Поле заголовка располагается над полем таблицы.

Bottom

Поле заголовка располагается ниже поля таблицы.

Left

Поле заголовка располагается слева от поля таблицы.

Right

Поле заголовка располагается справа от поля таблицы.

Заголовки, расположенные ниже или выше элемента ‘table’, форматируются подобно элементам блока, находящимся ниже или выше таблицы, с тем исключением, что они (1) наследуют наследуемые свойства таблицы и (2) не считаются блоками для элементов ‘compact’ или ‘run-in’, которые могут предшествовать таблице.

Заголовок, находящийся ниже или выше поля таблицы, действует также как блок для вычисления ширины; ширина вычисляется относительно ширины содержащего блока таблицы.

Для заголовка, располагающегося в правой или левой части поля таблицы, значение свойства ‘width’, отличное от ‘auto’, явным образом устанавливает ширину, в то время как значение ‘auto’ предписывает агенту пользователя выбрать «соответствующую ширину». Это значение может колебаться от «самого узкого блока » до «одной строки», поэтому пользователям рекомендуется не указывать значение ‘auto’ для установки ширины левого и правого заголовка.

Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используйте свойство ‘text-align’. Для вертикального выравнивания левого и правого блока заголовка относительно блока таблицы используйте свойство ‘vertical-align’. В этом случае смысл имеют только значения ‘top’, ‘middle’ и ‘bottom’. Все другие значения трактуются как ‘top’.

В этом примере свойство ‘caption-side’ определяет расположение заголовков под таблицей. Заголовок может иметь ширину родительского элемента таблицы, а текст заголовка будет выровнен по левому краю.

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

Если ширина таблицы меньше ширины пространства для отображения, то форматирование примет следующий вид:

Выровненная по центру таблица с заголовком, выступающим на левое поле в результате отрицательного значения свойства ‘margin-left’.

Слои и прозрачность таблицы

Для поиска фона каждой ячейки таблицы можно считать, что различные элементы таблицы состоят из шести слоев. Фон элемента, установленный в одном из слоев, будет видим, только если у расположенных выше слоев фон прозрачный.

Схема слоев таблицы.

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

2. Следующий слой содержит группы столбцов. Группы столбцов по высоте равны самой таблице, но не обязательно занимают всю ее ширину.

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

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

5. Предпоследний слой содержит строки. Строки также занимают всю таблицу.

6. Самый верхний слой содержит собственно ячейки. Как показано на рисунке, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. «Пустые» ячейки считаются прозрачными, поэтому через них будут видны нижние слои.

В следующем примере первая строка содержит четыре ячейки, вторая — ни одной, поэтому через нее виден фон таблицы, за исключением тех случаев, когда ячейка первой строки занимает и вторую строку. Следующий код HTML и правила стиля

1 2 3 4

может форматироваться так:

Таблица с тремя пустыми ячейками в нижней строке.

17.5.2 Алгоритмы определения ширины таблицы: свойство ‘table-layout’

В CSS не определяется «оптимальное» компоновка таблиц, так как в большинстве случаев оптимальное является делом вкуса. В CSS не определяются ограничения, которые агенты пользователей должны учитывать при построении таблицы. Агенты пользователей могут использовать любой алгоритм и выбирать скорость представления, если не указан «алгоритм фиксированного положения».

‘table-layout’

Значение: auto | fixed | inherit
Начальное значение: auto
Область применения: элементы ‘table’ и ‘inline-table’
Наследование: нет
Процентное значение: не применяется
Устройства: визуальные

Свойство ‘table-layout’ управляет алгоритмом, используемым для размещения ячеек, строк и столбцов таблицы. Значения имеют следующий смысл:

Fixed

Используется алгоритм фиксированного положения таблицы

Auto

Используется любой алгоритм автоматического размещения таблицы

Ниже представлены описания обоих алгоритмов.

Baseline

Базовая линия ячейки располагается на той же высоте, что и базовая линия первой строки, занимаемой ячейкой (определение базовой линии ячеек и строк см. ниже).

Top

Верх блока ячейки совпадает с верхом первой строки, занимаемой ячейкой.

Bottom

Низ блока ячейки совпадает с низом последней строки, занимаемой ячейкой.

Middle

Середина ячейки совпадает с серединой строк, занимаемых ячейкой.

Границы

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

‘border-collapse’

Значение: collapse | separate | inherit
Начальное значение: collapse
Область применения: элементы ‘table’ и ‘inline-table’
Наследование: да
Процентные значения: N/A
Устройства: визуальные

Это свойство позволяет выбрать модель границ таблицы. Значение ‘separate’ означает модель с отдельными границами. Значение ‘collapse’ задает модель с пересекающимися границами. Эти модели описаны ниже.

Модель отдельных границ

‘border-spacing’

Значение: ? | inherit
Начальное значение:
Область применения: элементы ‘table’ и ‘inline-table’
Наследование: да
Процентное задание: не определено
Устройства: визуальные

Если задана длина, то она обозначает расстояние между границами соседних ячеек. Если задана одна длина, она определяет расстояние по горизонтали и по вертикали. Если указаны оба значения, первое определяет расстояние по горизонтали, а вторая — по вертикали. Длины не могут быть отрицательными.

В этой модели каждая ячейка имеет собственные границы. Свойство ‘border-spacing’ определяет расстояние между границами соседних ячеек. Это расстояние заполняется фоном элемента таблицы. У строк, столбцов, групп строк и групп столбцов не может быть границ (т.е. агенты пользователей должны игнорировать свойства границ для данных элементов).

Таблицу, представленную на рисунке ниже, можно создать с помощью следующей таблицы стилей:

Таблица, в которой для свойства ‘border-spacing’ установлено определенное значение. Обратите внимание, что у каждой ячейки имеется собственная граница, а у таблицы отдельная граница.

Границы вокруг пустых ячеек: свойство ’empty-cells’

’empty-cells’

Значение: show | hide | inherit
Начальное значение: show
Область применения: элементы ‘table-cell’
Наследование: да
Процентное задание: не определено
Устройства: визуальные

В модели с отдельными границами это свойство управляет представлением границ вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству ‘visibility’ присвоено значение ‘hidden’. Символы » » и другие символы, представляющие пустое пространство за исключением символов ASCII CR («\0D»), LF («\0A»), tab («\09») и пробела («\20»), считаются видимым содержимым.

Если для этого свойства установлено значение ‘show’, вокруг пустых ячеек отображается граница (как вокруг обычных ячеек).

Значение ‘hide’ означает, что вокруг пустых ячеек не будет границ. Более того, если у всех ячеек в строке это свойство имеет значение ‘hide’, и ячейки не имеют видимого содержимого, вся строка будет выполняться согласно значению ‘display: none’.

Согласно следующему правилу границы будут иметь все ячейки:

Стили границ

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

None

*hidden

Аналогично значению ‘none’, но в модели с пересекающимися границами имеет приоритет над любыми другими границами (см. раздел о конфликтах между границами).

Dotted

Граница представляется рядом точек.

Dashed

Граница представляется рядом коротких линейных сегментов.

Solid

Граница представляется единым сегментом линии.

Double

Граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равно значению ‘border-width’.

Groove

Граница выглядит вдавленной.

Ridge

В противоположность ‘groove’, граница выглядит выпуклой.

*inset

В модели с отдельными границами весь выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ‘groove’.

*outset

В модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ‘ridge’.

Once

Заголовок произносится только один раз перед рядом ячеек.

Always

Заголовок произносится перед каждой ячейкой.

В каждом языке документа могут быть различные механизмы задания заголовков. Например, в HTML 4.0 ([HTML40]) информацию о заголовке можно представить с помощью трех различных атрибутов («headers», «scope» и «axis»). Кроме того, в этой спецификации дается алгоритм для определения заголовочной информации в случае, если эти атрибуты не указаны.

Таблица, в которой ячейки заголовка («Сан-Хосе» и «Сиэттл») находятся вне столбца или строки данных, к которым они применяются.

В этом примере на языке HTML представлены затраты на питание, проживание в отеле и транспорт в двух городах (Сан-Хосе и Сиэтл) в течение нескольких дней. В принципе, таблицу можно рассматривать как n-мерное пространство. К заголовкам этого пространства относятся: город, день, категория и промежуточная сумма. Некоторые ячейки определяют отметки на оси, другие — расходы в этой точке пространства. Разметка таблицы выглядит так:

Отчет о расходах на командировку
Питание Гостиницы Транспорт сумма
Сан-Хосе
25 авг. 97 37.74 112.00 45.00
26 авг. 97 27.28 112.00 45.00
сумма 65.02 224.00 90.00 379.02
Сиэттл
27 авг. 97 96.25 109.00 36.00
28 авг. 97 35.00 109.00 36.00
сумма 131.25 218.00 72.00 421.25
ИТОГО 196.27 442.00 162.00 800.27

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

Сан-Хосе, 25 авг. 97, Питание: 37.74 Сан-Хосе, 25 авг. 97, Проживание в гостинице: 112.00 Сан-Хосе, 25 авг. 97, Транспорт: 45.00 .

Браузеры могут также произносить заголовки только при их смене:

Сан-Хосе, 25 авг. 97, Питание: 37.74 Проживание в гостинице: 112.00 Транспорт: 45.00 26 авг. 97, Питание: 27.28 Проживание в гостинице: 112.00.

Введение в таблицы CSS

Таблицы представляют отношения между данными. Авторы определяют эти отношения в языке документа и указывают способ их представления в CSS: визуальное или звуковое.

Авторы могут определять визуальное форматирование таблиц в виде прямоугольной сетки ячеек. Строки и столбцы ячеек могут объединяться в группы строк и группы столбцов. Вокруг строк, столбцов, групп строк, групп строк и ячеек могут быть видимые границы (в спецификации CSS2 представлено две модели границ). Внутри ячейки данные могут выравниваться по вертикали или по горизонтали. Кроме того, данные могут выравниваться во всех ячейках или столбцах.

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

Далее представлена таблица из трех строк и трех абзацев, описанная на языке HTML 4.0:

Обычная таблица размером 3×3
Заголовок 1 Ячейка 1 Ячейка 2
Заголовок 2 Ячейка 3 Ячейка 4
Заголовок 3 Ячейка 5 Ячейка 6

В этом коде создается одна таблица (элемент TABLE), три строки (элементы TR), три ячейки заголовков (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере указаны неявно: в таблице столько столбцов, сколько понадобится для ячеек заголовков и данных.

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

Следующие правила позволяют выровнять текст ячеек заголовков по базовой линии, а текст каждой ячейки данных — вертикально по центру:

Следующие правила определяют наличие сплошной линии границы синего цвета толщиной 3 пиксела вокруг верхней строки и сплошной границы черного цвета толщиной в 1 пиксел вокруг каждой из последующих строк:

Следует помнить, однако, что границы вокруг строк могут перекрываться в местах пересечения строк. Какого цвета (черная или синяя) и толщины (1 пиксел или 3 пиксела) будет граница между строкой 1 и 2? Это обсуждается в разделе об устранении конфликтов между границами.

Согласно следующему правилу заголовок таблицы помещается над самой таблицей:

И наконец, следующее правило указывает, что при звуковом представлении таблицы каждая строка данных будет произноситься в формате «Заголовок, Данные, Данные»:

Например, первая строка будет произноситься в формате «Заголовок1 Ячейка1 Ячейка2». А в соответствии со следующим правилом:

эта строка будет произноситься в формате «Заголовок1 Ячейка1 Заголовок1 Ячейка2».

В предыдущих примерах показано, как CSS влияет на элементы HTML 4.0; в HTML 4.0 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) определена строго. В других языках документов (например, в приложениях XML) элементы таблицы могут быть не определены заранее. Таким образом, спецификация CSS2 позволяет авторам «отображать» элементы языка документа на элементы таблицы с помощью свойства ‘display’. Например, за счет следующего правила элемент FOO действует как элемент HTML TABLE, а элемент BAR работает как элемент CAPTION:

Различные элементы таблицы рассматриваются в следующем разделе. В данной спецификации термин элемент таблицы относится к любому элементу, используемому при создании таблицы. «Внутренним» элементом таблицы называется элемент, образующий строку, группу строк, столбец, группу столбцов или ячейку.

Модель таблиц CSS

Модель таблиц CSS основана на модели таблиц HTML 4.0, в которой структура таблицы тесно связана с визуальным представлением таблицы. В этой модели таблица состоит из необязательного заголовка и произвольного количества строк ячеек. Такая модель таблиц считается «ориентированной на строки», так как в языке документа явным образом определяются строки, а не столбцы. Столбцы определяются только после указания всех строк — первая ячейка каждой строки относится к первому столбцу, вторая — ко второму и так далее). Строки и столбцы могут образовывать структурные группы с отражением при представлении таблицы (например, вокруг группы строк может располагаться граница).

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

Для модели CSS не обязательно, чтобы язык документа включал элементы, соответствующие всем этим компонентам. Для языков документов (таких как приложения XML), не имеющих заранее определенных элементов таблиц, авторы могут отображать элементы языка документа на элементы таблицы; такая процедура осуществляется с помощью свойства ‘display’. Следующие значения ‘display’ связывают семантику таблицы с произвольным элементом:

table (В HTML: TABLE)


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

inline-table (В HTML: TABLE)

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

table-row (В HTML: TR)

Указывает, что элемент является строкой ячеек.

table-row-group (В HTML: TBODY)

Указывает, что элемент группирует одну или несколько строк.

table-header-group (В HTML: THEAD)

Работает аналогично ‘table-row-group’, но для визуального форматирования эта группа строк всегда отображается вперед всех других строк и их групп, после главного заголовка. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки нижнего заголовка на каждой странице, занимаемой таблицей.

table-footer-group (В HTML: TFOOT)

Работает аналогично ‘table-row-group’, но для визуального форматирования эта группа строк всегда отображается после всех строк и их групп, перед нижними заголовками. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки нижнего заголовка на каждой странице, занимаемой таблицей.

table-column (В HTML: COL)

Указывает, что элемент определяет столбец ячеек.

table-column-group (В HTML: COLGROUP)

Указывает, что элемент объединяет один или несколько столбцов.

table-cell (В HTML: TD, TH)

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

table-caption (В HTML: CAPTION)

Задает заголовок таблицы.

Элементы, у которых для свойства ‘display’ установлено значение ‘table-column’ или ‘table-column-group’, не представляются (как если было указано значение ‘display: none’), но они могут быть полезны, поскольку могут иметь атрибуты для создания определенного стиля для представляемых столбцов.

Использовании этих значений в HTML 4.0 показано в стандартной таблице стилей для HTML 4.0 в приложении:

Агенты пользователей могут игнорировать эти значения свойства ‘display’ для документов HTML, так как авторы не должны изменять предполагаемое поведение элемента.

Анонимные объекты таблицы

Языки документов, отличные от HTML, могут не включать все элементы из модели таблиц CSS2. В этом случае для работы модели таблиц должно считаться, что «отсутствующие» элементы существуют. Отсутствующие элементы генерируют анонимные объекты (например, анонимные блоки в визуальное схеме таблицы) согласно следующим правилам:

  1. Все элементы таблицы будут автоматически генерировать вокруг себя необходимые анонимные объекты таблицы, состоящие по меньшей мере из трех вложенных объектов, соответствующих элементам ‘table’/’inline-table’, a ‘table-row’ и ‘table-cell’.
  2. Если родительский элемент P элемента T ‘table-cell’ не является элементом ‘table-row’, объект, соответствующий ‘table-row’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последующие элементы ‘table-cell’ (в дереве документа) в T.
  3. Если значение родительского элемента P элемента ‘table-row’ T отлично от ‘table’, ‘inline-table’ или ‘table-row-group’, объект, соответствующий элементу ‘table’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы (в дереве документа) элемента T, у которых родительский элемент ‘table’ должен быть ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-column’, ‘table-column-group’ и ‘caption’.
  4. Если родительский элемент P элемента T ‘table-row-group’ (или ‘table-header-group’ или ‘table-footer-group’) не является ‘table’ или ‘inline-table’, объект, соответствующий элементу ‘table’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы (в дереве документа) элемента T, у которых родительский элемент ‘table’ должен быть ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-column’, ‘table-column-group’ и ‘caption’.
  5. Если дочерний элемент T элемента P ‘table-row’ не является элементом ‘table-cell’, объект, соответствующий элементу ‘table-cell’, будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы T, которые не являются элементами ‘table-cell’.

В этом примере для XML элемент ‘table’ может содержать элемент HBOX:

George 4287 1998

так как с ним связана следующая таблица стилей:

В данном примере предполагается, что три элемента ‘table-cell’ в элементах ROW содержат. Обратите внимание, что далее текст помещается в анонимные последовательные блоки, как описано в модели визуального форматирования:

Модель визуального форматирования

9.1.1 Порт просмотра

9.1.2 Содержащие блоки

9.2 Управление генерацией боксов

9.2.1 Элементы уровня блока и боксы блока

Анонимные боксы блока

9.2.2 Инлайн-элементы и инлайн-боксы

9.2.3 Боксы compact

9.2.4 Втягивающиеся боксы

9.2.5 Свойство ‘display’

9.3 Схемы позиционирования

9.3.1 Выбор схемы позиционирования: свойство ‘position’

9.3.2 Позиционирование и заполнение в боксе: ‘top’, ‘right’, ‘bottom’, ‘left’

9.4 Нормальное расположение

9.4.1 Контекст форматирования блока

9.4.2 Контекст форматирования инлайн

9.4.3 Относительное позиционирование

9.5.1 Позиционирование поплавка: свойство ‘float’

9.5.2 Управление расположением после поплавка: свойство ‘clear’

9.6 Абсолютное позиционирование

9.6.1 Фиксированное позиционирование

9.7 Соотношение между ‘display’, ‘position’ и ‘float’

9.8 Сравнение нормального расположения, поплавков и абсолютного позиционирования

9.8.1 Нормальное расположение

9.8.2 Относительное позиционирование

9.8.3 Обтекание бокса

9.8.4 Абсолютное позиционирование

9.9.1 Спецификация уровня в пакете слоёв: свойство ‘z-index’

9.10 Направление текста: свойства ‘direction’ и ‘unicode-bidi’

Как осуществляется визуальное отображение HTML документа в браузере?

В этой статье рассматривается основы модели визуального форматирования. Модель визуального форматирования — это базовая концепция CSS, определяющая алгоритм обработки HTML документа для его визуального представления в браузере.

Модель визуального форматирования

Модель визуального форматирования (visual formatting model) – это набор инструкций для пользовательских агентов (браузеров), в соответствии с которыми они должны обрабатывать HTML документы для их визуального представления на экранах устройств. Это основополагающая концепция. Знание этой концепции необходимо любому веб-разработчику, т.к. в этом случае он сможет понять как тот или иной фрагмент HTML кода и стилей, применённых к нему, будет отображён в браузере.

В центре этой модели лежат boxes (боксы). Генерация boxes выполняется из HTML элементов. Это означает, что браузеру перед тем, как отобразить страницу, необходимо из HTML элементов сгенерировать boxes . Следующий этап – это расположить boxes по определённому алгоритму на веб-странице.

Этот алгоритм зависит от множества факторов:

  • размеров и от того, как они заданы;
  • типа боксов (block boxes, inline boxes);
  • позиционирования (нормальный поток, position: absolute , position: fixed , position: sticky , float: left или float: right );
  • от других элементов (вложенных и дочерних);
  • от размеров viewport;
  • от собственных размеров изображений и другой информации.

Рассмотрим некоторые из этих факторов.

Схема позиционирования элементов

Схема позиционирования элемента – это один из факторов, от которого будет зависеть расположение boxes на веб-странице.

По умолчанию все HTML элементы, располагаются в нормальном потоке (normal flow).

Нормальный поток — это основной алгоритм, определяющий то, как элементы должны располагаться на странице. В нормальном потоке следования элементов осуществляется в том порядке, в котором они расположены в HTML коде с учётом их вложенности.

Задание другой схемы позиционирования элементам осуществляется с помощью CSS свойств position и float . Узнать всё об этих схемах позиционирования элементов можно в этой статье.

Типы boxes

Тип бокса – это ещё один фактор, от которого будет зависеть как бокс будет располагаться на веб-странице.

Различают два основных типа боксов: блочный (block box) и строчный (inline box).

Тип бокса зависит от CSS свойства display . Из HTML элементов, имеющих display равное block , list-item , или table генерируются один или несколько блочных боксов . Из элементов inline уровня , т.е. у которых вычисленное свойство display имеет значение inline , inline-block или inline-table генерируются боксы inline уровня .

Как происходит генерация boxes?

Процесс генерации boxes – это часть алгоритма модели визуального форматирования. Процесс генерации boxes из HTML элементов разберём на примерах.

Сначала рассмотрим простые примеры, когда из одного HTML элемента генерируется один бокс.

1. В этом примере из одного пустого элемента, имеющего display: block генерируется один блочный ящичек (block box):

2. В этом примере из элемента, имеющего display: inline генерируется один inline бокс :

Теперь разберём более сложные примеры.

3. Пример, в котором из одного HTML элемента генерируются несколько боксов.

В этом примере будут генерироваться:

  • блочный бокс из элемента p ;
  • анонимный строчный бокс, содержащий текст «Текст. » и располагающийся внутри блочного бокса.

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

А так как текст не заключён в inline HTML элемент, то алгоритм модели визуального форматирования заключает его в анонимный строчный бокс (anonymous inline box).

4. Пример, в котором элемент с блочным отображением содержит в себе текст и элемент с inline отображением.

В этом примере будут генерироваться блочный бокс из элемента p (по умолчанию display: block ) и три строчных бокса в нём.

  • анонимный строчный бокс, содержащий текст «Некоторый »;
  • строчный бокс из элемента strong (по умолчанию display: inline) с текстом «очень важный»;
  • анонимный строчный ящичек, содержащий текст « текст».


Структура сгенерированных боксов:

5. Пример, в котором разберём какие boxes будут генерироваться из элемента div ( display: block ), содержащего внутри себя текст и элемент p ( display: block ).

Из этого фрагмента будут генерироваться следующие боксы:

  • блочный бокс из элемента div, т.к. он имеет display: block;
  • • анонимный блочный бокс, расположенный в блочном боксе сгенерированным из div, и содержащий внутри себя анонимный строчный бокс с текстом «Текст 1»;
  • блочный бокс p, находящийся в блочном боксе div и содержащий внутри себя анонимный строчный бокс с текстом «Текст 2»;
  • анонимный блочный бокс, расположенный в блочном боксе div и содержащий анонимный строчный бокс с текстом «Текст 3».

Почему так? Это связано с тем, что когда строчные боксы находятся на одном уровне с блочными боксами, то каждый из строчных боксов оборачивается в анонимный блочный бокс (anonymous block box).

Блочные боксы (block boxes)

Блочный бокс представляет собой прямоугольник, имеющий ширину (width), высоту (height), внешние отступы (margin), внутренние отступы (padding), границу (border) и область для контента.

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

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

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

Строчные боксы (inline box)

Строчные боксы предназначены для представления текстового контента. Они располагаются горизонтально, как строки текста. При этом если inline box не помещается в текущую строку, то он переносится (то, что не поместилось) на следующую строку.

Строчным боксам нельзя задать ширину (width) и высоту (height), т.к. их размеры браузер вычисляют самостоятельно.

Изменить высоту этих inline boxes можно с помощью CSS свойства line-height (высота линии).

Задание отступов в строчных боксах с помощью margin и padding выполняется очень редко, особенно это касается боксов, содержимое которых размещается на нескольких строках. Это связано с тем, что margin и padding в этом случае не работают. Для остальных строчных боксов, т.е. у которых содержимое располагается на одной строке, можно использовать различные отступы ( margin и padding ) за исключением margin-top и margin-bottom .

Обратите внимание, что боксы генерируются из HTML элементов, при этом тип бокса зависит от его вычисленного значения CSS свойства display . При этом один и тот же элемент в зависимости его от конечного значения CSS свойства display может генерироваться как inline box, так и block box.

Когда создаёте HTML 5 документ применяйте элементы в соответствии с их назначением (смыслом). При выборе элемента не придавайте важность CSS свойству display , которое он имеет по умолчанию. Данное значение свойства всегда можно переназначить с помощью CSS.

Итоговый пример

В завершении разберём из каких боксов будет состоять следующий HTML документ и как они будут располагаться на странице в браузере.

Подробное описание модели визуального форматирования

Во всех встречавшихся примерах данной части книги мы уже многократно использовали различные свойства CSS, хотя формально их еще не изучали. И хотя хорошо было бы продолжать знакомиться с общими концепциями оформления в CSS, в частности, с визуальным форматированием, ознакомиться с некоторыми свойствами уже сейчас, поскольку одними только интуитивно понятными «font» и «color» тут уже не ограничиться. Ну а начнем мы с модели блоков, без которой невозможно разобраться в самой сути форматирования, и связанной с ней свойств – отступов, полей и границ.

Модель представления в виде блоков

Модель представления документа в виде блоков, используемая в CSS, вводит понятие прямоугольных областей, которые генерируются для элементов документа и отображаются в нем в соответствии с моделью визуального форматирования, с которой мы подробно познакомимся в следующей главе. А пока разберемся с тем, что представляет собой блок в CSS 2.

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

Рис. 3.6. Схема и терминология блочной модели

Поля, границы и отступы могут быть разбиты на левые, правые, верхние и нижние сегменты (например, на рис. 3.6., «Л.П.» обозначает левое поле, «Л.Г.» – левую границу, а «Л.О.» – левый отступ).

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

  • Краевая линия информативной области или внутренняя краевая линия, которая окружает отображаемое содержимое элемента, порождающего блок;
  • Краевая линия отступов, окружающая ту область блока, которая используется для оформления отступов. Если эта область имеет нулевую ширину, то край отступов совпадает с краем информативной области;
  • Краевая линия границы окружает границу блока. Если ширина границы равна нулю, то ее край совпадает с краем отступов. Именно краевая линия отступов задает границы контейнера;
  • Краевая линия поля, или внешняя краевая линия, окружает поле блока. Если ширина поля равна нулю, то ее край совпадает с краем границы.

Подобно самим полям, любая краевая линия может быть разбита на четыре сегмента: левый, правый, верхний и нижний (left, right, top и bottom). Соответственно, по этим краевым линиям и определяются размеры блока. Так, расстояние между левой и правой внутренними краевыми линиями – это ширина содержимого блока, а между верхней и нижней – его высота.

За размеры полей, рамок и отступов отвечают такие свойства CSS, как margin, border и padding. За что отвечает то или иное свойство хорошо видно по рис. 3.6, а так же из примера в файле box.html.

Поля в CSS (margin)

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

Как известно, поля бывают с четырех сторон – слева, справа, сверху и снизу. Соответственно, в CSS предусмотрены четыре свойства – margin-left, margin-right, margin-top и margin-bottom. Кроме них, существует и сокращенный формат записи – margin, задающий все поля сразу. Значения для полей задаются либо в абсолютных размерах (length), либо в процентах по отношению к ширине содержащего блока.

ВНИМАНИЕ
Всегда следует учитывать, что для каждого блока существует содержащий его блок-контейнер, по отношению к которому рассматриваемый блок будет дочерним. Для элемента BODY, являющимся начальным контейнером для других элементов, содержащим контейнером является окно браузера.

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

Теперь давайте рассмотрим задание полей на практике, для чего обратимся к листингу 3.5.

Листинг 3.5. Поля CSS

Абзац с полем 2 символа сверху. Далее — список с полем 25% от ширины div.

  • Строка списка с полем снизу 10 пикселей
  • Еще строка списка

Конец блока

Визуальное форматирование

Дата добавления: 2013-12-23 ; просмотров: 604 ; Нарушение авторских прав

Блоки

Форматирование текста

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

Таблица 4. Форматирование текста

Свойство Описание
letter-spacing Определяет расстояние между символами в тексте. Его значение задается в единицах длины (mm, pt и др.).
text-transform Определяет регистр текстовых символов. Возможные значения: Capitalize – делает первую букву каждого слова прописной; Uppercase – преобразует все буквы в прописные; Lowercase – преобразует все буквы в строчные
text-decoration None – без подчеркивания Underline – подчеркивание текста; Overline – надчеркивание текста; Line-through – перечеркивание текст.
text-align Выравнивание текста. Допустимые значения: right, left, center.
text-indent Определяет отступ первой строки. Его значение задается в единицах длины (mm, pt и др.).
vertical-align Определяет положение элемента по вертикали. Допустимые значения: Middle – выравнивание базовой линии элемента по базовой линии родителя Sub – нижний индекс Super – верхний индекс Text-top –выравнивание верха элемента с верхом шрифта Text-bottom – выравнивание низа элемента с низом шрифта Top – выравнивание верха элемента с верхом самого высокого элемента строки Bottom – выравнивание низа элемента с ниже всех расположенным элементом строки
line-height Междустрочный интервал. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта на заданное число.

Например:

Данный пример определяет в абзаце двойной междустрочный интервал и отступ первой строки 10 мм.

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

Таблица 5. Форматирование блока

Свойство Описание
Отступы снаружи
margin-top Отступ сверху (верхнее поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto.
margin-right Отступ справа (правое поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto.
margin-bottom Отступ снизу (нижнее поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto.
margin-left Отступ слева (левое поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto.
margin Группирует все вышеперечисленные свойства в одном. Значения перечисляются по часовой стрелке, начиная с верхнего поля. Например: – верхнее поле 10px, правое – 20px, нижнее – 30px, левое – 40px или – отступ 20px со всех сторон
Внутренние отступы
padding-top Отступ внутри от верхней границы рамки.
padding- right Отступ внутри от правой границы рамки
padding- bottom Отступ внутри от нижней границы рамки
padding- left Отступ внутри от левой границы рамки
padding Группирует значения внутренних отступов в одном свойстве. Например: или
Толщина рамки
border-top-width Толщина верхней части рамки
border-right-width Толщина правой части рамки
border-bottom-width Толщина нижней части рамки
border-left-width Толщина левой части рамки
border-width Группирует свойства толщины элементов рамки
Цвет рамки
border- top-color Цвет верхней части рамки
border- right-color Цвет правой части рамки
border- bottom-color Цвет нижней части рамки
border- left-color Цвет левой части рамки
border-color Цвет всех частей рамки
Стиль рамки
border- top-style border- right- style border- bottom- style border- left- style Стиль верхней, правой, нижней, левой частей рамки. Возможные значения: none – граница не отображается solid – сплошная линия double – двойная линия groove – вдавленное оформление границы ridge – выдавленное оформление границы inset – весь блок отображается, как будто он вдавлен в лист outset — весь блок отображается, как будто он выдавлен из листа
border- style Группирует свойства стиля всех частей рамки. Возможные значения: None, solid, double, groove, ridge, inset, outset

Устанавливают свойства, связанные с блоками отображения элементов, их позиционированием и отображением списков.

Таблица 6. Параметры списка

Свойство Описание
list-style-type Определяет тип маркера. Возможные значения: disc – закрашенный кружок circle – не закрашенный кружок square – закрашенный квадратик decimal – арабская цифра с точкой lower-roman – римская строчная цифра с точкой upper-roman – римская прописная цифра с точкой lower-alpha – латинская строчная буква с точкой upper-alpha – латинская прописная буква с точкой none – маркер не отображается
list-style-image Задает в качестве маркера изображение. ul
list-style-position Определяет положение маркера. inside – маркер внутри тела списка, outside – маркер снаружи тела списка.
list-style Группирует свойства списка. UL OL

Таблица 7. Параметры блока

Свойство Описание
width Ширина элемента. Значение указывается в единицах измерения или в процентах. a
height Высота элемента. Значение указывается в единицах измерения или в процентах. h1
float Позиционирование элемента и управление обтеканием остальных элементов. Может принимать следующие значения: · left – элемент располагается слева, остальной текст обтекает вокруг него; · right – элемент располагается справа, остальной текст обтекает вокруг него; · none – элемент располагается как обычный блочный элемент, обтекания не происходит.
clear Обтекание предыдущего обтекаемого элемента. Может принимать следующие значения: · left – элемент располагается ниже предыдущего обтекаемого элемента, если тот содержит параметр «float: left»; · right – элемент располагается ниже предыдущего обтекаемого элемента, если тот содержит параметр «float: right»; · both — элемент располагается ниже предыдущего обтекаемого элемента, если тот содержит параметр «float: right» или «float: left»; · none – элемент располагается рядом с предыдущим обтекаемым элементом.
display Управляет отображением элемента. Может принимать следующие значения: · none – элемент не отображается · block – элемент разбивает строку · inline – элемент не разбивает строку · list-item — элемент разбивает строку и добавляет маркер списка.

Таблица 8. Слои в CSS

Свойство Описание
Position Способ позиционирования слоя. Может принимать следующие значения: Absolute – относительно левого верхнего угла браузера Relative – относительно родительского слоя Static – отображение как обычного блочного элемента
Top Смещение начала слоя по вертикали. Возможные значения: значение с единицей измерения, относительное значение в процентах или auto.
Left Смещение начала слоя по горизонтали. Возможные значения: значение с единицей измерения, относительное значение в процентах или auto.
Width, height Ширина и высота слоя.
Visibility Управление отображением слоя. Возможные значения: Hidden – спрятать слой Inherit – наследовать параметр родительского слоя Visible – показать слой
z-index Уровень слоя при наложении слоя. Возможные значения: Целое число – уровень слоя при наложении слоев Inherit – наследовать параметр родительского слоя Auto – соответствует нулю. То есть слои накладываются в порядке их указания
Overflow Действия при переполнении слоя. Значения: Visible – трансформировать слой при переполнении Hidden – не показывать то, что не уместилось Scroll – показать полосы прокрутки Auto – при переполнении слоя показать полосы прокрутки
Clip Ограничение области видимости слоя. Значения: Rect (top, right, bottom, left) – ограничить область видимости прямоугольником с указанными значениями; Auto – отобразить слой в соответствии с параметром overflow

Пример отображения слоев в Internet Explorer:

Урок 29
Автоматизация форматирования

Изучив эту тему, вы узнаете:

— возможности среды Word по автоматизации операций форматирования документа;
— что такое стилевое форматирование;
— как создавать и применять стили при форматировании многостраничного документа;
— как создавать оглавление в документе;
— какие существуют способы автоматической нумерации рисунков и таблиц;
— что такое перекрестная ссылка и зачем она используется.

Автоперенос

Ранее уже говорилось, что при установке для текста выравнивания по ширине может получиться так, что между словами появятся очень большие расстояния. Чтобы можно было более плотно расположить текст в строке, в среде Word имеется инструмент расстановки переносов.

Задание 3.5. Расстановка переносов в документе

Установите автоматическую расстановку переносов в тексте.

Технология работы

1. Откройте текстовый документ.

2. Выберите команду Сервис ► Язык ► Расстановка.

3. В диалоговом окне включите флажок Автоматическая расстановка переносов. Можно также включить флажок Переносы в словах из прописных букв.

4. Объясните назначение других настроек в этом окне.

5. Для установки принудительного переноса в слове щелкните внутри него и выполните команду Вставка ► Символ ► вкладка Специальный.

6. Вставьте символ «мягкий перенос».

Вставка символа «мягкий перенос» используется в таблицах с узкими столбцами или в тексте с узкими колонками.

Нумерация страниц

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

Задание 3.6. Вставка номеров страниц

Установите автоматическую нумерацию страниц в документе.

Технология работы

1. Откройте документ Макет 1.

2. Выполните команду Вставка ► Номера страниц.

3. В открывшемся диалоговом окне (рис. 3.7) установите положение номера на странице (внизу) и выравнивание (справа).

Рис. 3.7. Нумерация страниц

4. Отключите флажок Номер на первой странице. Как правило, номер на первой странице не ставится.

5. Просмотрите документ. Номера страниц располагаются в области колонтитула. Как расположение номера согласуется с другими элементами колонтитула в документе?

Задание 3.7. Отключение нумерации на отдельных страницах

Отключите расстановку номеров страниц на страницах с альбомной ориентацией:

1. Выполните команду Вид ► Колонтитулы.

2. В области нижнего колонтитула четных и нечетных страниц во втором и третьем разделах документа отключите режим Как в предыдущем.

3. В области нижнего колонтитула четных и нечетных страниц во втором разделе (с альбомной ориентацией текста) выделите и удалите поле номера страницы.

4. Закройте панель Колонтитулы и посмотрите документ.

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

Стилевое форматирование

При работе над документом форматирование можно выполнять вручную, а можно использовать стили.

При форматировании вручную пользователь использует прием «выдели текст и измени параметры». Если изменения его не устраивают, приходится снова изменять форматирование. Иногда приходится потратить достаточное количество времени, чтобы найти приемлемое (с точки зрения пользователя) сочетание параметров текста.

Использование стилей позволяет автоматизировать процесс подбора оптимальных значений параметров.

Надо сказать, что термин «стиль» в среде Word имеет значение, отличное от общеупотребительного. В толковом словаре русского языка С. И. Ожегова дано такое толкование: «Стиль — характерный вид, разновидность чего-нибудь, выражающаяся в особенных признаках, свойствах художественного оформления». Так, например, говоря о стиле одежды, мы подразумеваем особый покрой, разработанный дизайнером, особую ткань, а также использование гармонично подобранных аксессуаров. Стиль в живописи подразумевает определенный способ наложения мазков, использование цветовой гаммы, способы художественной передачи образа.

Стиль в текстовом документе — понятие более утилитарное.

Стиль — это заранее определенный и сохраненный с некоторым именем набор значений параметров текста.

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

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

В среде Word 2003 существуют четыре вида стилей.

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

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

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

Для работы со стилями предусмотрена панель задач Стили и форматирование (рис. 3.8). Ее можно открыть щелчком на кнопке на панели инструментов Форматирование или с помощью команды Формат ► Стили и форматирование. Данная панель задач отображает не только стилевое, но и обычное ручное форматирование. В верхней части панели задач отображается форматирование выделенного фрагмента.

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

♦ Доступные стили — стили, которые используются или ко- гда-либо использовались в данном документе. Можно добавлять и удалять стили из этого списка.

Рис. 3.8. Панель задач Стили и форматирование

Все — список всех стилей, которые можно использовать для форматирования.
Используемое — стили и ручное форматирование, используемые в данном документе хотя бы один раз.
Доступное — стили и ручное форматирование, которые используются или когда-либо использовались в данном документе. Можно добавлять и удалять стили из этого списка.
Специальное — открывает окно Настройки формата.

Используемое форматирование можно посмотреть и применить, используя раскрывающийся список Стиль на панели Форматирование.

Стили определенного вида помечаются специальным значком. Он указывается рядом с названием стиля. В строке, обозначающей применение ручного форматирования, указываются измененные параметры текста по сравнению со стилем данного абзаца или шрифта. Это описание считается названием данного форматирования. При наведении курсора на строку появляется контекстная подсказка с полным описанием форматирования.

В табл. 3.1 приведены примеры отображения форматирования в списке Используемое.

Таблица 3.1. Описание форматирования в списке Используемое

В списке стилей абзаца только у стиля Обычный полностью описаны применяемые параметры шрифта и абзаца (см. табл. 3.4). Другие стили абзаца основаны на стиле Обычный и их описание имеет вид Обычный + . Это означает, что в данных абзацах сохраняются все установки стиля Обычный, а изменяются только указанные параметры. При изменении некоторого параметра в стиле Обычный он будет автоматически изменен во всех стилях, основанных на нем. Это дает дополнительное удобство при переформатировании текста. Например, если изменить размер шрифта в стиле Обычный, то он изменится и в стиле Маркированный список, и в стиле Подзаголовок, и во многих других стилях. Но в то же время размер шрифта не изменится в стилях Заголовок 1, Заголовок 2 и др., так как в них явно установлен другой размер шрифта.

Для стилей знака базовым является стиль Основной шрифт абзаца, для стилей таблицы — Обычная таблица.


Некоторые стили, хотя и существуют, не отображаются в списке всех стилей, например, Знак сноски, Основной шрифт абзаца, стили оглавления и некоторые другие. Чтобы увидеть полный список стилей, надо в поле Показать выбрать Специальное и в открывшемся диалоговом окне щелкнуть на кнопке Стиль.

При создании нового документа в список доступных стилей включены стиль Обычный — для обычного текста, и стили заголовков первого, второго и третьего уровней. По мере использования стилей в документе этот список пополняется.

Стилевое форматирование включает следующие операции:

♦ применение готового стиля;
♦ изменение готового стиля;
♦ создание нового стиля;
♦ создание стиля на основе выделенного фрагмента.

9 Модель визуального форматирования

Эта и последующие главы описывают модель визуального форматирования : то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.

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

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

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

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

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

В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого . Обычно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс «устанавливает» содержащий блок для своих потомков. Фраза «блок, содержащий бокс» означает «блок, в котором бокс находится», а не блок, генерирующий бокс.

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

Корневой элемент дерева документа генерирует бокс, который служит для последующего вывода.

Ширина начального содержащего блока может быть специфицирована свойством ‘width’ корневого элемента. Если это свойство имеет значение ‘auto’, ПА предоставляет начальное значение ширины (например, ПА использует текущую ширину порта просмотра).

Высота начального содержащего блока может быть специфицирована свойством ‘height’ корневого элемента. Если это свойство имеет значение ‘auto’, высота содержащего блока увеличивается, чтобы приспособиться к содержимому документа.

Начальный содержащий блок не может быть позиционирован или всплывать (т.е. ПА игнорируют свойства ‘position’ и ‘float’ корневого элемента).

Детали того, как высчитываются размеры содержащего блока, описаны в следующей главе. 9.2 Управление генерацией боксов

Последующие разделы описывают типы боксов, которые могут генерироваться в CSS2. Тип бокса воздействует отчасти на его (бокса) поведение в модели визуального форматирования. Свойство ‘display’ , описанное ниже, специфицирует тип бокса.

это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства ‘display’ создают элемент уровня блока: ‘block’, ‘list-item’, ‘compact’, ‘run-in’ (не всегда; см. компактные и втягивающиеся боксы) и ‘table’.

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

Некоторые элементы уровня блока генерируют дополнительные боксы за пределами основного бокса: элементы ‘list-item’ и элементы с маркёрами. Эти дополнительные боксы размещаются относительно основного бокса. Анонимные боксы блока

В этом документе: (и приняв, что и DIV, и P оба имеют ‘display: block’), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг «Some text» имеется анонимный бокс блока .

На диаграмме изображены три бокса, один из которых анонимный, в примере — верхний.

Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя другой бокс блока (как P), тогда мы заставляем его иметь боксы блока только внутри себя, перенеся любые инлайн-боксы в анонимный бокс блока.

Эта модель будет применена в следующем примере, если данные правила:

будут использованы в данном документе HTML:

Элемент BODY содержит отрывок (C1) анонимного текста, после которого идут элемент уровня блока и второй отрывок анонимного текста (C2). В результате получим анонимный бокс блока для BODY, содержащий анонимный бокс блока вокруг C1, бокс блока P и второй анонимный бокс блока вокруг C2.

Свойства анонимных боксов наследуются из содержащего неанонимного бокса (в примере: из DIV). Ненаследуемые свойства имеют свои начальные значения. Например, шрифт анонимного бокса наследуется из DIV, но поля имеют значения 0.

это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства ‘display’ делают элемент инлайн: ‘inline’, ‘inline-table’, ‘compact’ и ‘run-in’ (не всегда; см. компактные и втягивающиеся боксы). Элементы инлайн-уровня (встроенные) генерируют инлайн-боксы.

Инлайн-боксы могут принимать участие в различных контекстах форматирования:

  • Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования.
  • Инлайн-бокс compact расположен в поле бокса блока.
  • Боксы-маркёры имеют позицию также вне бокса блока.

Анонимные инлайн-боксы

В таком документе:

элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для «выделенный» — это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы («Некоторый» и «текст») являются инлайн-боксами, сгенерированными элементом уровня блока (P). Последние называются анонимными инлайн-боксами, поскольку они не имеют ассоциированного инлайн-элемента.

Такие анонимные инлайн-боксы наследуют наследуемые свойства своего родительского бокса уровня блока. Ненаследуемые свойства получают свои начальные значения. В примере — цвет анонимных начальных боксов наследуется из P, но фон остаётся прозрачным.

Если из контекста ясно, какой тип анонимных боксов подразумевается, то и боксы инлайн, и боксы уровня блока называются в данной спецификации анонимными боксами.

Имеются и другие типы анонимных боксов, возникающие при форматировании таблиц.

Бокс ведёт себя так:

  • Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в ‘direction’ , специфицируемом для элемента, производящего содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.
  • В ином случае compact-бокс становится боксом блока.

Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого строчного бокса блока, но влияет на расчёт высоты строчного бокса. Свойство ‘vertical-align’ compact-бокса определяет вертикальную позицию compact-бокса относительно строчного бокса. Позиция compact-бокса по горизонтали — всегда в поле бокса блока.

Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент ‘compact’ в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство ‘float’ .

Следующий пример иллюстрирует compact-бокс:

Этот пример может выглядеть после форматирования так:

Свойство ‘text-align’ можно использовать для выравнивания compact-элемента внутри поля: у левого края поля (‘left’), у правого края поля (‘right’) или по центру поля (‘center’). Значение ‘justify’ не применяется и обрабатывается или как ‘left’, или как ‘right’, в зависимости от ‘direction’ /направления элемента блока, в поле которого форматируется compact-элемент (‘left’, если направление — ‘ltr’, ‘right’, если направление ‘rtl’).

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.
9.2.4 Втягивающиеся боксы (run-in)

Бокс ведёт себя так:

  • Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.
  • Иначе бокс run-in становится боксом блока.

Бокс ‘run-in’ используется для run-in-заголовков, как в этом примере:

Этот пример может форматироваться так:

Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.

‘display’

Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Начальное: inline
Применяется: все элементы
Наследуется: нет
Процентное: N/A
Носитель: все

Значения этого свойства имеют следующий смысл:

block Элемент генерирует основной бокс блока. inline Элемент генерирует один или более инлайн-боксов. list-item Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки. marker Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как ‘inline’. См. также раздел Маркёры. none Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства ‘display’ .

Обратите внимание, что отображение ‘none’ не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость. run-in и compact Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство ‘white-space’ применяется только тогда, когда бокс получает уровень блока. table , inline-table , table-row-group , table-column , table-column-group , table-header-group , table-footer-group , table-row , table-cell и table-caption При установке этих значений, элемент ведёт себя как элемент таблицы (ограничения описаны в главе Таблицы).

Заметьте, что, хотя начальное значение ‘display’ — ‘inline’, правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.

Несколько примеров свойства ‘display’ :

В CSS2 бокс может находиться в разных слоях в соответствии со

  1. Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока или инлайн и позиционирование compact и run-in боксов.
  2. Floats/Поплавки. В модели поплавка бокс сначала накладывается в соответствии с нормальным расположением, затем изымается из расположения и сдвигается влево или вправо, насколько возможно. Содержимое может обтекать по стороне «всплывания» поплавка.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования бокс удаляется из нормального расположения полностью (это не действует на последующие родственные элементы) и получает позиционирование относительно содержащего блока.

Свойства ‘position’ и ‘float’ определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

‘position’

Значение: static | relative | absolute | fixed | inherit
Начальное: static
Применяется: ко всем элементам, но не к генерируемому содержимому
Наследуется: нет
Процентное: N/A
Носитель: визуальный

Значения имеют следующий смысл:

static Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства ‘left’ и ‘top’ не применяются. relative Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения. absolute Позиция бокса (и возможные размеры) определяется свойствами ‘left’ , ‘right’ , ‘top’ и ‘bottom’ . Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями. fixed Позиция бокса вычисляется в соответствии с моделью ‘absolute’, но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать ‘fixed’ способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:

Элемент называется , если его свойство ‘position’ имеет значение, отличное от ‘static’. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

| auto | inherit

Начальное: auto Применяется: к позиционируемым элементам Наследуется: нет Процентное: относительно высоты содержащего блока Носитель: визуальный

Это свойство специфицирует, насколько смещён вниз верхний край содержимого бокса относительно верхнего края содержащего блока.

| auto | inherit

Начальное: auto Применяется: к позиционируемым элементам Наследуется: нет Процентное: относительно ширины содержащего блока Носитель: визуальный

Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока.

| auto | inherit

Начальное: auto Применяется: к позиционируемым элементам Наследуется: нет Процентное: относительно высоты содержащего блока Носитель: визуальный

Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока.

| auto | inherit

Начальное: auto Применяется: к позиционируемым элементам Наследуется: нет Процентное: относительно ширины содержащего блока Носитель: визуальный

Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.

Значения для этих четырёх свойств имеют следующий смысл:

Смещением является расстояние от соответствующего края.

Смещением является процент ширины содержащего блока (для ‘left’ или ‘right’ ) или высоты содержащего блока (для ‘top’ и ‘bottom’ ). Для ‘top’ и ‘bottom’, если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как ‘auto’. auto Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение ‘auto’. См. также разделы ширина и высота абсолютно позиционируемых, незамещаемых элементов.

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

Боксы при нормальном обтекании относятся к контексту форматирования , который может быть уровня блока и инлайн, но не тем и другим одновременно. Боксы блока находятся в контексте форматирования блока. Инлайн-боксы находятся в контексте инлайн-форматирования.

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

В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево — касается правый край). Это верно даже в случае с поплавками (хотя область содержимого может усекаться из-за поплавков).

Информацию о разрывах страниц в страничных носителях см. в разделе допустимые разрывы страниц.

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

Каковы преимущества и недостатки ручной верстки сайтов?

Давайте рассмотрим преимущества и недостатки ручной верстки страниц сайта. Подумаем, стоит ли использовать специальные программы и какими они должны быть?

Термины и определения

Для начала «пройдемся» по терминам и определениям:

Верстка — это процесс создания страниц web-сайта по макету дизайна (как правило, PSD-файла) при помощи кода специального языка разметки (HTML, XHTML), так же состоящий из подключенных к ней каскадных таблиц стилей (CSS) и подключаемых дополнительных скриптов (JavaScript и др.) и объектов (Flash-анимация и др.). Язык HTML и стили интерпретируется интернет-браузерами и отображается в виде документа (страницы сайта) в удобной для человека форме.

Визуальный редактор (WYSIWYG-редактор) — редактор с набором инструментов для редактирования текстовой информации, вставки графики и прочих объектов, а также для создания различных документов, в том числе web-страниц.

WYSIWYG (от англ. «What You See Is What You Get» — «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание в процессе редактирования выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, интернет-страницей или презентацией.

Ручная верстка — это верстка, код которой набран вручную, т.е. в любом НЕвизуальном редакторе.

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

Визуальные редакторы

К наиболее распространенным визуальным редакторам относятся: Microsoft Office FrontPage, Adobe Dreamweaver. Начиная с версии 2010 набора Microsoft Office, на смену FrontPage пришла оболочка Microsoft SharePoint Workspace. В составе систем управления сайтами очень популярным редактором является TinyMCE (платформонезависимый JavaScript HTML WYSIWYG редактор на основе WEB). Однако TinyMCE, в отличие от Microsoft Office FrontPage или Adobe Dreamweaver, не является полноценным редактором для разработки страниц на HTML. Это лишь надстройка к различным CMS, предназначенная для удобного редактирования контента сайта.

Как правило, визуальные редакторы имеют 3 режима редактирования документов: визуальный редактор, режим редактирования HTML-кода и совмещенный режим (объединяющий в себе предыдущие 2 режима). В дополнение к этому — инструменты для автоматического форматирования стилей создаваемых страниц, возможность применения различных тем оформления.

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

Основной минус при использовании визуальных редакторов — это, как правило, захламленный код, «паразитный» мусор в HTML-коде и отсутствие семантики.

При описании семантики в рамках операционного подхода к языкам программирования обычно исполнение конструкций языка программирования интерпретируется с помощью некоторой воображаемой (абстрактной) ЭВМ и описывает последствия выполнения конструкций языка с помощью языка логики и задания пред- и постусловий. Иными словами, «семантика» — это определенная логика представления и работы языка программирования; в нашем случае — языка HTML.

Все эти минусы можно устранить и отформатировать после визуального редактора html-код вручную, но зачем делать работу дважды и тратить свое драгоценное время на «чистку» кода, когда можно сразу все сделать правильно и красиво. На помощь к нам приходит ручная верстка сайтов!

Ручная верстка сайтов

Как и в любом деле, в ручной верстке сайтов существуют свои преимущества и недостатки. Давайте разберемся.

К преимуществам ручной верстки сайтов следует отнести:

  • Четкое представление исходного кода страницы и сайта — верстальщик совершенно четко понимает ЧТО он делает и КАК;
  • Отсутствие мусора в коде страницы — код получается правильный, легкий и не нагроможденный лишними тегами и символами;
  • Наличие нужных тегов в коде страницы, например «!DOCTYPE» и «meta»;
  • Возможность выбора конструкции верстки — блочная и/или табличная модель;
  • Быстрое усвоение языка разметки — постоянно набираются повторяющиеся элементы разметки и стилей.

К недостаткам ручной верстки относятся:

  • Человеческий фактор — возможны опечатки и ошибки при наборе тегов разметки и их атрибутов;
  • Отсутствие визуального просмотра страницы — при наборе HTML-кода невозможно оценить внешний вид страницы до тех пор, пока она не будет открыта в интернет-браузере;
  • Большие временные затраты на написание кода — все необходимые изменения производятся вручную;
  • Необходимы специализированные знания языков разметки, стилей и скриптов.

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

Профессионалы за работой

Профессиональные верстальщики работают быстро и качественно, с четким пониманием того, ЧТО они делают и КАК. Работу профессионала несложно увидеть по исходному HTML-коду любой страницы сайта. В дополнение ко всему — хороший верстальщик обязательно учитывает необходимость кроссбраузерной верстки (одинаковое отображение сайта в любом интернет-браузере).

Хороший верстальщик, как и программист, умеет логически думать и создавать необходимые конструкции в разметке при решении поставленной перед ним задачи, отлично знает HTML и CSS, использует JavaScript и другие современные технологии интернет-строительства.

Кроме того, существует ряд специальных текстовых редакторов с функциями подсветки синтаксиса, авто-тегами и другими вспомогательными инструментами, благодаря которым процесс создания HTML-страниц значительно упрощается. К таким редакторам относятся: Notepad++, HomeSite, TextMate и другие.

Советы начинающим

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

Все услуги

Битрикс24

Удобная и понятная система управления компанией и бизнес-процессами, включающая в себя полный комплекс инструментов, необходимых современному руководителю предприятия и его сотрудникам.

Илон Маск рекомендует:  Что такое код accessresource
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL