Хочу напомнить (чтоб не было лишних вопросов), что упомянутые в статьях «Дизайн текста» элементы HTML используются для стандартного способа отображения содержимого. Здесь не рассматриваются варианты нестандартной вёрстки страницы с помощью этих элементов.
Вложенные неупорядоченные списки В прошлой статье, мы рассмотрели вариант размещения списка приближённого к предыдущему абзацу, для того, чтобы показать, что список является продолжением абзаца. Для того, чтобы поднять список повыше, в CSS была добавлена строка «margin: -16px 0 16px 0;» для элемента ul. Теперь, для внутренних списков нужно убрать этот отрицательный отступ:
По-умолчанию, у списка третьего уровня и глубже в качестве маркеров используются квадратики. Если у нас маркеры изначально были кружочками, то переход на угловатые формы слишком контрастен. Если уж что-то использовать, то что-то одно — либо кружочки, либо квадратики. Поэтому, я рекомендую чередовать закрашенный кружочек и незакрашенный или обходиться только одним квадратиком. Как правило списки не составляются слишком глубокими. Если иерархия многоуровневая, то стоит подумать над тем, чтобы заменить элементы списка верхнего уровня, например, на заголовки и разделить список на блоки с этими заголовками. Отступы внутренних элементов должны быть такими, чтобы маркеры на несколько уровней располагались на одной линии. Идеально, когда наклон линии равен 45°. Что характерно: В Firefox при установленном шрифте Times New Roman 16px (по-умолчанию) маркеры выглядят как ромбики. Установите размер 15px и получите нормальные кружочки. В списке третьего и более уровня размер шрифта можно уменьшить на 1—2 пикселя, если шрифт не уменьшится до нечитаемого. Вложенные упорядоченные спискиХороший тон — использование не больше трёх различных вариантов нумерации элементов списка. Поскольку в качестве маркеров используются цифры или буквы, то они явно менее компактны, чем маркеры неупорядоченных списков, поэтому придётся отступы вложенных списков сделать побольше. Как правило, арабские цифры используются для нумерации упорядоченных элементов. Арабские цифры могут быть использованы практически для любых списков. Не зазорно использовать только их для всех уровней списков. Иногда, во внутренних списках, когда последовательность не так важна, но стилизацию не хочется портить, можно в качестве маркеров использовать строчные латинские буквы. Они не такие броские как маркеры неупорядоченных списков. Римские цифрыИспользование римских цифр должно быть серьёзно оправдано. Эти цифры можно использовать для нумерации главных разделов документов и тезисов, а так же глав различных публикаций. Поскольку римские цифры в CSS даются нам в двух вариантах (прописные и строчные), хорошо использовать их вместе. Прописные — для верхнего уровня, строчные — для второго. Не рекомендую вместе с римскими цифрами использовать латинские, т. к. это может вызвать путаницу (римские цифры состоят из латинских букв). Лучше для списков более глубокого уровня использовать арабские цифры. Использовать римские цифры стоит только в крайнем случае. Они характерны непоследовательным изменением визуального размера, в зависимости от количества символов используемых в цифре. В результате маркеры в списке будут скакать, что негативно отразится на удобочитаемости. Опять же, рассчитать адекватные отступы не представляется возможным. Если необходимо использовать римские цифры, то рекомендую их использовать не в списках а в заголовках и прописывать вручную. Списки с графическими маркерамиСуществует возможность вместо стандартных маркеров неупорядоченных списков использовать свои картинки. Стандартно это реализуется с помощью свойства CSS list-style-image. Этот вариант не рекомендую использовать, поскольку в разных браузерах картинка будет отображаться с разными отступами. Лучшее решение — вставка картинки перед текстом в элементе списка в качестве фона. В данном случае, отступ (padding) нужно делать для элемента списка. Картинку следует располагать на уровне строчного символа или чуть-чуть выше. Если маркеры внутренних списков отличаются, то возникнет проблема позиционирования, каждый уровень придётся подгонять отдельно. Опять же контраст формы маркеров не должен быть слишком сильным. Желательно выбрать какую-либо форму и слегка её изменять. Изменение формы должно быть такое, чтобы визуально маркеры отличались по весу символа. Закрашенный треугольник выглядит тяжелее незакрашенного, а стрелочка третьего уровня является отсечённой частью незакрашенного треугольника и выглядит легче. Пример вёрстки упомянутых в статье элементов Вложенные спискиНеупорядоченный списокВ испытаниях мог принять участие любой, невзирая на: - возраст:
- молодые:
- младенцы,
- дети:
- 1—5 лет,
- 5—10 лет,
- 10—14 лет;
- подростки,
- юноши и девушки;
- взрослые,
- старые;
- пол:
- рост;
- вес;
- происхождение.
Упорядоченный списокАдептам предстоит пройти три этапа испытания: - Защита:
- Обнаружение:
- Первый уровень,
- Второй уровень,
- Эксперт-уровень:
- Part-contact,
- Full-contact;
- Предотвращение,
- Рассредоточение,
- Уклонение,
- Активные ответные меры;
- Атака,
- Стратегическое планирование.
Списки с графическими маркерамиВ испытаниях мог принять участие любой, невзирая на: - возраст:
- молодые:
- младенцы,
- дети,
- подростки,
- юноши и девушки;
- взрослые,
- старые;
- пол:
- рост;
- вес;
- происхождение.
seleckis.lv/journal/web-dizayn/dizayn-teksta-3-5 |