 |
Задание фона Web- страницы.
|
|
|
|
Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно установить одновременно все значения параметров фона.
Цвет фона определяется значением свойства background-color, а изображение, используемое в качестве фона, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.
Например,
BODY {background-color: lightsteelblue;
background-image: url(/image/image.gif);}
<P> {background-image: none}
В приведенном примере задается адрес файла изображения для фона тела документа и явно указывается отсутствие фона для абзацев документа.
Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется).
Например,
BODY {background-color: lightsteelblue;
background-image: url(/image/image.gif);
background-repeat: repeat-y;} /*задается повторяемость изображения фона по вертикали */
Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке.
|
|
|
Пример закрепленного в окне браузера изображения фона:
BODY {background-color: lightsteelblue;
background-image: url(/image/image.gif);
background-repeat: repeat-y;
background-attachment: fixed;}
Свойство background-position определяет начальное положение изображения, используемого в качестве фона, в блоке содержимого элемента. Значением этого свойства являются координаты привязки определенных точек изображения и блока содержимого. Их можно задавать в процентах, в абсолютных единицах длины, а также с использованием комбинаций ключевых значений.
Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.
Пара абсолютных значений, например 10mm 10mm, размещает верхний левый угол изображения на 10 мм правее и на 10 мм ниже левого верхнего угла блока содержимого.
Ключевые значения и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в таблице 5.1.
Таблица 5.1 - Ключевые значения и их допустимые комбинации
| Комбинация | Значение |
| top left, left top | 0% 0% |
| top, top center, center top | 50% 0% |
| top right, right top | 100% 0% |
| left, center left, left center | 0% 50% |
| center, center center | 50% 50% |
| right, center right, right center | 100% 50% |
| bottom left, left bottom | 0% 100% |
| bottom, bottom right, bottom center | 50% 100% |
| bottom right, right bottom | 100% 100% |
Задание типа шрифта, размер шрифта и цвета шрифта для текста и заголовков Web-страницы.
|
|
|
Выбор подходящего шрифта для отдельных частей документа является од ним из наиболее часто выполняемых действий в процессе разработка HTML-документа. Шрифты различаются по своему внешнему виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и по "жирности" отображения (нормальный, полужирный). Каскадные таблицы стилей предоставляют в распоряжение разработчика набор свойств для установки всех перечисленных параметров шрифтов.
Свойство font-family.
Свойство font-family задает приоритетный список семейств шрифтов и/или типовых семейств шрифтов. Если использовать для отображения страницы один определенный шрифт, то может оказаться, что этот шрифт не поддерживает некоторые символы, содержащиеся на странице, или на компьютере пользователя нет вообще этого шрифта. Для разрешения подобных проблем это свойство позволяет разработчику страницы задать список шрифтов одного стиля и размера, среди которых браузер может искать необходимый символ. В отличие от других свойств каскадных таблиц стилей названия семейств в списке отделяются запятыми, чтобы показать их альтернативность.
Например,
BODY {font-family: TimesDL, "Times New", serif}
При интерпретации HTML-страницы браузер сначала ищет на компьютере пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New, а если и он не найден, то используется любой шрифт из семейства шрифтов serif— одного из типовых семейств шрифтов компьютера.
Понятие типовых семейств шрифтов введено в каскадные таблицы стилей с целью реализации наихудшего варианта отображения страницы, если не найдены специально использованные автором шрифты. В любой реализации каскадных таблиц стилей должны существовать пять типовых семейств шрифтов, которые соответствуют реальным шрифтам, обычно устанавливаемым на большинстве компьютеров:
1. serif (например, Times)
2. sans-serif (например, Helvetica)
3. cursive (например, Zapf-Chancery)
4. fantasy (например, Western)
5. monospace (например, Courier)
Имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки.
Например,
BODY {font-family: "Times New Roman", serif}
Свойство font-style.
Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).
|
|
|
Нормальный шрифт — это обычный прямой шрифт, используемый для печати документов. Курсивный стиль шрифта напоминает каллиграфические этюды в прописях первоклассников и близок к рукописному. Наклонные шрифты генерируются из обычных прямых шрифтов небольшим наклоном символов.
Обычно в базе шрифтов браузера все шрифты, в именах которых встречаются слова Oblique, Slanted или Incline отмечены как наклонные (oblique) шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive или Kursiv, отождествляются браузером с курсивными (italic).
Например,
HI {font-style: italic} /* курсивный стиль шрифта заголовка первого уровня*/
HI EM {font-style: normal}/* нормальный, прямой шрифт выделенных частей заголовка*/
Свойство font-variant.
Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства — капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями.
Значение normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариант капитель шрифта. Рекомендации по каскадным таблицам стилей допускают создание шрифта капитель простой заменой строчных букв масштабированными символами верхнего регистра.
Например,
Н4 {font-variant: small-caps}/* отображение заголовка четвертого уровня капителью*/
EM {font-style: oblique} /* наклоннfz капитель в выделенных частях */
Свойство font- weight.
Это свойство выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому "бледному" шрифту, тогда как 900 — самому "жирному".
Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700.
Выбор определенной градации жирности шрифта не означает, что в семействе существует шрифт с заданной жирностью. Единственное, что гарантируется, — это то, что шрифт с большим значением жирности не светлее предыдущего значения. Некоторые семейства имеют только две градации жирности: нормальную и полужирную.
|
|
|
Свойство font-size.
Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным.
Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large, которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифта medium и в 1.2 ниже шрифта x-large. По умолчанию браузер использует значение medium.
Абсолютное значение можно задать и в виде абсолютного значения длины, например 10pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера.
Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины.
Например,
P {font-size: 10pt)
ЕМ {font-size: 120%}
ЕМ {font-size: 1.2em}
Два последние правила для выделенного в абзаце элемента ЕМ определяют одинаковую высоту шрифта 12pt.
Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции.
Например,
<P> {color: blue}
<ЕМ> {color: rgb(0,0,255)}
Оба правила в примере устанавливают синий цвет текста соответствующих элементов.
|
|
|
