- •Скачано с 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.5 Холст
Холст представляет собой часть изображаемой на экране поверхности UA, где воспроизводятся документы. Ни один из структурных элементов документа не сопоставляется с холстом, в связи с чем при форматировании документа возникают два вопроса:
откуда должны определяться размеры холста?
если документ не покрывает весь холст, как должна воспроизводиться эта область?
Логично было бы ответить на первый вопрос: "Изначальные размеры холста основаны на размерах окна", но CSS1 оставляет эту задачу на усмотрение UA. Также было бы логично, чтобы UA менял размеры холста соответственно размерам окна, но это также выходит за рамки полномочий CSS1.
Расширение языка HTML создало прецедент по второму вопросу: атрибуты элемента 'BODY' определяют фон для всего холста. Чтобы не разочаровать дизайнеров, CSS1 использует особое правило для определения фона холста:
Если значения свойств фона для элемента 'HTML' отличаются от 'transparent', то они и используются, в ином случае используются значения свойств фона, указанные для элемента 'BODY'. Если в результате все равно значение параметров фона равно 'transparent', то свойства фона считаются незаданными.
По этому правилу допускается:
<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">
В вышеуказанном примере, холст покрывается картинкой marble.png. Фон элемента 'BODY' (он может и не полностью покрывать холст) будет красным.
Пока другие способы адресации графики на холсте не станут доступными, рекомендуется, чтобы свойства холста задавались в элементе 'BODY'.
4.6 Элементы 'br'
Текущие свойства и значения CSS1 не способны описать поведение элемента 'BR'. В языке HTML элемент 'BR' определяется как перевод строки между словами. Фактически, это принудительный перевод строки. Будущие версии CSS будут поддерживать ввод и замену содержания, но средства форматирования основанные на CSS1, должны использовать отдельные алгоритмы обработки объекта 'BR'
5 Свойства css1
Таблицы стилей влияют на внешний вид документа путем присвоения тех или иных значений свойствам стилей. В данном разделе перечисляются определения свойств стилей и приводится соответствующий перечень значений, допускаемых CSS1.
5.1 Разъяснение значений свойств.
В настоящем тексте допустимые значения для каждого свойства перечисляются с синтаксисом, подобным приведенному ниже:
Значение: N | NW | NE
Значение: [ <length> | thick | thin ]{1,4}
Значение: [<family-name> , ]* <family-name>
Значение: <url>? <color> [ / <color> ]?
Значение: <url> || <color>
Слова между "<" и ">" дают нам тип значения. Наиболее распространенными типами являются <length> (длина), <percentage> (доля, процент), <url>, <number> (число) и <color> (цвет); они описаны в разделе 6. Более специфические типы (такие, как <font-family> и <border-style>) описаны в разделах соответственно свойствам.*
Другой вид слов - ключевые, которые должны указываться литерально, без знаков препинания. Знаки "слеш" (/) и запятая (,) также должны указываться литерально.
Если что-то размещается рядом, то это значит, что действия должны производиться в указанном порядке. Вертикальная черта (A|B) означает исключающее ИЛИ (ИЛИ-НЕ); должно происходить одно из двух. Двойная черта (A||B) означает объединяющее ИЛИ (ИЛИ-И) - или и то и другое, или одно из двух. Квадратные скобки([]) - группировка. Расположение рядом важнее, чем ИЛИ-И, а последнее важнее, чем ИЛИ-НЕ. Так, "a b | c || d e " равноценно "[ a b ] | [ c || [ d e ]]".
Каждый знак, ключевое слово или группа в скобках могут следовать за одним из модификаторов:
Звездочка (*) означает, что предшествующие знак, слово или группа повторяются ноль или более раз.
Плюс (+) означает, что предшествующие знак, слово или группа повторяются один или более раз.
Знак вопроса (?) означает, что предшествующие знак, слово или группа являются необязательными (optional).
Два числа в фигурных скобках ({A,B}) означают, что предшествующие знак, слово или группа повторяются не менее чем А и не более чем В раз.