- •Скачано с 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.12 Установка ширины правой рамки('border-right-width').
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину правой рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').
5.5.13 Установка ширины нижней рамки('border-bottom-width')
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину нижней рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').
5.5.14 Установка ширины левой рамки 'border-left-width'
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину левой рамки элемента. Остальное эквивалентно установке ширины верхней рамки ('border-top-width').
5.5.15 Установка обобщающего свойства "ширина рамки" ('border-width')
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство является обобщающим для установки верхней, правой, нижней и левой ширины рамки в одном правиле таблицы стилей.
Может быть указано от одного до четырех значений, обрабатываемых следующим образом:
одно значение: используется для установки ширины всех четырех рамок
два значения: ширина верхней и нижней рамок устанавливаются по первому значению, правое и левое - по второму
три значения: ширина верхней рамки устанавливается по первому значению, правого и левого по второму, а нижнего по третьему
четыре значения: соответственно ширина верхней, правой, нижней и левой рамок.
В нижеследующем примере комментарии указывают на получившуюся величину ширины верхней, правой и левой рамок:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium none } /* thin thick medium none */
Величина рамки не может быть отрицательной.
5.5.16 Установка цвета рамки ('border-color').
Значение: <color>{1,4}
По умолчанию: значение свойства 'color'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Свойство "цвет рамки" ('border-color') определяет цвет четырех сторон рамки. "Цвет рамки" может иметь от одного до четырех значений, которые устанавливают цвета сторон рамки аналогично вышеописанному для толщины рамки.
Если не задано ни одного значения цвета, по умолчанию присваивается значение свойства "цвет" самого элемента:
P {
color: black;
background: white;
border: solid;
}
В вышеуказанном примере рамка представляет собой сплошную черную линию.
5.5.17 Установка стиля рамки ('border-style')
Значение: none | dotted | dashed | solid | double | groove | ridge | inset |
outset
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Свойство "стиль рамки" устанавливает стиль четырех сторон рамки. Оно может иметь от одного до четырех значений для разных сторон, устанавливаемых аналогично вышеописанному для ширины рамки.
#xy34 { border-style: solid dotted }
В вышеприведенном примере горизонтальные стороны рамки будут сплошными, а вертикальные - пунктирными.
Так как значение стиля рамки по умолчанию - 'none', то в случае, если стиль рамки явно не задан, видимой рамки не будет.
Возможны следующие стили рамки:
none
рамка не изображается (независимо от значения ширины рамки)
dotted
рамка - пунктирная линия поверх обоев элемента
dashed
рамка - штриховая линия поверх обоев элемента
solid
рамка - сплошная линия
double
рамка - двойная линия поверх обоев элемента. Сумма толщин двух линий и промежутка между ними соответствует толщине рамки.
groove
объемная канавка, цвета на основе значения свойства "цвет".
ridge
объемный гребень, цвета на основе значения свойства "цвет".
inset
объемная складка внутрь, цвета на основе значения свойства "цвет".
outset
объемная складка наружу, цвета на основе значения свойства "цвет".
Ядро CSS:UA может обрабатывать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как сплошную линию ('solid').