- •Скачано с 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.18 Установка обобщающего свойства "верхняя рамка" ('border-top')
Значение: <border-top-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для верхней рамка элемента.
H1 { border-bottom: thick solid red }
В вышеуказанном примере установлены ширина, стиль и цвет для рамки элемента H1. Отсутствующим значениям присваиваются значения по умолчанию:
H1 { border-bottom: thick solid }
В вышеуказанном примере значение цвета опущено и цвет рамки будет установлен по значению свойства "цвет" самого элемента.
Обратите внимание, что в отличие от свойства "стиль рамки ", для обобщающего свойства "верхняя рамка" задается только одно значение стиля.
5.5.19 Установка обобщающего свойства "правая рамка" ('border-right')
Значение: <border-right-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для правой рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".
5.5.20 Установка обобщающего свойства "нижняя рамка" ('border-bottom')
Значение: <border-bottom-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для нижней рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".
5.5.21 Установка обобщающего свойства "левая рамка" 'border-left'
Значение: <border-left-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для левой рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".
5.5.22 Установка обобщающего свойства " рамка" 'border'
Значение: <border-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для всех четырех сторон рамки элемента. В нижеследующем примере первая строка равнозначна четырем последующим:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
В отличие от обобщающих свойств "граница" и "заполнение", для обобщающего свойства "рамка" нельзя задать разные значения четырех сторон рамки. Чтобы так сделать, необходимо использовать одно или более из других вышеприведенных свойств рамки.
Поскольку свойства в известной мере функционально перекрываются, при их обработке важен также порядок, в соответствии с которым они были назначены. Рассмотрим следующий Пример:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
В вышеприведенном примере цвет левого края рамки будет черным, в то время как для остальных - красным. Это является результатом установки ширины, стиля и цвета для свойства "левая рамка". Поскольку значение цвета не было явно задано для свойства "левая рамка", будет использовано значение, заданное для свойства "цвет". То, что свойство "цвет" определено позже свойства "левая рамка", не играет роли.
Обратите внимание, что если для свойства "ширина рамки" устанавливается до четырех значений, то для рассматриваемого - только одно.