Евгений Резниченко - Спецификация CSS2
Скачивание начинается... Если скачивание не началось автоматически, пожалуйста нажмите на эту ссылку.
Жалоба
Напишите нам, и мы в срочном порядке примем меры.
Описание книги "Спецификация CSS2"
Описание и краткое содержание "Спецификация CSS2" читать бесплатно онлайн.
Курс построен по спецификации, которая определяет язык каскадных таблиц стилей CSS2.
Данная спецификация поддерживает позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счётчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.
может дать на выходе:
i Это первый элемент списка. ii Это второй элемент списка. iii Это третий элемент списка.
Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.
Примечание. Следующие версии CSS могут предоставить более совершенные механизмы международных стилей нумерации.
'list-style-image'
Значение: <uri> | none | inherit
Начальное: none
Применяется: к элементам с 'display: list-item'
Наследуется: да
Процентное: N/A
Носитель: визуальный
Это свойство определяет изображение, которое будет использоваться как маркёр элемента списка. Если изображение доступно, оно замещает маркёр, установленный 'list-style-type'.
В следующем примере устанавливается маркёр - изображение "ellipse.png" - в начале каждого элемента списка .
UL { list-style-image: url("http://png.com/ellipse.png") }
'list-style-position'
Значение: inside | outside | inherit
Начальное: outside
Применяется: к элементам с 'display: list-item'
Наследуется: да
Процентное: N/A
Носитель: визуальный
Это свойство специфицирует позицию бокса маркёра в основном боксе блока. Значения имеют следующий смысл:
outside
Бокс маркёра находится вне основного бокса блока
Примечание. CSS1 не специфицировал точное размещение бокса маркёра из соображений совместимости, и в CSS2 осталась такая же двусмысленность. Для более точного управления боксами маркёров используйте маркёры.
inside
Бокс маркёра это первый инлайн-бокс в боксе основного блока, после которого всплывает содержимое элемента.
Например:
<HTML> <HEAD> <TITLE>Сравнение позиций inside/outside</TITLE> <STYLE type="text/css"> UL { list-style: outside } UL.compact { list-style: inside } </STYLE> </HEAD> <BODY> <UL> <LI>first list item comes first <LI>second list item comes second </UL> <UL class="compact"> <LI>first list item comes first <LI>second list item comes second </UL> </BODY> </HTML>
Этот пример отображается так:
[D]В тексте справа-налево маркёры должны выводиться с правой стороны бокса.
'list-style'
Значение: [ <list-style-type> || <'list-style-position'> || <'list-style-image'> ] | inherit
Начальное: не определено для сокращённых свойств
Применяется: к элементам с 'display: list-item'
Наследуется: да
Процентное: N/A
Носитель: визуальный
Свойство 'list-style' - это сокращённое обозначение для установки трёх свойств: 'list-style-type', 'list-style-image' и 'list-style-position' в одном месте в таблице стилей.
UL { list-style: upper-roman inside } /* Какой-либо UL */ UL > UL { list-style: circle outside } /* UL - потомок UL */
Хотя авторы могут специфицировать информацию о 'list-style' непосредственно в элементах списка (напр., LI в HTML), это нужно делать аккуратно. Следующие правила похожи, но в первом объявляется селектор-потомок, а во втором (более специфический) дочерний селектор.
OL.alpha LI { list-style: lower-alpha } /* LI - потомок OL */ OL.alpha > LI { list-style: lower-alpha } /* LI-наследник OL */
Авторы, использующие только селекторы-потомки, могут не получить тот результат, на который рассчитывали. Рассмотрим следующие правила:
<HTML> <HEAD> <TITLE>ПРЕДУПРЕЖДЕНИЕ: Непредсказуемый результат из-за каскадирования</TITLE> <STYLE type="text/css"> OL.alpha LI { list-style: lower-alpha } UL LI { list-style: disc } </STYLE> </HEAD> <BODY> <OL class="alpha"> <LI>level 1 <UL> <LI>level 2 </UL> </OL> </BODY> </HTML>
Ожидается, что элементы списка уровня 1 будут маркированы лэйблами 'lower-alpha', а элементы уровня 2 - лэйблами 'disc'. Однако порядок каскадирования вызовет маскирование второго правила первым (которое содержит специфическую информацию класса). В следующих правилах для решения проблемы используется дочерний селектор:
OL.alpha > LI { list-style: lower-alpha } UL LI { list-style: disc }
Другим решением может быть спецификация информации 'list-style' только для типа элемента списка:
OL.alpha { list-style: lower-alpha } UL { list-style: disc }
При наследовании значения 'list-style' будут перенесены из элементов OL и UL в элементы LI. Это рекомендуемый способ спецификации информации стиля списка.
Значение URI может комбинироваться с любым другим значением, как здесь:
UL { list-style: url("http://png.com/ellipse.png") disc }
В данном примере 'disc' будет использоваться, если изображение недоступно. Значение 'none' свойства 'list-style' устанавливает 'list-style-type' и 'list-style-image' в 'none':
UL { list-style: none }
В результате - никакие маркёры элементов списка не отображаются.
Лекция 13. Страничные носители
Страничный носитель (например, бумага, плёнка, страницы , выводимые на экране компьютера и т.п.) отличается от непрерывного носителя тем, что содержимое документа разделяется на одну или более абстрактных страниц. Чтобы обрабатывать разрывы страниц, CSS2 расширяет модель визуального форматирования следующим образом:
1Страничный бокс расширяет модель бокса, что позволяет авторам специфицировать размеры страницы, её полей и т.д.
2Страничная модель расширяет модель визуального форматирования, чтобы рассчитывать разрывы страниц.
Страничная модель CSS 2 специфицирует, как форматируется документ в пределах прямоугольной области - страничного бокса - который имеет конечные ширину и высоту. Страничный бокс не обязательно соответствует реальному листу\странице, на котором документ в конце концов будет выведен (бумага, плёнка, экран и т.п.). Страничная модель CSS специфицирует форматирование в страничном боксе, но за перенос страничного бокса на лист отвечает пользовательский агент (ПА).
Некоторые возможности переноса:
[x]. Перенос одного страничного бокса на один лист (например, односторонняя печать).
[x]. Перенос двух страничных боксов на две стороны одного листа (например, двухсторонняя печать).
[x]. Перенос N (маленького) страничного бокса на один лист (называется "n-up").
[x]. Перенос одного (большого) страничного бокса на N x M листов (называется "tiling").
[x]. Создание подписей. Подпись, это группа страниц, напечатанных на листе, которые после брошюрования и обрезки выглядят, как книга, и расположены в соответствующем порядке.
[x]. Печать одного документа в несколько потоков печати.
[x]. Вывод в файл.
Хотя CSS2 не специфицирует то, как ПА переносят страничные боксы на листы, не даётся также и определённого механизма для того, чтобы сообщить ПА о размерах и ориентации целевого листа.
Страничный бокс это прямоугольный регион, содержащий две области:
[x]. Область страницы. Включает боксы, расположенные на этой странице. Края области страницы работают как начальный содержащий блок планировки и расположены между разрывами страниц.
[x]. Область полей, окружающих область страницы.
Примечание. В CSS2 свойства рамки и заполнения не применяются к страницам; это возможно в будущем.
Авторы специфицируют размеры, ориентацию, поля и т.п. страничного бокса в правиле @page. Правило @page состоит из ключевого слова "@page", селектора станицы (и, без пробелов, возможного псевдокласса страницы) и блока объявлений (находящихся в т.н. контексте страницы).
Селектор страницы специфицирует, для каких страниц объявления применяются. В CSS2 селекторы страницы могут означать первую страницу, все левые страницы, все правые страницы или страницу с определённым именем.
Размеры страничного бокса устанавливаются свойством 'size'. Размеры области страницы - это размеры страничного бокса минус область полей.
Следующее правило @page устанавливает размер страничного бокса в 8.5 x 11 дюймов и создаёт поле '2см' со всех сторон между краем страничного бокса и областью листа:
@page { size 8.5in 11in; margin: 2cm }
Свойство 'marks' в правиле @page специфицирует знаки обрезки и крестика для страничного бокса.
Свойства полей ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin') применяются внутри контекста страницы. На следующей диаграмме показаны соотношения между листом, страничным боксом и полями страницы:
[D]Вычисленное значение полей бокса вверху или внизу области страницы - '0'.
Контекст страницы не имеет никаких указаний о шрифте, так что единицы измерения 'em' и 'ex' не допускаются. Процентные значения свойств полей относительны к размерам страничного бокса; для левого и правого полей - они соотносятся с шириной страничного бокса, а для верхнего и нижнего полей - к высоте страничного бокса. Все другие единицы измерения, ассоциированные с соответствующими свойствами CSS2, являются допустимыми.
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "Спецификация CSS2"
Книги похожие на "Спецификация CSS2" читать онлайн или скачать бесплатно полные версии.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "Евгений Резниченко - Спецификация CSS2"
Отзывы читателей о книге "Спецификация CSS2", комментарии и мнения людей о произведении.