- •Скачано с 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
5.5.6 Установка верхнего отступа ('padding-top').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет величину верхнего отступа элемента.
BLOCKQUOTE { padding-top: 0.3em }
Отрицательные значения для отступа не допускаются.
5.5.7 Установка правого отступа ('padding-right').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет величину правого отступа элемента.
BLOCKQUOTE { padding-right: 10px }
Отрицательные значения для отступа не допускаются.
5.5.8 Установка нижнего отступа ('padding-bottom').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет величину нижнего отступа элемента.
BLOCKQUOTE { padding-bottom: 2em }
Отрицательные значения для отступа не допускаются.
5.5.9 Установка левого отступа ('padding-left').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство устанавливает величину левого отступа элемента..
BLOCKQUOTE { padding-left: 20% }
Отрицательные значения для отступа не допускаются.
5.5.10 Установка обобщающего свойства " отступ" ('padding').
Значение: [ <length> | <percentage> ]{1,4}
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Свойство "отступ" является обобщающим для установки свойств верхнего, правого, нижнего и левого отступа в одном правиле таблицы стилей.
Если явно указаны четыре значения, они применяются соответственно к верхнему, правому, нижнему и левому отступу. Если явно указано только одно значение, оно применяется ко всем сторонам, если два или три, то отсутствующие значения принимаются по значениям противоположной стороны.
Поверхность отступа определяется с помощью свойства "фон" ('background'):
H1 {
background: white;
padding: 1em 2em;
}
В вышеприведенном примере устанавливается горизонтальный отступ величиной '1em' (правый и левый) и вертикальный отступ величиной '2em' (верхний и нижний). Величина 'em' определяется относительно размера шрифта элемента: 1em соответствует размеру применяемого шрифта.
Отрицательные значения для отступа не допускаются.
5.5.11 Установка ширины верхней рамки ('border-top-width').
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: all элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину верхней рамки элемента. Ширина, определяемая зарезервированным словом, зависит от UA, но при этом выдерживается зависимость: 'thin' меньше, чем 'medium', а последнее меньше, чем 'thick'.
Ширина рамки, определенная с помощью зарезервированного слова, является для документа величиной постоянной:
H1 { border: solid thick red }
P { border: solid thick blue }
В вышеуказанном примере у элементов 'H1' и 'P' будет та же самая рамка независимо от размера шрифта. Чтобы установить относительную ширину, можно использовать единицы 'em':
H1 { border: solid 0.5em }
Величина рамки не может быть отрицательной.