- •Скачано с 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
4.4 Высота строки
Все элементы имеют свойство "высота строки" ('line-height'), что, в принципе, определяет общую высоту строки или текста. Высота строки увеличивается на промежуток, вставляемый выше и ниже текста в строке. К примеру, если текст 12 пунктов, высота и "высота строки" устанавливаются равными '14pt', т.к. вставляется промежуток в 2 пункта, 1 сверху и 1 снизу строки. Пустые элементы влияют на эти расчеты точно так же, как и имеющие содержание.
Разница между размером шрифта (font size) и "высотой строки" называется интервалом (leading). Половина интервала называется полуинтервалом (half-leading). После форматирования каждая строка образует прямоугольное строчное поле.
Если строка текста содержит секции с разными значениями свойства "высота строки" (т.к. может быть несколько строчных элементов в одной строке), то каждая из таких секций имеет собственный полуинтервал сверху и снизу. Высота строчного поля отсчитывается от высоты самой высокой секции до низа самой низкой. Обратите внимание, что верх и низ не обязательно соответствуют наиболее высокому элементу, поскольку элементы могут быть позиционированы с помощью свойства "вертикальное выравнивание" ('vertical-align'). При формировании параграфа каждое строчное поле располагается ниже предшествующей строки.
Обратите внимание на то, что какой-либо отступ, рамка или граница сверху или снизу не замещаемого строчного элемента не влияют на высоту строки. Иными словами, если значение свойства "высота строки" слишком мало для выбранных отступа или рамки, они будут перекрываться с текстом других строк.
Замещаемые элементы, (например, изображения) в строке могут увеличить строковое поле, если вершина замещаемого элемента (включая полностью его отступ, рамку и границу) находится выше самой высокой секции текста, или его низ находится ниже самой низкой секции.
В нормальных условиях, если в параграфе указано только одно значение свойства "высота строки", и при отсутствии высоких изображений, по предшествующему определению будет проверено, имеют ли базы последующих строк обособленное значение параметра "высота строки". Это важно в случае выравнивания текстовых колонок с различным шрифтом, например, в таблице.
Следует иметь в виду, что это не позволяет исключить возможность перекрытия текста двух смежных строк. Значение свойства "высота строки" может оказаться меньше высоты текста, и интервал в этом случае будет отрицательным. Это обстоятельство может оказаться полезным, если заранее известно, что в тексте не будет подстрочных символов (напр. если там будут только символы верхнего регистра), и тогда строки можно сблизить.
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'.