- •Скачано с http://bizkit.Land.Ru
- •Терминология
- •1. Базовые понятия
- •1.1 Включение в html
- •1.2 Группирование
- •1.3 Наследование
- •1.4 Класс в качестве селектора
- •1.5 Id в качестве селектора
- •1.6 Контекстные селекторы
- •1.7 Комментарии
- •2. Псевдо-классы и псевдо-элементы
- •2.1 Псевдо-классы ссылок
- •2.2 Типографские псевдо-элементы
- •2.3 Псевдо-элемент 'first-line'
- •2.4 Псевдо-элемент 'first-letter'
- •2.5 Псевдо-элементы в селекторах
- •2.6 Множество псевдо-элементов
- •3. Каскадирование
- •3.2 Порядок каскадирования
- •4 Модель форматирования
- •4.1 Блочные элементы
- •4.1.1 Вертикальное форматирование
- •4.1.2 Горизонтальное форматирование
- •4.1.3 Элементы-списки
- •4.1.4 Плавающие элементы
- •4.2 Строчные элементы
- •4.3 Замещаемые элементы
- •4.4 Высота строки
- •4.5 Холст
- •4.6 Элементы 'br'
- •5 Свойства css1
- •5.1 Разъяснение значений свойств.
- •5.2 Свойства шрифта
- •5.2.1 Распознавание шрифта.
- •5.2.2 Задание семейства шрифта ('font-family').
- •5.2.3 Задание начертания шрифта ('font-style')
- •5.2.4 Задание варианта шрифта ('font-variant').
- •5.2.5 Задание веса шрифта ('font-weight')
- •5.2.6 Задание размера шрифта ('font-size').
- •5.2.7 Задание шрифта в целом ('font')
- •5.3 Свойства "цвет" (color) и "фон" (background).
- •5.3.1 Определение цвета ('color')
- •5.3.2 Определение цвета обоев ('background-color').
- •5.3.3 Определение рисунка фона ('background-image').
- •5.3.4 Определение повтора рисунка фона ('background-repeat').
- •5.3.5 Определение привязки фона ('background-attachment').
- •5.3.6 Определение положения фона ('background-position')
- •5.3.7 Определение свойств фона в целом ('background')
- •5.4 Свойства текста
- •5.4.1 Установка интервалов ('word-spacing')
- •5.4.2 Установка трекинга ('letter-spacing')
- •5.4.3 Установка оформления текста ('text-decoration')
- •5.4.4 Установка вертикального выравнивания текста ('vertical-align').
- •5.4.5 Установка преобразования текста ('text-transform')
- •5.4.6 Установка выравнивания текста ('text-align')
- •5.4.7 Установка абзацного отступа ('text-indent')
- •5.4.8 Установка высоты строки ('line-height').
- •5.5 Свойства полей.
- •5.5.11 Установка ширины верхней рамки ('border-top-width').
- •5.5.16 Установка цвета рамки ('border-color').
- •5.5.17 Установка стиля рамки ('border-style')
- •5.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')
- •5.5.23 Установка свойства "ширина" ('width')
- •5.5.24 Установка свойства "высота" 'height'
- •5.5.25 Установка свойства "плавающий" ('float')
- •5.5.26 Установка свойства "чисто" ('clear')
- •5.6 Свойства - классификации
- •5.6.1 Установка свойства "показ" ('display')
- •5.6.2 Установка пробелов ('white-space')
- •5.6.3 Установка типа маркера перечня ('list-style-type')
- •5.6.4 Установка рисунка маркера перечня ('list-style-image').
- •5.6.5 Установка отступа маркера перечня 'list-style-position'
- •5.6.6 Установка обобщающего свойства "перечень" ('list-style')
- •6 Единицы измерения значений.
- •6.1 Установка единиц длины
- •6.2 Процентное выражение
- •6.3 Обозначение цвета
- •7 Совместимость с css1
- •7.1 Последовательно-совместимый синтаксический анализ
- •8 Литература
- •Приложение a: Пример таблицы стилей для html 2.0
- •Приложение b: Грамматика css1
- •Приложение c: Кодирование
- •Приложение d: Gamma correction
- •Приложение e: Применимость и расширяемость css1
4.2 Строчные элементы
Элементы, не форматируемые как блочные, относятся к строчным. Строчный элемент может делить пространство строки с другими элементами. Рассмотрим следующий пример:
<P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG>.</P>
Элемент 'P' - нормальный блочный, в то время как 'EM' и 'STRONG' - строчные. Если ширина элемента 'P' достаточна, чтобы расположить весь элемент на одной строке, то тогда в строке будут два строчных элемента:
Несколько подчеркнутых слов имеется.
Если же в строке места не хватает, строчные элементы будут разбиты на несколько полей:
<P>Несколько <EM>подчеркнутых слов</EM> имеют место.</P>
Форматирование этого примера будет выглядеть как:
Несколько подчеркнутых
слов имеют место.
Если строчный элемент имеет границы, бордюры, заполнение или приложенное текстовое оформление, то их эффект не будет проявляться в месте расчленения элемента:
-------------
Несколько |подчеркнутых
-------------
-----
слов | имеют место.
-----
(Вышеприведенный рисунок несколько искажается из-за использования псевдографики ASCII. См. описание вычисления высоты линий в разделе 4.4.)
4.3 Замещаемые элементы
Замещаемые элементы - это элементы, замещаемые содержанием, указываемым в элементе. Например элемент 'IMG' замещается изображением, указанным в атрибуте 'SRC'. Важным свойством замещаемых элементов является наличие своих внутренних размеров. Если значения свойства "ширина"('width') равна 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение иное, чем 'auto' из перечисленных в таблице стилей, то это значение и используется, а замещаемый элемент соответственно меняет размеры (метод изменения размеров будет определяться видом информационного объекта). Таким же образом используется свойство "высота" ('height').
Замещаемые элементы могут быть как блочными, так и строчными.
4.4 Высота строки
Все элементы имеют свойство "высота строки" ('line-height'), что, в принципе, определяет общую высоту строки или текста. Высота строки увеличивается на промежуток, вставляемый выше и ниже текста в строке. К примеру, если текст 12 пунктов, высота и "высота строки" устанавливаются равными '14pt', т.к. вставляется промежуток в 2 пункта, 1 сверху и 1 снизу строки. Пустые элементы влияют на эти расчеты точно так же, как и имеющие содержание.
Разница между размером шрифта (font size) и "высотой строки" называется интервалом (leading). Половина интервала называется полуинтервалом (half-leading). После форматирования каждая строка образует прямоугольное строчное поле.
Если строка текста содержит секции с разными значениями свойства "высота строки" (т.к. может быть несколько строчных элементов в одной строке), то каждая из таких секций имеет собственный полуинтервал сверху и снизу. Высота строчного поля отсчитывается от высоты самой высокой секции до низа самой низкой. Обратите внимание, что верх и низ не обязательно соответствуют наиболее высокому элементу, поскольку элементы могут быть позиционированы с помощью свойства "вертикальное выравнивание" ('vertical-align'). При формировании параграфа каждое строчное поле располагается ниже предшествующей строки.
Обратите внимание на то, что какой-либо отступ, рамка или граница сверху или снизу не замещаемого строчного элемента не влияют на высоту строки. Иными словами, если значение свойства "высота строки" слишком мало для выбранных отступа или рамки, они будут перекрываться с текстом других строк.
Замещаемые элементы, (например, изображения) в строке могут увеличить строковое поле, если вершина замещаемого элемента (включая полностью его отступ, рамку и границу) находится выше самой высокой секции текста, или его низ находится ниже самой низкой секции.
В нормальных условиях, если в параграфе указано только одно значение свойства "высота строки", и при отсутствии высоких изображений, по предшествующему определению будет проверено, имеют ли базы последующих строк обособленное значение параметра "высота строки". Это важно в случае выравнивания текстовых колонок с различным шрифтом, например, в таблице.
Следует иметь в виду, что это не позволяет исключить возможность перекрытия текста двух смежных строк. Значение свойства "высота строки" может оказаться меньше высоты текста, и интервал в этом случае будет отрицательным. Это обстоятельство может оказаться полезным, если заранее известно, что в тексте не будет подстрочных символов (напр. если там будут только символы верхнего регистра), и тогда строки можно сблизить.