- •Скачано с 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
Img { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Примерный текст, чтобы показать...
</BODY>
Форматирование в приведенном примере будет выглядеть так:
________________________________________
|
| max(граница BODY, граница P)
| ______________________________
| | | Примерный текст,
| г | г |границы IMG чтобы показать, как
| р | р | _____ плавающие элементы
| а | а | | | смещаются относительно
| н | н | | IMG | к сторонам родительского
| и | и | | | элемента, несмотря
| ц | ц | |_____| на приоритет
| a | а | границы, бордюра
| | | и заполнения.
| B | P | Обратите внимание,
| O | |как смежные вертикальные границы
| D | |сжимаются между фиксированными
| Y | |блочными элементами.
Обратите внимание, как границы элемента 'P' окружают плавающий элемент 'IMG'.
Есть два случая, когда плавающие элементы могут перекрывать области границы, рамки и отступа других элементов:
когда плавающий элемент имеет отрицательную величину границы: отрицательные границы плавающих элементов имеют приоритет над иными блочными элементами;
когда плавающий элемент выше или шире чем элемент внутри.
4.2 Строчные элементы
Элементы, не форматируемые как блочные, относятся к строчным. Строчный элемент может делить пространство строки с другими элементами. Рассмотрим следующий пример:
<P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG>.</P>
Элемент 'P' - нормальный блочный, в то время как 'EM' и 'STRONG' - строчные. Если ширина элемента 'P' достаточна, чтобы расположить весь элемент на одной строке, то тогда в строке будут два строчных элемента:
Несколько подчеркнутых слов имеется.
Если же в строке места не хватает, строчные элементы будут разбиты на несколько полей:
<P>Несколько <EM>подчеркнутых слов</EM> имеют место.</P>
Форматирование этого примера будет выглядеть как:
Несколько подчеркнутых
слов имеют место.
Если строчный элемент имеет границы, бордюры, заполнение или приложенное текстовое оформление, то их эффект не будет проявляться в месте расчленения элемента:
-------------
Несколько |подчеркнутых
-------------
-----
слов | имеют место.
-----
(Вышеприведенный рисунок несколько искажается из-за использования псевдографики ASCII. См. описание вычисления высоты линий в разделе 4.4.)
4.3 Замещаемые элементы
Замещаемые элементы - это элементы, замещаемые содержанием, указываемым в элементе. Например элемент 'IMG' замещается изображением, указанным в атрибуте 'SRC'. Важным свойством замещаемых элементов является наличие своих внутренних размеров. Если значения свойства "ширина"('width') равна 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение иное, чем 'auto' из перечисленных в таблице стилей, то это значение и используется, а замещаемый элемент соответственно меняет размеры (метод изменения размеров будет определяться видом информационного объекта). Таким же образом используется свойство "высота" ('height').
Замещаемые элементы могут быть как блочными, так и строчными.