Свойство background-color

20 Август 2009 | Автор: admin Метки:,

Свойство background-color управляет цветом фона элемента. Присваивайте этому свойству в качестве значения цвет или ключевое слово transparent. Значение по умолчанию – transparent (прозрачный). Результат будет естественным.

Тогда как вы, скорее всего, привыкли устанавливать цвет фона для всего документа при помощи специальных атрибутов тега <body>, стилевое свойство background-color может применяться к любому элементу. К примеру, чтобы установить фоновый цвет для одного элемента маркированного списка, напишите:

<li style=»background-color: blue»>

Подобным образом, все заголовочные ячейки в таблицах документа можно сделать инверсными:

th {background-color: black; color: white}

Если хотите, чтобы текст, на важности которого вы настаиваете, действительно выделялся, покрасьте его фон в красный цвет:

em {background-color: red}

Свойства цвета и фона

17 Август 2009 | Автор: admin Метки:, ,

Каждый элемент в документе обладает цветами фона и переднего плана. В некоторых случаях фон представляет собой многокрасочное изображение. Стилевые свойства цвета и фона управляют и красками, и изображениями.

Дочерний элемент в HTML/XHTML обычно наследует цвет переднего плана от родительского элемента. В частности, если вы назначили тексту в теге <body> красный цвет, поддерживающий стили броузер будет отображать текст заголовков и абзацев красным.

Свойства фона ведут себя иначе – они не наследуются. Вместо этого каждый элемент имеет принятый по умолчанию прозрачный цвет фона, позволяющий фону родительского элемента проступать сквозь него. Таким образом, установка изображения фоном для тега <body> не приведет к постоянной его перезагрузке при выводе каждого элемента
в теле документа. Вместо этого броузер однажды загрузит изображение и сделает его задником документа, который будет служить фоном для всех элементов, не имеющих своего собственного, явно выраженного в цвете или рисунке.

В дополнение к базовым дескрипторам шрифта в предусмотрен ряд расширенных дескрипторов, которые уточняют определение шрифта. Среднестатистическому разработчику веб страниц эти дескрипторы не нужны, но знатоки, возможно, сочтут их небесполезными.

Дескриптор unicode range принимает список значений Unicode, разделенных запятыми. Каждое значение состоит из префикса U+ и шестнадцатеричного числа. Вы можете указывать диапазоны значений, разделяя границы диапазона дефисом. Вопросительный знак соответствует любому значению в данной позиции.

Дескриптор unicode range призван точно указать глифы, определенные в шрифте. Если символы, используемые в документе, недоступны, броузер не загрузит шрифт. Так, значение U+2A70 показывает, что шрифт содержит соответствующий глиф в этой позиции. Запись U+2A7? задает символы от 2A70 до 2A7F, а запись U+2A70-2A9F – более широкий диапазон. Как правило, этот дескриптор применяется, чтобы ограничить использование специальных символов только теми, что определены в шрифте.

Дескриптор units-per-em принимает одно числовое значение, определяющее ширину самой широкой буквы в шрифте. Это значение, называемое «эм» (em), важно, если вы используете его как единицу измерения для задания значений других дескрипторов.

Дескриптор panose-1 принимает ровно десять целочисленных значений, разделенных пробелами и соответствующих особой характеристике шрифта, носящей имя Panose 1. Обсуждение Panose-1 выходит за рамки этой книги, и мы отсылаем заинтересованного читателя к специальной литературе.

Дескрипторы stemv и stemh определяют толщину (в «эмах») вертикальных и горизонтальных штрихов в начертании символов шрифта. Аналогичным образом дескрипторы cap-height и x-height определяют высоту глифов в верхнем и нижнем регистре. Наконец, дескрипторы ascent и descent определяют максимальные размеры верхнего и нижнего элементов шрифта. Если вы используете любой из этих дескрипторов,
вы должны задать дескриптор units-per-em.

Дескриптор slope определяет наклон вертикальных штрихов шрифта. Он играет важную роль при поиске курсивных и наклонных версий шрифта.

Дескрипторы baseline, centerline, mathline и topline определяют обычную, центральную, математическую и верхнюю базовые линии шрифта. Все они принимают числовые значения, выраженные в «эмах». Для них вы тоже должны задать дескриптор units-per-em.

Дескриптор bbox принимает ровно две пары координат (X, Y), определяющие левый нижний и правый верхний углы ограничивающего прямоугольника шрифта. Дескриптор bbox важен, когда броузер решает синтезировать шрифт на основе данного. Указывая размеры ограничивающего прямоугольника, вы гарантируете, что синтезированный
шрифт займет столько же места, сколько и запрошенный.

Дескриптор widths принимает список диапазонов Unicode-кодов, перечисленных через запятую, за которыми следуют отделенные пробелами значения, определяющие ширину символов в диапазоне. Если вы укажете одно значение для диапазона, все символы в диапазоне будут иметь одинаковую ширину. Когда указаны несколько значений, каж
дое относится к соответствующему символу из диапазона. Подобно дескриптору bbox дескриптор widths обеспечивает хорошую степень совпадения синтезированного шрифта с запрошенным.

И наконец, необязательный дескриптор definitions-src задает URL-адрес файла, содержащего все дескрипторы шрифта. Это удобно при детализированном определении шрифта. Вместо того чтобы включать длинное описание в каждый документ или стилевую таблицу, где используется этот шрифт, вы задаете дескрипторы один раз в отдельном файле и ссылаетесь на него с помощью дескриптора definitions-src.

Базовые дескрипторы шрифта

10 Август 2009 | Автор: admin Метки:,

Базовые дескрипторы шрифта, указываемые в специальной директиве @font-face, соответствуют шрифтовым свойствам и принимают те же значения, что и эти свойства. Иными словами, вы можете указывать дескрипторы font-family, font-style, font-variant, font-weight, font-stretch и font-size и их допустимые значения, чтобы определить
новый шрифт для броузера. Например:

@font-face {
Font-family : «Kumquat Sans»;
Font-style : normal, italic;
src : url(»http://www.kumquat.com/foundry/kumquat-sans»)
}

Здесь определяется шрифт Kumquat Sans, который можно загрузить ссайта www.kumquat.com. Для этого загружаемого шрифта доступны обычная версия и курсив. Поскольку другие дескрипторы не указаны, броузер будет предполагать, что остальные свойства шрифта (жирность, вариант и т. д.) определяются в самом шрифте.

В общем случае отсутствие какого либо дескриптора шрифта позволяет броузеру брать для соответствующего свойства любое значение. Указывая одно или несколько значений дескриптора шрифта, вы ограничиваете для броузера набор допустимых значений. Поэтому, когда вы определяете шрифт таким способом, вам следует быть как мож
но конкретнее, чтобы броузер впоследствии сделал оптимальный выбор. Например, если у шрифта нет курсивной версии и вы ничего не предложите броузеру, он может использовать неподходящий шрифт, когда встретит запрос на курсив для этого шрифта.

Алгоритм соответствия шрифтов в CSS2

8 Август 2009 | Автор: admin Метки:,

В стандарте алгоритм соответствия шрифтов состоит из четырех шагов. Первый шаг заключается в применении указанного шрифта, если он находится на компьютере пользователя. Это может быть одно из нескольких семейств шрифтов, указанных в стилевом правиле и подставленных в порядке появления.

Второй шаг предпринимается, когда ни один из шрифтов, перечисленных в правиле, не установлен на компьютере пользователя. Броузер пытается найти наиболее похожий из локальных шрифтов. Например, запрос на шрифт Helvetica может привести к использованию шрифтаArial – аналогичного шрифта без засечек.

Третий шаг алгоритма состоит в попытке броузера синтезировать шрифт путем модифицирования локального шрифта в соответствии с указанным. Например, запрос на шрифт Helvetica размером 72 пункта можно удовлетворить за счет масштабирования 12 пунктового шрифта Arial до требуемого размера.

При неудачном завершении трех предыдущих шагов броузер может предпринять четвертый и загрузить требуемый шрифт, если автор предоставил подходящее определение внешнего шрифта. Такие определения создаются с помощью специальной директивы @font-face, имеющей такой синтаксис:

@font-face {
descriptor : value;

descriptor : value
}

Каждая специальная директива @font-face определяет для броузера новый шрифт. Последующие запросы на шрифты могут быть удовлетворены этими новыми шрифтами. Броузер использует различные дескрипторные значения, чтобы гарантировать соответствие подставленного шрифта запрошенному.

Выбор и синтез шрифтов

5 Август 2009 | Автор: admin Метки:, ,

Первый -стандарт, CSS1, определял упрощенный алгоритм соответствия шрифтов. Если указанный шрифт отсутствует на компьютере клиента, следует подставить неспецифичный шрифт. Конечно, результаты в большинстве случаев не радуют глаз и способны вызвать полный беспорядок на экране. Кроме того, нередко оказывается, что
какой то из имеющихся шрифтов подошел бы лучше, чем шрифт общего назначения. Стандарт значительно расширяет модель соответствия шрифтов, принятую в CSS1, и содержит новую специальную директиву (так называемое правило at), позволяющую авторам определять, загружать и использовать в документах новые шрифты.

Свойство font

2 Август 2009 | Автор: admin Метки:,

Чаще, чем хотелось бы, приходится сразу определять не одно, а несколько свойств шрифтов, чтобы отрегулировать отображение тега. Полная спецификация шрифта может оказаться несколько громоздкой:

p {fon-family: Times, Garamond, serif;
font-weight: bold;
font-size: 12pt;
line-height: 14pt}

Чтобы сократить эти трудоемкие и, вероятно, неудобные для восприятия описания, используйте всеобъемлющее свойство font и соберите все объявления в одно:

p {font: bold 12pt/14pt Times, Garamond, serif}

Группировка атрибутов шрифтов и порядок их перечисления существенны для свойства font. Первыми нужно указывать атрибуты стиля, жирности и варианта шрифта, за которыми должны следовать размер шрифта и высота строки, разделенные слэшем, и последним задается список гарнитур. Из всех свойств обязательны размер и гарнитура;
прочие могут быть опущены.

Вот несколько примеров определения свойства font:

em {font: italic 14pt Times}
h1 {font: 24pt/48pt sans-serif}
code {font: 12pt Courier, monospace}

Первый пример сообщает поддерживающему стили броузеру, что логическое подчеркивание следует выразить, использовав курсивный шрифт Times размером 14 пунктов. Второе стилевое правило говорит о том, что текст в теге <h1> отображается имеющимся в наличии шрифтом семейства sans serif размером 24 пункта с 24 пунктами дополнительного расстояния между строками. Наконец, для текста в теге <code> установлен Courier или, если его нет, выбранный по усмотрению броузера моноширинный шрифт размером 12 пунктов.

Вообразите сами, какие безобразия можно натворить, изобретательно применяя стили шрифтов. Если у вас не получается, загляните в последний номер журнала «Wired».

Свойство font-weight

31 Июль 2009 | Автор: admin Метки:, ,

Свойство font weight заведует весом или жирностью букв. По умолчанию принимается значение normal. Можно установить значение bold, чтобы получить жирную версию шрифта, или использовать относительные значения bolder и lighter для применения версии, которая будет более или соответственно менее жирной, чем принятая для роди
тельского элемента.

Для определения различных уровней «жирности» текста используются числа, кратные 100, от 100 (самый тонкий) до 900 (самый жирный). Значение 400 соответствует значению normal, а 700 соответствует bold.

Все современные броузеры поддерживают это свойство.

Свойство font-variant

28 Июль 2009 | Автор: admin Метки:,

Свойство font-variant позволяет выводить текст маленькими заглавными буквами. Принятое по умолчанию значение этого свойства – normal – указывает на традиционную версию шрифта. Но вы можете придать этому свойству значение small-caps, выбирая версию, в которой строчные буквы заменяются маленькими заглавными (т. е. капителью).

Все современные броузеры поддерживают это свойство. Internet Explorer версий 4 и 5 некорректно реализует small-caps, выводя текст заглавными буквами.

Свойство font-style

24 Июль 2009 | Автор: admin Метки:,

Используйте свойство font-style, чтобы отобразить текст наклонно. По умолчанию принимается стиль normal, который можно переменить на italic или oblique. К примеру:

h2 {font-style: italic}

выводит текст в заголовках уровня 2 курсивом. Netscape 4 поддерживает только значение italic для свойства font-style. Все современные броузеры воспроизводят оба значения, но обычно трудно отличить курсив от наклонного начертания.