- •Скачано с 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
3.1 'Important'
Дизайнеры таблиц стилей могут увеличить веса определений:
H1{color: black ! important; background: white ! important}
P {font-size: 12pt ! important; font-style: italic }
В приведенном примере первые три определения имеют повышенный вес, а последнее определение имеет нормальный вес.
Читательское правило с повышенным с помощью 'important' весом определения переопределяет правило автора с нормальным весом. А авторское правило с повышенным весом определения переопределяет читательское правило с повышенным весом определения.
3.2 Порядок каскадирования
Наличие конфликтов правил присуще механизму CSS. Чтобы найти значение комбинации элемент/свойство, необходимо следовать следующему алгоритму:
Найти все определения, которые соответствуют паре элемент/свойство. Определение применяется, если селектор соответствует элементу. Если определение не применяется, используется унаследованное значение. Если унаследованного значения нет, используется значение по умолчанию.
Отсортировать определения по их весу: определения, обозначенные как '!important', имеют больший вес, чем необозначенные (нормальные) определения.
Отсортировать по источнику: авторская таблица стилей переопределяет читательскую таблицу стилей, которая переопределяет значения по умолчанию UA. Импортируемая таблица стилей имеет тот же источник, что и импортирующая.
Отсортировать по специфичности селектора: более специфичные селекторы переопределяют менее специфичные. Для определения значения специфичности необходимо сосчитать количество атрибутов ID в селекторе (a), количество атрибутов с классом в селекторе (b) и количество имен тэгов в селекторе (c). Объединение трех чисел (по системе счисления с большим основанием) дает искомое значение специфичности. Некоторые примеры:
LI {...} /* a=0 b=0 c=1 -> специфичность = 1 */
UL LI {...} /* a=0 b=0 c=2 -> специфичность = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> специфичность = 3 */
LI.red {...} /* a=0 b=1 c=1 -> специфичность = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> специфичность = 13 */
#x34y {...} /* a=1 b=0 c=0 -> специфичность =100 */
Псевдо-элементы и псевдо-классы учитываются соответственно также, как и нормальные элементы и классы.
Отсортировать в порядке определения: если два правила имеют одинаковый вес, указанное позднее побеждает. Правила в импортированной таблице стилей считаются предшествующими любому правилу внутри самой таблицы стилей.
Поиск значения свойства может быть прекращен, если одно правило имеет больший вес чем остальные правила, соответствующие той же паре элемент/свойство.
Такая стратегия дает писателю большую власть над отображением документа, чем у читателя. В связи с этим важно предоставлять читателю возможность отключать действие конкретной таблицы стилей.
Определение в атрибуте 'STYLE' элемента (см. раздел 1.1) имеет тот же вес, что и определение через ID селектор, определенный в таблице стилей:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
Но в данном примере элемент 'P' будет красным. Так как специфичность обоих определений одинакова, определение в атрибуте 'STYLE' переопределит определение через ID согласно правилу 5.
UA могут по-прежнему поддерживать стилистические атрибуты HTML, например 'ALIGN'. Если так, то эти атрибуты должны переводиться в соответствующее правило CSS со специфичностью равной 1. Должно считаться, что такие правила описаны в начале авторской таблицы стилей и могут быть переопределены нижеследующими правилами в таблице стилей. В переходный период такая политика позволит стилистическим атрибутам сосуществовать с таблицей стилей.