Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита MapEdit, разработанная Томасом Бутеллом (Thomas Boutell). Эта программа существует уже на протяжении нескольких лет и реализована для различных платформ. Ещё одной утилитой создания и редактирования конфигурационных файлов карт-изображений является программа Map THIS!. Так же можно отметить программу-редактор конфигурационных файлов CrossEye, созданную известной австралийской компанией Sausage Software.
Контрольные вопросы и задания
1.Для чего карту-изображение включают в HTML-документ?
2.Какие теги необходимо прописать при создании такой карты? Каков их синтаксис?
3.Какой дополнительный параметр появляется в теге <IMG>? Поясните его значение.
4.Какие средства создания карт-изображений Вам известны?
5.Разработайте самостоятельно на новой страничке изображение-карту, например, на темы: «Карта сокровищ», «Карта-ориентир по сайту», и т.д.
13.Каскадные таблицы стилей
Собственные средства HTML, теги и их атрибуты выполняют две основные роли: поддержку структуры документа (состав и взаимосвязи элементов) и определение внешнего вида визуальных элементов. При разработке Webприложений внешнему виду страниц уделяется большое внимание. Не даром существует особая область деятельности – Web-дизайн.
Идея как-то отделить параметры внешнего вида документа от массива дескрипторов, определяющих его структуру, воплотилась в технологии,
называемой каскадными таблицами стилей (Cascading Style Sheets, CSS).
Таблица стилей, подобно шаблону форматирования текстов, может быть разработана отдельно от конкретного HTML-документа, а затем применена к нему. Изменяя содержимое таблицы стилей, можно изменять внешний вид HTML-документов, не затрагивая их структуры и информационного содержания. Одна и та же таблица стилей может применяться к нескольким документам и, наоборот, к одному и тому же документу может быть применено несколько таблиц стилей. В последнем случае браузер учитывает приоритеты
62
таблиц и по определённым правилам разрешает возникающие конфликты, в результате чего таблицы выстраиваются неким каскадом. Отсюда и название – каскадные таблицы стилей.
Кроме технологичности стилизации HTML-документов, CSS обеспечивают ещё две важные вещи: произвольное позиционирование элементов и создание визуальных эффектов, таких как полупрозрачность и трансформации графических изображений и текстов.
CSS содержит наборы стилевых параметров (правила форматирования), имеющие простую и отнюдь не табличную структуру. Однако в русскоязычной литературе закрепился перевод: sheet – таблица. Например, если требуется определить для всех заголовков 1-го уровня шрифт Arial 38 пунктов красного цвета, то соответствующее правило можно записать так (рисунок 17):
H1 {font-family: Arial; font-size: 38pt; color: red}
Рисунок 17 – Пример использования каскадных таблиц стилей
В записи правила первый элемент, называемый селектором, представляет собой имя тега без уголковых скобок, к которому относится последующий набор параметров, заключённый в фигурные скобки. Параметры в наборе отделяются друг от друга точкой с запятой (;) и представляют собой пары имя_параметра:значение. Имя параметра отделяется от значения двоеточием (:).
63
Имя тега в записи правила может быть в любом регистре, а имена параметров и их значения записываются только так, как они определены в спецификации CSS.
Встраивание таблиц стилей в HTML-документ
Для применения каскадной таблицы стилей к HTML-документу необходимо её связать с ним или встроить в него. Это можно сделать четырьмя способами.
1.Вставка непосредственно в HTML-документ – правила таблицы стилей заключаются в контейнерный тег <style>, который обычно помещается в контейнер <head>.
Пример: <style>
h1 {color: blue; font-size: 24pt} b {font-style: italic}
</style>
2.Вставка в элемент – набор параметров стиля в виде строки без фигурных скобок присваивается в качестве значения атрибута style тега того элемента, к которому применяется.
Пример:
<hl style="color: blue; font-size:24pt">
3. Импорт – вставка таблицы стилей из внешнего файла с помощью команды: @import: url (URL-адрес файла таблицы стилей).
Файл таблицы стилей является текстовым файлом с расширением css. Оператор @import используется перед другими правилами таблицы стилей в контейнере <style> или в css -файле.
Пример:
<style>
@import: url (http://www.myserver.ru/xyz/mystyle.ess) </style>
4. Связывание с таблицей стилей в файле – использование ссылки на файл таблицы стилей с помощью тега <link>, помещаемого в контейнер
<head>:
<link rel=stylesheet type=text/css href="URL-адрес файла таблицы стилей"> Пример:
64
<link rel=stylesheet type=text/css href="http://www.myserver.ru/xyz/mystyle.css">
Таблица стилей, вставленная с помощью тега <styie>, действует на элементы только текущего HTML-документа, в котором этот тег находится. Если ту же таблицу необходимо применить и к другим документам, то её код придётся повторить в соответствующих HTML-кодах. При этом возрастает общий объём файлов сайта, а также трудозатраты в случае необходимости изменить его стиль. Чтобы избежать этого, используют импорт или связывание таблиц из внешних css-файлов. Когда требуется изменить параметры стилей для отдельных элементов (например, их координаты), вставляют атрибут style. Возможно также комбинирование всех способов встраивания таблиц. В записях таблиц стилей можно использовать операторы комментария, чтобы вставить не отображаемые в окне браузера и не влияющие на форматирование элементов документа пояснения:
// – оператор однострочного комментария; всё, что расположено слева от него, является комментарием;
/*...*/ – оператор многострочного комментария; всё, что расположено между символами /* и */, является комментарием.
Пример:
<style>
/* Таблица стилей для заголовка 1-го уровня и выделения жирным
шрифтом */ |
|
h1 {color: blue; font-size: 24pt} |
// заголовок 1-го уровня |
b {font-style: bold} |
// выделение жирным шрифтом |
</style> |
|
Старые браузеры могут не поддерживать CSS и тег <style>. Чтобы они не отображали таблицы стилей в виде текста, содержимое тега <style> заключают в тег комментария <! --... -->.
Пример:
<style> |
|
<! - - |
|
H1 {color: blue; font-size: 24pt} |
// заголовок 1-го уровня |
65
b {font-style: italic} |
// выделение жирным шрифтом |
- -> |
|
</style> |
|
Тег <style> имеет следующие атрибуты:
type – для каскадных таблиц стилей всегда имеет значение text/css;
media – определяет тип устройства вывода. Браузеры обычно используют следующие значения: screen (экран), print (печать) и all (все). Можно создать стили отдельно для отображения документа на экране монитора и для вывода на печать.
Правила форматирования
Правило форматирования во всех вариантах вставки в HTML-документ, кроме использования атрибута style, содержит селектор и следующий за ним набор параметров, разделенных точкой с запятой (;) и заключённый в фигурные скобки ({}). Параметры задаются парой имя_параметра:значение. Короче говоря, правила имеют следующий синтаксис:
Селектор: {имя_параметра1:значение; имя_параметра2:значение; ...
имя_параметраN: значение}
В случае использования атрибута style синтаксис несколько отличается: style="имя_параметра1:значение; имя_параметра2:значение; ...
имя_параметраN:значение”}
Когда к различным элементам (тегам) требуется применить одинаковые наборы параметров, тогда селекторы можно сгруппировать, перечислив их через запятую перед одним и тем же набором параметров, как в следующем примере:
h3, b {color:blue; font-style:italic; font-size:14pt; font-weight:bold)
Для одного и того же тега можно задать разновидности стилей, называемые классами. Для этого селектор формируется как имя тега, за которым через разделительную точку следует имя класса. Имя класса можно использовать в теге как значение атрибута class. В примере из листинга 6 показано, как используются классы таблицы стилей для заголовков первого уровня (рисунок
18).
Листинг 6 Использование классов таблицы стилей: <html>
<head><title>Классы стилей</title>
66
<style>
h1.курсив {font-style: italic}
h1.подчёркнутый {text-decoration: underline} </style>
</head>
< h1 >Обычный заголовок</ h1> <h1class=курсив> Заголовок курсивом </h1>
<h1 class=подчёркнутый>Заголовок подчёркнутый</ h1> </html>
Рисунок 18 – Применение различных классов стилей к заголовкам 1-го уровня
Для гиперссылок, задаваемых тегом <а> с атрибутом href, в таблицах стиле можно использовать так называемые псевдоклассы стилей:
a: link – неиспользованная ссылка; a: visited – использованная ссылка; а: active – активная ссылка;
a: hover – ссылка, на которой находится указатель мыши. Пример:
<style> |
|
|
|
a: link |
{color: |
blue} |
|
a: visited |
{color: |
green} |
|
a: active |
{color: |
#ffff00} |
|
a: hover |
{color: |
red; |
font-weight: bold} |
67
</style>
Как известно, одни элементы могут быть вложены в другие. Иногда требуется задать особенный стиль для элемента опредёленного типа, если только он вложен в другой определённый тег. В противном случае для элементов этого типа должны выполняться установки по умолчанию или другие наборы стилевых параметров. Допустим, мы хотим, чтобы выделение текста жирным шрифтом (тег <b>) отображалось курсивом, если только оно применяется внутри абзаца (тег <р>). Во всех остальных случаях содержимое тега <b> должно отображаться жирным, но прямым шрифтом, как это принято по умолчанию. Использование просто правила b {font-style: italic} привело бы к повсеместному отображению содержимого тегов <b> курсивом. В подобных случаях используют так называемые контекстные селекторы, которые задают исключения из общих правил форматирования, определённых с помощью простых селекторов или по умолчанию.
Контекстный селектор состоит из имени тега-контейнера и имени вложенного в него тега, разделённых пробелом (в отличие от группировки тегов одинаковыми стилями). Например:
р b {font-style: italic}
При создании таблиц стилей следует учитывать так называемый механизм наследования стилевых параметров вложенными элементами. Так элемент, вложенный в некоторый контейнер, наследует некоторые стилевые параметры, заданные для этого контейнера. Однако не все параметры могут наследоваться. Если необходимо заблокировать наследование некоторых параметров элементом, то для него их следует задать отдельно.
Тег <body> используется в качестве контейнера для всех других видимых элементов HTML-документа. Поэтому для него следует задавать стилевые параметры, общие для всех элементов, если только для них заданы свои собственные (иначе говоря, параметры по умолчанию).
Пример:
body {color:black; background:url(mytexture.gif); font-family:Arial; fontsize:12pt}
Шрифты
Шрифты различаются внешним видом, размером, стилем и "жирностью". Эти параметры можно задать с помощью каскадных таблиц стилей. Если указанный в таблице шрифт не установлен на компьютере пользователя, то можно
68
предусмотреть его загрузку с сервера, на котором расположен документ. Ниже перечислены стилевые параметры для шрифтов:
1) font-family – определяет список семейств шрифтов. Обычно задаются несколько похожих шрифтов в порядке предпочтения на тот случай, если в компьютере пользователя нет нужного шрифта. Названия шрифтов разделяются запятыми. Если название шрифта состоит из нескольких слов, то оно заключается в кавычки. Список шрифтов желательно завершить родовым именем шрифта: serif, sans-serif, cursive, fantasy или monospace. Например, для шрифта Times родовым является serif, для Helvetica – sans-serif, для Courier – monospace.
Примеры:
<style>
h1 {font-family: "Times New Roman", serif} </style>
<body style='font-family: "Times New Roman", serif'>;
2) font-size – размер шрифта. Значение может быть задано разными способами:
абсолютный размер, задаваемый с помощью ключевых слов: xx-small, x-small, medium, large, x-large, xx-large. Эти значения представляют индексы таблицы размеров шрифтов, поддерживаемой браузером. По умолчанию используется значение medium (средний);
относительный размер, задаваемый с помощью ключевых слов: larger (больше) и smaller (меньше). Эти значения интерпретируются относительно таблицы размеров шрифтов браузера и размера шрифта элемента-родителя. Например, если элемент-родитель имеет шрифт размером medium, то значение larger для элемента-потомка сделает размер шрифта равным large (большой). В CSS1 масштабирующий множитель равен 1,5, в CSS2 – 1,2. Размер шрифта относительно элемента-родителя можно задавать и в процентах;
размер, задаваемый в абсолютных единицах длины.
Пример – в листинге 7 (рисунок 19).
Листинг 7 Настройка размера шрифта с помощью таблицы стилей: <html>
<head> <title>Размеры шрифта </title>
<style> |
|
body |
{font-size: 12pt} |
69
h1 {font-size: large }
h2 {font-size: 125%}
h3 {font-size: 12pt}
h4 {font-size: 75%} </style>
</head>
<body>
Обычный текст
<h1> Заголовок 1-го уровня</h1> <h2> Заголовок 2-го уровня</h2> <hЗ>Заголовок 3-го уровня</hЗ> <h4>Заголовок 4-го уровня</h4> </body>
</html>
Рисунок 19 – Размеры заголовков заданы с помощью таблицы стилей
Здесь размеры заголовков 1-го и 3-го уровней заданы в абсолютных единицах, а 2-го и 4-го уровней – в процентах относительно размера шрифта, заданного для тега <body>, являющегося родительским элементом для заголовков;
3) font-weight – жирность шрифта. Возможные значения задаются ключевыми словами «normal», «bold» (жирный), «bolder» (жирнее), «lighter» (светлее) или одним из девяти целых чисел от 100 до 900. Ключевому слову «normal» соответствует числовое значение 400; ключевое слово «bold» задаёт
70
обычный жирный (полужирный) шрифт и соответствует числовому значению 700. Следует иметь в виду, что в текущем семействе может и не быть шрифта с заданной степенью жирности. В этом случае можно лишь гарантировать, что шрифт с большим значением параметра font weight будет не светлее, чем шрифт
сменьшим значением этого пар метра;
4)font-style – стиль шрифта. Возможные значения: normal (нормальный прямой), italic (курсив) и oblique (наклонный). По умолчанию применяется значение normal. Если уже имеется готовый шрифт, соответствующий заданному стилю, то он будет применён. В противном случае текущий шрифт будет изменён программным способом;
5)font-variant – вариант стиля шрифта. Возможные значения: normal (принимается по умолчанию) и small-caps. Значение normal не влияет на отображение шрифта. Значение small-caps заменяет строчные буквы прописными, но делает их несколько меньшими по размеру, чем прописные буквы текущего шрифта.
Пример – в листинге 8 (рисунок 20).
Листинг 8 Настройка стиля шрифта с помощью таблицы стилей: <html>
<head><title>Применение font-variant: small-caps</title> <style>
body {font-size:24pt} </style>
</head>
Текст ТЕКСТ
<span style="font-variant: small-caps">текст</span> текст </html>
Рисунок 20 – Третье слева слово отображено с помощью стиля font-variant: sail-caps
71
6) font – позволяет установить сразу несколько свойств шрифта в одном определении: font-style, font-variant, font-weight, font-size, line-height, font-family.
Значения этих параметров указываются через пробел в том порядке, в котором они были перечислены. Допустимо не указать первые три параметра, что соответствует значению normal, принятому для них по умолчанию. Если задается высота строки (line-height), её значение отделяется от размера шрифта (font-size) прямым слэшем (/). Если список семейств шрифтов (font-family) содержит более одного элемента, то последние отделяются друг от друга запятыми.
Пример:
<style>
body {font: italic 10pt/12pt "Times", serif} </style>
7) @font-face – позволяет указать семейство шрифтов и URL-адрес, по которому можно получить шрифт, если он отсутствует на компьютере пользователя. Данный оператор имеет два параметра, отделяемых друг от друга точкой с запятой:
•font-family – название семейства шрифтов;
•src – URL-адрес шрифта. При этом используется синтаксис: src:url(URL-адрес)
Открывающаяся круглая скобка следует сразу же за ключевым словом url.
Пример:
<style>
@font-face {font-family: MyFont; src:url(http://myserver.ru/MyFont.eot)} </style>
Цвет и фон
Цвет текста определяется с помощью параметра color, а цвет фона элемента – с помощью параметра background-color. По умолчанию цвет фона элемента определён как прозрачный (transparent). Значения этих параметров задаются именем цвета или числовым представлением в системе RGB.
Числовое представление цвета допускает следующие варианты:
шестнадцатеричное число (например, #ffff00);
72
тройка целых десятичных чисел, каждое из которых представляет яркость одной из RGB-составляющих цвета в диапазоне от 0 до 255. При этом три числа передаются в качестве параметров функции rgb (). Например: rgb(255,255,0);
тройка вещественных чисел со знаками %, каждое из которых представляет яркость одной из RGB-составляющих цвета в диапазоне от 0 % до100%. При этом три числа передаются в качестве параметров функции rgb().
Например, rgb (100%, 100%, 0%) .
Пример:
<style> |
|
|
|
|
body |
{color: blue; background-color:#e0e0e0} // текст синий, фон серый |
|||
h1 |
{color: #ff0000; background-color:white} |
/* заголовок 1-го уровня |
||
красный на белом фоне */ |
|
|
||
h2 |
{color: rgb(0, 255, 0)} |
/* заголовок 2-го уровня |
||
зелёный на сером фоне */ |
|
|
||
h3 |
{color: rgb(0, 255, 0)} |
/* заголовок 3-го уровня |
||
зелёный на сером фоне */ |
|
|
||
h4 |
{color: rgb(100%, 50%, 0%); background-color: black} |
/* заголовок |
||
4-го уровня оранжевый на чёрном фоне */ |
|
|
||
</style> |
|
|
|
|
В качестве фона элемента (или всего документа, в частности) можно использовать графическое изображение из файла по указанному URL-адресу. При этом можно задать способ заполнения фоновым изображением области элемента, позиционирование изображения, а также указать, должно ли оно перемещаться при прокрутке документа. Все это можно определить с помощью следующих параметров:
background-image – принимает в качестве значения URL url {URL-
адрес изображения) пли none (отсутствие изображения). Пример:
<style>
body {background-image: url(/myimages/picture.jpg)} </style>
73
background-repeat – определяет способ заполнения области элемента изображением, заданным параметром background-image. Возможны следующие значения:
• repeat – заполнение по горизонтали и по вертикали (по умолчанию);
• repeat-x – заполнение по горизонтали;
• repeat-y – заполнение по вертикали;
• no-repeat – изображение выводится в единственном экземпляре;
background-attachment — определяет, будет ли фоновое изображение прокручиваться при пролистывании документа. Значением по умолчанию является scroll (будет прокручиваться). Для фиксации изображения используется значение fixed;
background-position – определяет начальное положение фонового изображения с помощью двух значений (горизонтальной и вертикальной координат), разделённых запятой. Значения задаются в виде процентов, в абсолютных значениях длины или в виде ключевых слов: top, center, bottom, left, right. Значения по умолчанию: left, top;
background – позволяет установить значения рассмотренных выше свойств background-color, background-image, background-repeat и backgroundattachment. Эти значения указываются через пробел. Значение transparent означает отсутствие фона.
Пример:
<style>
body {background: blue url(/myimages/picture. jpg) repeat-x} </style>
Приведённый в листинге 9 HTML-код создаёт документ, содержащий текстовую область. В качестве её фона и фона всего документа используются различные графические изображения и способы их размещения. Вид этого документа в окне браузера показан на рисунке 21.
Листинг 9 Настройка фона текстовой области и документа: <html>
<head><title>Фон </title>
<style> |
|
body |
{background-image:url(Водяные лилии.jpg); |
background-repeat:repeat; background-position:50% 50%;
74
background-attachment:fixed
}
textarea {background-image:url(Голубые холмы.jpg); background-repeat:no-repeat }
</style>
</head>
<body>
<textarea rows=15 cols=35>
Привет из Хабаровска!!!
</textarea>
</body>
</html>
Рисунок 21 – Заполнение фона элементов документа графическим изображением
Аналогичным образом можно устанавливать параметры фона и для других элементов, таких как кнопки, абзацы, таблицы и т. д. В Windows XP при использовании неклассического стиля оформления кнопок и окон для вставки графического изображения в качестве фона кнопки рекомендуется кроме параметра background-image использовать ещё и параметр цвета фона background-color. В противном случае не удастся отобразить картинку как фон
75
кнопки. В следующем примере (листинг 10) показаны две кнопки (рисунок 22), фон которых заполнен картинками. Чтобы отобразить графику на кнопках, потребовалось, кроме прочего, указать параметр background=color (поскольку использовался стиль Windows XP) и подобрать размеры кнопок, указав их в качестве значений параметров height и width.
Рисунок 22 – Графический фон кнопок
Листинг 10 Оформление кнопок: <html>
<head><title> Кнопки</title> <style>
/* В качестве селекторов правил используются значения id кнопок */
#b1 {background-image: url(1.jpg); background-color:#e0e0e0; background-repeat:no-repeat;
height:90; width:300
} |
|
#b2 |
{background-image: url(2.jpg); |
background-color:#e0e0e0; background-repeat:repeat; height:80;width:300
}
</style>
</head>
76