- •Скачано с http://bizkit.Land.Ru css – учебник, спецификация. Терминология
- •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.1 'Important'
- •3.2 Порядок каскадирования
- •4 Модель форматирования
- •4.1 Блочные элементы
- •4.1.1 Вертикальное форматирование
- •4.1.2 Горизонтальное форматирование
- •4.1.3 Элементы-списки
- •4.1.4 Плавающие элементы
- •Img { float: left }
- •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.1 Установка верхней границы ('margin-top').
- •5.5.6 Установка верхнего отступа ('padding-top').
- •5.5.11 Установка ширины верхней рамки ('border-top-width').
- •5.5.12 Установка ширины правой рамки('border-right-width').
- •5.5.13 Установка ширины нижней рамки('border-bottom-width')
- •5.5.14 Установка ширины левой рамки 'border-left-width'
- •5.5.15 Установка обобщающего свойства "ширина рамки" ('border-width')
- •5.5.16 Установка цвета рамки ('border-color').
- •5.5.17 Установка стиля рамки ('border-style')
- •5.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')
- •5.5.19 Установка обобщающего свойства "правая рамка" ('border-right')
- •5.5.20 Установка обобщающего свойства "нижняя рамка" ('border-bottom')
- •5.5.21 Установка обобщающего свойства "левая рамка" 'border-left'
- •5.5.22 Установка обобщающего свойства " рамка" 'border'
- •5.5.23 Установка свойства "ширина" ('width')
- •Img.Icon {
- •5.5.26 Установка свойства "чисто" ('clear')
- •5.6 Свойства - классификации
- •5.6.1 Установка свойства "показ" ('display')
- •Img { display: none }
- •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 Обозначение цвета
- •100.0% */
- •6.4 Url
- •7 Совместимость с css1
- •7.1 Последовательно-совместимый синтаксический анализ
- •Img { float: left } /* верно для css1 */
- •8 Литература
- •Приложение a: Пример таблицы стилей для html 2.0
- •Img, span { display: inline }
- •I, cite, em, var, address, blockquote { font-style: italic }
- •Приложение b: Грамматика css1
- •Ident {nmstrt}{nmchar}*
- •Appendix c: Encoding
- •Character encoding
- •Font encoding
- •Font sets
- •Appendix d: Gamma correction
- •Appendix e: The applicability and extensibility of css1
- •Приложение c: Кодирование
- •Character encoding
- •Font encoding
- •Font sets
- •Приложение d: Gamma correction
- •Приложение e: Применимость и расширяемость css1
6 Единицы измерения значений.
6.1 Установка единиц длины
Формат значения длины состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного идентификатора размерности в виде двухбуквенной аббревиатуры, указываемых в последовательности перечисления в настоящем абзаце. После числа "0" идентификатор размерности не обязателен.
Некоторые свойства используют отрицательные единицы длины, однако это может усложнить способ форматирования и могут возникнуть ограничения, диктуемые особенностями отработки. Если отрицательная длина не поддерживается, то она должна быть замещена ближайшим поддерживаемым значением.
Существуют два типа единиц длины: относительные и абсолютные. Относительные единицы определяют длину относительно другой длины свойства. Если таблица стилей использует относительные единицы, то это более удобно для масштабирования страницы на разных периферийных устройствах (напр. при выводе с экрана на печать). Такого эффекта позволяют достичь и процентные выражения (как показано ниже), а также зарезервированные слова (напр. 'x-large').
Поддерживаются следующие относительные единицы:
H1 { margin: 0.5em } /* ems, высота шрифта элемента */
H1 { margin: 1ex } /* x-height, ~ по высоте буквы 'x'*/
P { font-size: 12px } /* pixels, в пикселах относительно
холста */
Относительные единицы 'em' и 'ex' определяются относительно размера шрифта самого элемента. Единственное исключение из этого правила делается для свойства "размер шрифта" ('font-size'), для которого 'em' и 'ex' определяются по размеру шрифта родительского элемента.
Пиксели, указанные в последнем примере, определяются относительно разрешения холста, чаще всего - экранного разрешения. Если разрешающая способность устройства вывода отличается от характерной для экрана, UA должен масштабировать значение в пикселях. Замещающий пиксель соответствует углу зрения, под которым виден один пиксель на устройстве с разрешающей способностью 90 точек на дюйм на расстоянии, оптимальном для зрения. При величине последнего 28 дюймов угол зрения приблизительно равен 0,0227 градуса.
Дочерние элементы наследуют вычисленное значение, а не относительное:
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt */
}
H1 { font-size: 15pt }
В приведенном примере значение абзацного отступа ('text-indent') элемента H1 будет равно 36 пунктов, а не 45.
Абсолютные единицы длины используются лишь в тех случаях, когда заведомо известны физические характеристики устройства вывода. Поддерживаются следующие абсолютные единицы:
H1 { margin: 0.5in } /* inches, 1in = 2.54cm */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points, 1pt = 1/72 in*/
H5 { font-size: 1pc } /* picas, 1pc = 12pt */
В случаях, когда заданная длина не может быть отработана, UA должны аппроксимировать ее. Дальнейший пересчет и наследование для всех свойств CSS1 должен уже основываться на результатах аппроксимации.
6.2 Процентное выражение
Формат процентного выражения состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного знака "%", указываемых в последовательности перечисления в настоящем абзаце.
Процентное значение всегда является относительным к другому, например, к значению длины. При назначении процентного выражения для каждого случая предполагается наличие базы отсчета - чаще всего это размер шрифта данного элемента:
P { line-height: 120% } /* 120% размера шрифта элемента */
Для всех наследованных свойств CSS1 считается, что если значение было указано в виде процентного выражение, то дочерние элементы наследуют результирующее значение, а не величину процентовки.