- •Css: Базовые понятия.
- •Id в качестве селектора
- •Css: Каскадирование.
- •Модульная структура
- •Баланс автор/читатель
- •Определение веса определений 'important'
- •Порядок каскадирования
- •Задание семейства шрифта ('font-family').
- •Единицы измерения, используемы в таблице стилей.
- •Свойства шрифта.
- •Задание начертания шрифта ('font-style')
- •Задание варианта шрифта ('font-variant').
- •Задание веса шрифта ('font-weight')
- •Задание размера шрифта ('font-size').
- •Задание шрифта в целом ('font')
- •Css: свойства цвета и фона.
- •Определение цвета ('color')
- •Определение цвета обоев ('background-color').
- •Определение рисунка фона ('background-image').
- •Определение повтора рисунка фона ('background-repeat').
- •Определение привязки фона ('background-attachment').
- •Определение положения фона ('background-position')
- •Определение свойств фона в целом ('background')
- •Css: свойства текста. Установка интервалов ('word-spacing')
- •Установка трекинга1 ('letter-spacing')
- •Установка оформления текста ('text-decoration')
- •Установка вертикального выравнивания текста ('vertical-align').
- •Установка преобразования текста ('text-transform')
- •Установка выравнивания текста ('text-align')
- •Установка абзацного отступа ('text-indent')
- •Установка высоты строки ('line-height').
Единицы измерения, используемы в таблице стилей.
Многие из свойств таблиц стилей подразумевают задание размеров элементов страницы. HTML предполагает определение размеров при помощи относительных и абсолютных единиц. В табл. 1 показаны относительные единицы.
Таблица 1
Единица |
Пример |
Описание |
Em |
0.5em |
Высота шрифта элемента |
Ex |
0.75ex |
Высота символа X |
Px |
15px |
Размер в пикселях (это относительный размер, так как абсолютный размер зависит от устройства вывода) |
Рекомендуется по возможности пользоваться относительными единицами, в этом случае страница лучше масштабируется программами просмотра. Однако существуют и абсолютные единицы размеров, показанные в табл. 2.
Таблица 2
Единица |
Пример |
Описание |
in |
.5in |
Дюймы |
cm |
1cm |
Сантиметры |
mm |
20mm |
Миллиметры |
pt |
12pt |
Пункты (1 пункт = 1/72 дюйма) |
pc |
1pc |
Пика (1 пика = 12 пунктов) |
Кроме того, размеры могут быть указаны в процентах относительно родительского элемента. Например, если вы указываете размер шрифта элемента в 50%, это означает, что шрифт элемента будет в 2 раза меньше размера шрифта родительского элемента. О наследовании размеров, в частности размеров указанных в процентах см. в разделе Наследование.
Свойства шрифта.
Определение свойств шрифта относится к одному из наиболее распространенных способов применения таблицы стилей. К сожалению, пока нет четкого и универсального стандарта для типометрии шрифтов, и определения, применимые к шрифтам одного семейства, могут оказаться неподходящими для других. Так, для обозначения курсива обычно используется свойство 'italic', но могут встречаться и такие обозначения, как Oblique, Slanted, Incline, Cursive или Kursiv. Таким образом, преобразование характерных черт шрифта в типометрические свойства является непростой задачей.
CSS1 определяет следующие свойства шрифтов: "семейство" ('font-family'), "начертание" ('font-style'), "вариант" ('font-variant'), а также "вес" ('font-weight'), "размер" ('font-size'), "шрифт" 'font'.
Задание семейства шрифта ('font-family').
Значение: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
По умолчанию: определяется UA
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.
Значение свойства представляет собой перечень гарнитур шрифтов и/или их названий в порядке приоритетности. В отличие от других свойств CSS1, здесь значения могут разделяться запятой для указания альтернатив:
BODY { font-family: gill, helvetica, sans-serif }
Имеются два типа перечней значений:
<family-name>
Названия избранных гарнитур шрифта (в последнем примере - "gill" и "helvetica").
<generic-family>
В нижеследующем примере последнее значение указывает на семейство шрифта. Определены следующие семейства:
'serif' (напр. Times)
'sans-serif' (напр. Helvetica)
'cursive' (напр. Zapf-Chancery)
'fantasy' (напр. Western)
'monospace' (напр. Courier)
В таблицах стилей дизайнерам рекомендуется использовать указание семейства шрифта в качестве последней альтернативы.
Названия семейств, содержащие пробелы, должны быть в кавычках:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
Если кавычки отсутствуют, то символы пробела перед и после названия гарнитуры игнорируются и любая последовательность символов пробела внутри названия семейства преобразуется в слитное написание.
