- •Скачано с http://bizkit.Land.Ru
- •Терминология
- •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.2 Порядок каскадирования
- •4 Модель форматирования
- •4.1 Блочные элементы
- •4.1.1 Вертикальное форматирование
- •4.1.2 Горизонтальное форматирование
- •4.1.3 Элементы-списки
- •4.1.4 Плавающие элементы
- •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.11 Установка ширины верхней рамки ('border-top-width').
- •5.5.16 Установка цвета рамки ('border-color').
- •5.5.17 Установка стиля рамки ('border-style')
- •5.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')
- •5.5.23 Установка свойства "ширина" ('width')
- •5.5.24 Установка свойства "высота" 'height'
- •5.5.25 Установка свойства "плавающий" ('float')
- •5.5.26 Установка свойства "чисто" ('clear')
- •5.6 Свойства - классификации
- •5.6.1 Установка свойства "показ" ('display')
- •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 Обозначение цвета
- •7 Совместимость с css1
- •7.1 Последовательно-совместимый синтаксический анализ
- •8 Литература
- •Приложение a: Пример таблицы стилей для html 2.0
- •Приложение b: Грамматика css1
- •Приложение c: Кодирование
- •Приложение d: Gamma correction
- •Приложение e: Применимость и расширяемость css1
4.1.3 Элементы-списки
Элементы со свойством 'display', имеющим значение 'list-item' ("список"), форматируются как блочные, но предваряются маркером. Тип маркера определяется свойством "стиль списка" ('list-style'). Маркер устанавливается в соответствии со значением свойства "стиль списка":
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>первый пункт списка идет первым
<LI>второй пункт списка идет вторым
</UL>
<UL CLASS=COMPACT>
<LI>первый пункт списка идет первым
<LI>второй пункт списка идет вторым
</UL>
Форматирование по данному примеру может выглядеть как:
* первый пункт списка
идет первым
* второй пункт списка
идет вторым
* первый пункт
списка идет первым
* второй пункт
списка идет вторым
Если текст выравнивается по ширине, маркеры должны быть на левой стороне поля.
4.1.4 Плавающие элементы
Используя свойство элемента "плавающий" ('float'), можно декларировать его в качестве внешнего по отношению к нормальному потоку элементов, а затем форматировать, как блочный элемент. Например, при установке значения 'left' для свойства "плавающий" применительно к изображению, последнее перемещается влево до границы отступа или рамки, либо достигает другого блочного элемента. Нормальный поток будет переноситься по правой стороне. Границы, рамки и отступы самого элемента будут учитываться, и никогда не будут сливаться с границами смежных элементов.
При позиционировании плавающего элемента должны выполняться следующие условия (см. раздел 4.1. для разъяснения терминов):
Левая внешняя граница левоориентированного плавающего элемента не может быть слева от левой внутренней границы родительского элемента. Аналогично для правоориентированных плавающих элементов.
Правая внешняя граница левоориентированного плавающего элемента должна быть справа от правой внутренней границы любого предшествующего (согласно исходному тексту HTML) левоориентированного элемента, или же вершина предшествующего элемента должна быть ниже чем низ последующего. Аналогично для правоориентированных плавающих элементов.
Правая внешняя граница левоориентированного плавающего элемента не может быть справа от левой внешней границы правоориентированного плавающего элемента, расположенного правее его. Аналогично для правоориентированных плавающих элементов.
Вершина плавающего элемента не может быть выше потолка родительского элемента.
Вершина плавающего элемента не может быть выше вершины любого из предшествующих плавающих или блочных элементов.
Вершина плавающего элемента не может быть выше вершины строчного поля (см. раздел 4.4) с содержанием, предшествующим описанию плавающего элемента в исходном тексте HTML.
Плавающий элемент должен расположиться как можно выше.
Левоориентированный плавающий элемент должен расположиться как можно левее, правоориентированный - как можно правее. Приоритетно крайнее положение устанавливается для более левого или правого элемента.
<STYLE TYPE="text/css">
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'.
Есть два случая, когда плавающие элементы могут перекрывать области границы, рамки и отступа других элементов:
когда плавающий элемент имеет отрицательную величину границы: отрицательные границы плавающих элементов имеют приоритет над иными блочными элементами;
когда плавающий элемент выше или шире чем элемент внутри.