- •Скачано с 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 Модель форматирования
CSS1 предполагает простой ортогональный способ форматирования, когда каждый элемент образуется одним или несколькими прямоугольными полями. (Элементы, имеющие параметр 'display' со значением 'none', не форматируются и поэтому не влияют на поле. Все поля имеют внутреннюю содержательную область с устанавливаемыми смежными областями отступа, рамки и границы.
_______________________________________
| |
| граница (прозрачная) |
| _________________________________ |
| | | |
| | рамка | |
| | ___________________________ | |
| | | | | |
| | | отступ | | |
| | | _____________________ | | |
| | | | | | | |
| | | | содержание | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| ширина элемента |
| ширина поля |
Размеры границы, рамки и отступа устанавливаются соответственно описаниям следующих разделов настоящего документа: (5.5.1-5.5.5) для границы; (5.5.6-5.5.10) для отступа; (5.5.11-5.5.22) для рамки.
Отступ использует тот же самый фон, что и сам элемент (установка свойств фона см. 5.3.2-5.3.7). Цвет и стиль рамки устанавливаются в свойствах рамки. Границы всегда прозрачны, поэтому через них будет просвечивать родительский элемент.
Размеры поля есть сумма размеров элемента (форматированного текста или изображения) и размеров областей отступа, рамки и границы.
С точки зрения форматирования элементы подразделяются на два основных типа: блочные и строчные.
4.1 Блочные элементы
Элементы с параметром 'display', имеющим значение 'block' или 'list-item' относятся к блочным элементам. Плавающие (floating) элементы (т.е. со значением параметра 'float' иным, чем 'none') также считаются блочными.
Следующий пример показывает, как границы и отступы форматируют элемент 'UL' с двумя дочерними. Для упрощения границы на диаграмме не показаны. Учтите, что односимвольные "константы" в данном примере - это не синтаксис CSS1, это просто удобный способ связать значения таблицы стилей с рисунком.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue;
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>1й элемент списка
<LI>2й элемент списка
</UL>
________________________________________________________
| |
| A UL граница прозрачная |
| _______________________________________________ |
| D | | B |
| | E UL отступ красный | |
| | _______________________________________ | |
| | H | | F | |
| | | a LI граница прозрачная | | |
| | | красный цвет просвечивает | | |
| | | _______________________________ | | |
| | | d | | b | | |
| | | | e LI отступ синий (blue) | | | |
| | | | | | | |
| | | | h 1й элемент списка f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | max(a, c) | | | <- См. max
| | | _______________________________ | | |
| | | | | | | |
| | | d | e LI отступ синий (blue) | | | |
| | | | | | | |
| | | | h 2й элемент списка f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | c LI отступ прозрачный, | | |
| | | красный цвет просвечивает | | |
| | |_______________________________________| | |
| | | |
| | G | |
| |_______________________________________________| |
| |
| C |
|_______________________________________________________|
В техническом плане, свойства заполнения и границы не наследуются. Но, как видно из примера, элемент позиционируется относительно родительских и "братских", поэтому свойства границы и заполнения последних отражаются на дочерних элементах.
Если бы в вышеназванном примере указывались рамки, они бы располагались между отступами и границами.
Некоторые из используемых терминов иллюстрирует следующая диаграмма:
--------------- <-- верх
верхняя граница
---------------
верхняя рамка
---------------
верхний отступ
+-------------+ <-- потолок
| | | | | | | |
| левая | левая | левый | | правый | правая | правая |
|-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка--|-граница-|
| | | | | | | |
+-------------+ <-- подвал
^ ^ ^ ^
левый внеш.край | левый внутр.край | правый внутр.край | правый внеш.край
нижний отступ
---------------
нижняя рамка
---------------
нижняя граница
--------------- <-- низ
Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания).
Ширина элемента - это ширина содержания, т.е. расстояние между левым и правым внутренними краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка.