В нижеследующем примере в элементе H3 результатом будет шрифт в варианте "малые прописные", с подчеркнутыми наклонными малыми прописными буквами.
H3 { font-variant: small-caps }
EM { font-style: oblique }
В семействе шрифтов возможны и другие варианты, например, шрифты со старинными цифрами, малыми прописными цифрами, сжатыми или растянутыми буквами и т. п. CSS1 не предусматривает свойств для их определения.
Ядро CSS1: как для преобразования текста в написанный заглавными буквами, так и для 'text-transform' используются одинаковые соображения. (Досл.: CSS1 core: insofar as this свойство causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply)
5.2.5 Задание веса шрифта ('font-weight')
Значение: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
По умолчанию: normal
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.
Свойство "вес шрифта" определяет степень толщины линий при начертании. Это ряд значений от 100 до 900, где каждый номер указывает вес, соответствующий по крайней мере не меньшей жирности начертания, чем для предшествующего. Нормальный шрифт 'normal' соответствует номеру 400, полужирный 'bold' - 700. Другие слова, использованные вместо 'normal' или 'bold', зачастую истолковывались как названия гарнитур, и поэтому была принята численная шкала в 9 позиций.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
Значения 'bolder' и 'lighter' определяют вес шрифта по отношению к унаследованного от родительского:
STRONG { font-weight: bolder }
Дочерние элементы наследуют результирующее значение веса, но не его ключевое слово.
Шрифты (данные шрифтов) обычно имеют одно или более свойств, значения которых являются терминами, описывающими их веса. Общепринятых, универсальных описаний названий весов не существует. Первичная функция этих условных имен - различать жирность внутри одного семейства шрифтов. В целом по разным семействам шрифта терминология весьма разнообразна: к примеру, шрифт, который по внешнему виду отнесли бы к полужирным, может быть назван как Регулярный (Regular), Романский (Roman), Книжный (Book), Средний (Medium), Полужирный (Semi - или DemiBold), Жирный (Bold), или как Black, в зависимости от относительной "жирности" нормального шрифта данного семейства. В связи с отсутствием стандартных названий, свойство "вес" для CSS1 в численном выражении соизмеряется со значением 400, которое соответствует нормальному шрифту данного семейства. Этому весу обычно соответствуют такие условные имена шрифтов, как Book, Regular, Roman, Normal, Medium, Обыкновенный, Книжный, Средний, Нормальный.
Соотнесение остальных весов шрифтов в семействе с их численным обозначением предполагает сохранение только относительной жирности в пределах ряда, установленного для данной семьи. Тем не менее в ряде типичных случаев можно поступать в соответствии со следующей логикой:
- Если семейство шрифта уже использует числовую шкалу с девятью градациями (к примеру, как шрифт Open Type), вес шрифта может быть пересчитан напрямую. Если гарнитура отмечена как Medium, а в семействе есть хотя бы одна, помеченная как Book, Regular, Roman или Normal, то гарнитура Medium ассоциируется с весом 500. Шрифт, отмеченный как Bold, обычно соответствует весу 700. Если шкала жирности шрифта имеет меньше 9 градаций, используется следующий метод интерполяции. Если значение 500 невозможно присвоить, вместо него также присваивается 400. Если невозможно присвоить одно из значений следующего ряда - 600, 700, 800, 900 - то берется ближайшее значение для более жирного шрифта, если таковое имеется, в противном случае - для менее жирного. Если невозможно присвоить одно из значений следующего ряда - 300, 200, 100, - то берется ближайшее значение для менее жирного шрифта, если таковое имеется, в противном случае - для более жирного.
Данный метод иллюстрируют два нижеследующих примера. Возьмем для некоего условного семейства шрифтов "Example1" четыре градации веса по возрастающей: Regular, Medium, Bold, Heavy. Возьмем также шесть градаций веса для другого условного семейства шрифтов "Example2": Book, Medium, Bold, Heavy, Black, ExtraBlack. Обратите внимание на то, как во втором примере шрифт "Example2 ExtraBlack" не был с чем-либо ассоциирован.
Доступные шрифты Назначен вес Включены также
"Example1 Regular" , 200, 300
"Example1 Medium" 500
"Example1 Bold"
"Example1 Heavy"
Доступные шрифты
Назначен вес
Включены также
"Example2 Book" , 200, 300
"Example2 Medium" 500
"Example2 Bold"
"Example2 Heavy" 800
"Example2 Black" 900
"Example2 ExtraBlack" (none)
В зависмости от того, как ключевые слова 'bolder' и 'lighter' делают шрифт в семействе жирнее или светлее, и в связи с тем, что семейство шрифта может не содержать шрифтов, соответствующих всем весовым значениям, обработка значения 'bolder' до следующего более жирного и значения 'lighter' до менее жирного ограничена для UA пределами семейства шрифта. Если точнее, то ключевые слова 'bolder' и 'lighter' означают следующее.
- Значение 'bolder' выбирает для шрифта следующий вес, соответствующий более жирному шрифту, чем родительский. Если такого веса нет, то обычно используется ближайшее большее численное значение (при сохранении шрифта неизменным), если наследуемое значение не было равно 900, в противном случае вес остается равным 900. Аналогично со значением 'lighter', но в обратном порядке: выбирается ближайшее значение, соответствующее менее жирному шрифту, если же таковой отсутствует, то принимается ближайшее численное значение для менее жирного шрифта, при сохранении шрифта неизменным.
Это не дает гарантии, что для любого значения "веса" найдется более жирный шрифт; к примеру, некоторые фонты бывают только нормальными или полужирными, остальные могут иметь восемь гарнитур с различным весом. Нельзя заранее угадать, как именно UA сопоставит формализованные шрифтовые параметры с конкретными шрифтами различной жирности. Можно быть уверенным лишь в том, что шрифт заданного наименования будет не менее жирным, чем имеющиеся в семействе менее жирные шрифты.
5.2.6 Задание размера шрифта ('font-size').
Значение: <absolute-size> | <relative-size> | <length> | <percentage>
По умолчанию: medium
Область применения: все элементы
Наследование: есть
Процентное выражение: относительно размера шрифта родительского элемента
<absolute-size>
Значение абсолютного размера (<absolute-size>) есть индекс таблицы размеров шрифта, поддерживаемых и отрабатываемых UA. Возможные значения следующие: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. На дисплее градации масштабируются с шагом х1,5: если 'medium' - кегль 10, то 'large' - кегль 15. Различные мультимедийные устройства могут потребовать различные шкалы масштабирования. Кроме того, UA должен обеспечивать качество и разборчивость шрифтов при отработке таблицы. Для разных семейств шрифтов таблицы могут отличаться.
<relative-size>
Относительный размер (<relative-size>) отрабатывается, исходя из таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения - [ larger | smaller ]. Например, если размер шрифта родительского элемента 'medium', то значение 'larger' преобразует шрифт текущего элемента в 'large'. Если для размера шрифта родительского элемента нет близкого вхождения в таблицу, то UA волен интерполировать данные таблицы или округлить размер до ближайшего значения. UA может также экстраполировать табличные значения, если численное значение выходит за пределы зарезервированных слов.
Для значений длины и процентного выражения таблица размеров шрифта не должна приниматься в расчет, пока не будет вычислен размер шрифта элемента
Отрицательные значения не допускаются.
Для всех других свойств, значения длины 'em' и 'ex' относятся к размеру шрифта текущего элемента. Для свойства "размер шрифта" эти единицы длины относятся к размеру шрифта родительского элемента.
Заметим, что приложения могут переиначивать явно заданный размер в зависимости от содержания. К примеру, для трехмерной сцены VR размер шрифта будет изменяться в зависимости от перспективы.
примеры:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Если используется градация масштабирования 1.5, то три последних случая равнозначны.
5.2.7 Задание шрифта в целом ('font')
Значение: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ /
<line-height> ]? <font-family>
По умолчанию: не определено для обобщающего свойства
Область применения: все элементы
Наследование: есть
Процентное выражение: допускается для <font-size> и <line-height>
Свойство "шрифт" есть обобщающее свойство для определения 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' в одном и том же месте таблицы стилей. Синтаксис этого свойства основан на традиционном для полиграфии способе указания группы свойств, относящихся к шрифтам.
Для определения допускаемых значений и значений по умолчанию см. вышеописанные свойства. Если для тех или иных свойств значения явно не указаны, то для них принимаются значения по умолчанию.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Во втором примере размер шрифта, указанный в процентном выражении (80%), считается от размера шрифта родительского элемента. В третьем примере высота линии, выраженная в процентах, считается от размера шрифта самого элемента.
В первых трех примерах начертание, вариант и вес шрифта явно не заданы, и по умолчанию всем им присваивается значение 'normal'. В четвертом примере вес шрифта явно указан как 'bold', стиль как 'italic', а варианту по умолчанию присваивается значение 'normal'.
В пятом примере указан вариант "малые прописные" ('small-caps'), размер (120% от родительского шрифта), высота линии (120% от размера шрифта), и гарнитура ('fantasy'). Следовательно, значение 'normal' присваивается по умолчанию двум свойствам: "стиль" и "вес".
5.3 Свойства "цвет" (color) и "фон" (background).
Эти свойства описывают цвет (зачастую именуемый как цвет переднего плана) и фон для элемента (т. е. поверхность, на которой располагается содержание). Они позволяют установить цвет фона и(или) его рисунок. Также определяются позиция изображения рисунка фона, повторяется ли он и каким образом, и где он размещается либо перемещается относительно холста.
Свойство "цвет", как правило, наследуется. Свойство "фон" не наследуется, но фон родительского элемента будет виден на просвет, т. к. по умолчанию значение цвета фона для дочерних элементов принимается как 'transparent' (прозрачный).
5.3.1 Определение цвета ('color')
Значение: <color>
По умолчанию: Определяется UA
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.
Это свойство описывает цвет текста в элементе (зачастую именуемый как цвет переднего плана). Есть несколько разных способов описать, к примеру, красный цвет:
EM { color: red } /* natural language */
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
См. раздел 6.3. для описания возможных значений цвета.
5.3.2 Определение цвета обоев ('background-color').
Значение: <color> | transparent
По умолчанию: transparent
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство описывает цвет обоев элемента.
H1 { background-color: #F00 }
5.3.3 Определение рисунка фона ('background-image').
Значение: <url> | none
По умолчанию: нет
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет рисунок фона элемента. При назначении изображения для рисунка фона, необходимо также определить цвет фона, который будет использоваться в случае недоступности изображения. Если изображение доступно, оно перекрывает цвет фона сверху.
BODY { background-image: url(marble. gif) }
P { background-image: none }
5.3.4 Определение повтора рисунка фона ('background-repeat').
Значение: repeat | repeat-x | repeat-y | no-repeat
По умолчанию: repeat
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Если рисунок фона определен, значение свойства "повтор рисунка фона" определяет, повторяется ли изображение и каким образом.
Значение 'repeat' указывает, что изображение повторяется как в горизонтальном, так и в вертикальном направлении. Значение 'repeat-x' ('repeat-y') устанавливает повтор изображения соответственно только в горизонтальном (вертикальном) направлении, создавая одну полосу из изображений от одного края до противоположного. При значении 'no-repeat' изображение не повторяется.
BODY {
background: red url(pendant. gif);
background-repeat: repeat-y;
}
В вышеприведенном примере изображение рисунка фона повторяется только в вертикальном направлении.
5.3.5 Определение привязки фона ('background-attachment').
Значение: scroll | fixed
По умолчанию: scroll
Область приложения: все элементы
Наследование: нет
Процентное выражение: неопр.
Если определен рисунок фона, значение свойства "привязка" ('background-attachment') определяет, привязан ли рисунок к холсту или перемещается вместе с содержанием.
BODY {
background: red url(pendant. gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Ядро CSS1: UA вправе рассматривать 'fixed' как 'scroll'. Тем не менее рекомендуется, чтобы они правильно отрабатывали 'fixed' по крайней мере для элементов HTML и BODY, т. к. для автора не существует возможности использовать изображение только для браузеров, поддерживающих 'fixed'. (См. гл.7).
5.3.6 Определение положения фона ('background-position')
Значение: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left |
center | right]
По умолчанию: 0% 0%
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное значение: по отношению к стороне самого элемента
Если рисунок фона был определен, значение свойства "положение фона" определяет его начальное расположение.
При парном значении '0% 0%', верхний левый угол изображения устанавливается в верхнем левом углу поля, окружающего содержание элемента (т. е. не того поля, что окружает отступ, рамку или границу). При парном значении '100% 100%', нижний правый угол изображения устанавливается в нижнем правом углу элемента. При парном значении '14% 84%', точка изображения 14% вправо и 84% вниз будет установлена на точке элемента 14% вправо и 84% вниз.
При парном значении '2cm 2cm', верхний левый угол изображения будет установлен на расстоянии 2 см правее и 2 см ниже верхнего левого угла элемента.
Если задано только одно процентное выражение или абсолютные единицы, они устанавливают только горизонтальное положение, а вертикальное по умолчанию будет 50%. Если заданы два значения, то первое из них - горизонтальное положение. Допускаются комбинации абсолютных единиц и процентных выражений, например, '50% 2cm'. Допускаются отрицательные значения.
Для обозначения положения изображения фона могут быть также использованы ключевые слова, которые можно комбинировать с процентным выражением или абсолютными единицами. Ниже перечислены возможные комбинации ключевых слов и их расшифровка:
- 'top left' или 'left top' равноценны '0% 0%'. 'top', 'top center' или 'center top' равноценны '50% 0%'. 'right top' или 'top right' равноценны '100% 0%'. 'left', 'left center' или 'center left' равноценны '0% 50%'. 'center' или 'center center' равноценны '50% 50%'. 'right', 'right center' или 'center right' равноценны '100% 50%'. 'bottom left' или 'left bottom' равноценны '0% 100%'. 'bottom', 'bottom center' или 'center bottom' равноценны '50% 100%'. 'bottom right' или 'right bottom' равноценны '100% 100%'.
примеры:
BODY { background: url(banner. jpeg) right top } /* 100% 0% */
BODY { background: url(banner. jpeg) top center } /* 50% 0% */
BODY { background: url(banner. jpeg) center } /* 50% 50% */
BODY { background: url(banner. jpeg) bottom } /* 50% 100% */
Если рисунок фона привязан относительно холста (см. раздел "Определение привязки фона"), изображение устанавливается относительно холста, но не элемента. К примеру:
BODY {
background-image: url(logo. png);
background-attachment: fixed;
background-position: 100% 100%;
}
В вышеприведенном примере изображение устанавливается в нижний правый угол холста.
5.3.7 Определение свойств фона в целом ('background')
Значение: <background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>
По умолчанию: для обобщающего свойства не определено
Область приложения: все элементы
Наследование: нет
Процентное выражение: применительно к <background-position>
Свойство "фон" ('background') - это обобщающее свойство для установки отдельных свойств фона (т. е. цвета, рисунка, повтора, привязки и положения) в одном правиле таблицы стилей.
Возможные значения обобщающего свойства "фон" включают совокупность возможных значений каждого из составляющих свойств.
BODY { background: red }
P { background: url(chess. png) gray 50% repeat fixed }
Свойство "фон" всегда устанавливает все совокупные свойства фона сразу. В первой строке вышеуказанного примера явно задан только цвет фона, а значения остальных свойств принимаются по умолчанию. Во второй строке все совокупные свойства заданы явным образом.
5.4 Свойства текста
5.4.1 Установка интервалов ('word-spacing')
Значение: normal | <length>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.
Численное выражение длины указывает добавление к установленной по умолчанию величине интервалов между словами. Это значение может быть отрицательным, но в этом случае могут иметь место различные ограничения, накладываемые методами отработки. UA вправе самостоятельно выбирать алгоритм вычисления интервалов. Интервалы между словами могут также зависеть от способа выравнивания абзаца (последний определяется значением свойства "выравнивание" ('align')).
H1 { word-spacing: 0.4em }
Здесь интервал между словами в элементе H1 увеличен на единицу "м" ('1em')(0,4em?), (м соответствует круглой - прим. перев.).
Ядро CSS1: UA вправе квалифицировать любое значение "интервала" как 'normal' (См. раздел 7.)
5.4.2 Установка трекинга ('letter-spacing')
Значение: normal | <length>
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 |
