Архив рубрики «Самоучитель по веб-дизайну. Книга 2»

20 4 Глава 4. Каскадные списки стилей





Из самих названий свойств следует, что свойств letter-spacin g позволяет

установить интервалы между буквами в словах, word-spacing — интервалы между словами, a line-heigh t (как вы уже, наверное, догадались) — интервалы между строками текста. (Фактически, свойство line-heigh t было бы правильнее на —

звать line-spacing, но тестовые процессоры используют термин «высота строк», поэтому для простоты в каскадных списках стилей используется тот же термин.)

Как и в случае со свойством text-indent, для задания значений всех выше пе — речисленных свойств могут использоваться любые единицы измерения, примене — ние которых допускается в каскадных списках стилей. Имейте в виду, что при указании интервалов между буквами и между словами браузер добавляет указан —

ное вами расстояние к тому, которое используется браузером по умолчанию. По — этому для добавления интервала в 5 пикселей между буквами в тексте заголовка уровня 1 можно написать следующее правило:



hl style=»letter-spacing: 5рх»>П1ирокий интервал между буквами в словах



Аналогично, для добавления интервала в 1 пику между словами в цитатах можно использовать следующее правило списков стилей:



cit e {word-spacing:lpc}



Как уже упоминалось, свойство line-heigh t позволяет устанавливать верти —

кальное расстояние между строками текста. Не хотелось бы усложнять, но обыч- ный термин для расстояния между строками — интерлиньяж. Таким образом, свойство line-heigh t позволяет контролировать интерлиньяж. Значение свой — ства line-heigh t можно задавать одним из трех методов: числом, единицей длины, используемой в каскадных списках стилей и в процентах. Web-браузер

добавляет расстояние, указанное вами в свойстве line-height, перед каждой строкой теста.

При указании значения свойства line-heigh t числом или в процентном от — ношении Web-браузер для определения интерлиньяжа будет использовать размер шрифта. Таким образом, при использовании на странице следующего правила браузер вставит между строками текста, выводимого полужирным шрифтом, рас — стояние 25 пунктов:

b {font-size:10pt; line-height:2.5}



Браузер умножает значение свойства font-siz e (10 пунктов) на значение свойства line-heigh t (2.5) и получает интерлиньяж, равный 25 пунктов. Анало — гично, то же самое правило можно записать с использованием процентов:



Ь {font-size:10pt; line-height:250%}



Как и в предыдущем примере, Web-браузер установит значение свойства line-heigh t равным 25 пунктов, поскольку 250% от текущего размера шрифта

(10 пунктов) как раз и составляет 25 пунктов. Обратите внимание, что в правило можно не включать объявление свойства font-size. При указании значения свойства line-heigh t числом или в процентах браузер для получения интерли- ньяжа всегда будет умножать текущий размер шрифта на значение свойства

line-height.

Глава 4. Каскадные списки стилей 20 5





Для задания интерлиньяжа в единицах измерения длины каскадных списков стилей поместите в определение свойства line-heigh t указание используемой единицы измерения. Например, для определения класса каскадного списка сти — лей, применяемого для создания двойного интервала между строками, нужно до — бавить на страницу следующее правило:



. doube space {line-height : 2em}



Аналогично, для введения интервала 12 пунктов перед каждой строкой текста в абзаце можно воспользоваться следующим внутритекстовым определением стиля:







Обратите внимание, что если значение свойства line-heigh t меньше исполь — зуемого размера шрифта, строки текста будут накладываться друг на друга. На — пример, если бы размер шрифта в приведенном выше примере был равен 24 пункта, строки текста абзаца накладывались бы друг на друга. Точнее говоря, буквы каждой строки начинались бы посредине букв предыдущей строки, по — скольку интерлиньяж 12 пунктов составляет половину размера шрифта 24 пункта.

ся в заголовках. Например, правила класса icap из предыдущего примера можно расширить следующим образом:



.icap {font-size: 150%; font-family: «comic sans ms», impact}



При применении класса icap он приведет к увеличению размера первой бук — вы абзаца в 1.5 раза по сравнению с размером шрифта окружающего текста и вы — делением ее шрифтом Comic Sans MS. Если шрифт Comic Sans MS не установ — лен в системе посетителя, вместо него будет использоваться шрифт Impact. (Если же на компьютере посетителя нет и шрифта Impact, будет использоваться шрифт по умолчанию; тем не менее, первая буква абзаца будет все равно выде — ляться за счет увеличенного размера шрифта.)





Глава 4. Каскадные списки стилей 20 7



Настройка внешнего вида гиперссылок

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

ных ссылок. Каскадные списки стилей дают вам возможность выбора: можно ос — тавить определение внешнего вида гиперссылок за Web-браузером посетителя или самим установить, как они должны выглядеть. Например, можно написать правила каскадного списка стилей, которые будет изменять цвет шрифта, цвет фона и даже при желании удалить выделение подчеркиванием. Более того, для различных гиперссылок можно применять различные стили. Так, например, для гиперссылок, внедренных в другие элементы Web-страниц, цвет фона можно ос —

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



ПРАКТИКУМ

Для настройки внешнего вида гиперссылок необходимо добавить на страницу пра — вила, задающие значения свойств одного, отдельных или всех четырех псевдоклас — сов дескрипторов привязки:

a:lin k Непосещенная ссылка.

a:visite d Посещенная ссылка. Это означает, что в журнале посещенных ссылок Web-браузера содержится элемент, соответствующий адресу перехода по ссылке (т. е. URL-адрес, указанный в атрибуте href

гиперссылки). ‘ —

a:hover

Указатель мыши посетителя находится над гиперссылкой.



a:activ e

Указатель мыши посетителя находится над гиперссылкой и

посе —

титель нажимает или отпускает левую кнопку мыши (или правую кнопку для мыши, настроенной на левшей).



Например, для установки темно-зеленого цвета непосещенных и пурпурного

цвета посещенных гиперссылок поместите на страницу следующие правила кас — кадного списка стилей:

a:link {color:darkgreen}

a:visited {color:magenta}

При необходимости удаления выделения гиперссылок подчеркиванием вы должны обеспечить другой метод выделения. Например, можно изменить тип шрифта ссылок или изменить цвет их фона. Однако, какой бы метод вы не из- брали, его нужно применять ко всем классам гиперссылок. Для применения од —

ного и того же стиля ко всем гиперссылками удалите ссылку на цсевдокласс из правила списка стилей, как показано в следующем примере:



a {text-decoration:none; background-color:yellow}

208 Глава 4. Каскадные списки стилей





В приведенном примере свойство text-decoration, значение которого равно

«попе», убирает подчеркивание гиперссылок, а свойство background-color ис — пользуется для установки желтого цвета фона гиперссылок. Обратите внимание, что Web-браузеры будут применять содержащиеся в этом правиле объявления к дескрипторам привязки (а) всех псевдокалассов гиперссылок. Таким образом, при использовании приведенного выше правила каждая гиперссылка на Web —

странице будет иметь желтый цвет фона, а подчеркивание текста гиперссылок будет отсутствовать.

Для создания дополнительных эффектов можно воспользоваться псевдоклас — сом «hover» для изменения внешнего вида гиперссылок при подведении к ги- перссылками указателя мыши. При создании такого эффекта можно пользовать —

ся любым типом форматирования. Так, например, при необходимости вывода на экран текста гиперссылки шрифтом, размер которого в 1.5 раза больше размера текущего шрифта, курсивом и с голубым цветом фона, вставьте на страницу сле — дующее правило:



a:hover {font-size:I.5em; font-style:italic; background-color:cyan}

И в качестве последнего шага в настройке внешнего вида гиперссылок на

Web-сайте можно сделать так, чтобы ссылки на страницы этого сайта отличались

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

будет форматировать ссылки требуемым образом.

Например, предположим, что необходимо, чтобы все гиперссылки на другие Web-сайты (т. е. внешние гиперссылки) выводились светло-зеленым цветом шриф- та, пурпурным цветом фона без подчеркивания. Более того, требуется, чтобы только внешние ссылки при наведении на них указателя мыши меняли цвет шриф —

та на белый. Нет проблем. Добавьте на страницу следующие правила списка стилей:



а. external {color:lightgreen; background-color:purple;

text-decoration:none}

a. external:hover {color.-white; font-style:bold}

Затем примените класс externa l для всех внешних гиперссылок, как показа — но в следующем примере:



Ссылка на другой сайт

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

Глава 4. Каскадные списки стилей 209



Создание эффекта отбрасывания тени

Несмотря на то что сеть Internet повидала немало изменений, одно осталось

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

их передачи по Internet требуется больше времени.

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

байт, необходимое для хранения двух копий самого текста. Поэтому для мини — мизации времени загрузки для баннеров желательно использовать только текст, а

не его графическое изображение. Баннер можно создать с помощью операторов

позиционирования каскадных списков стилей и обычного текста.

Для создания текстового баннера с эффектом отбрасывания тени текстом (как показано на рис. 4.15) необходимо два текстовых элемента — один для текста баннера, а второй для его тени. Вставьте в список стилей правило для задания стиля и положения элемента баннера и еще одно правило для форматирования

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



ПРАКТИКУМ

Давайте начнем с создания класса каскадного списка стилей, приведенного ниже, который позволяет требуемым образом отформатировать и установить положение баннера на Web-странице:



210 Глава 4. Каскадные списки стилей





Затем добавьте на страницу класс отбрасывания тени, который использует тот же самый тип шрифта и тот же самый размер, что и класс banner. Как показано

в следующем примере, для смещения текста тени относительно текста баннера

задействуются свойства top и left, несколько отличные от соответствующих па —

раметров класса banner!







В приведенном примере Web-браузер поместит класс, отмеченный стилем banner, на семь пикселей ниже верхнего края Web-страницы и на один пиксель правее ее левого края. Текст, отмеченный стилем shadow, будет расположен на 15

HTML & Web Design

HTML & Web Design

Глава 4. Каскадные списки стилей 211





изображений или элементов мозаичного изображения, которые копируются Web — браузером и изображаются в качестве фона Web-страницы. Поэтому не удиви —

тельно, что для создания границы используется свойство background-image кас — кадных списков стилей. Так, например, в центре страницы, показанной на рис.

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



Рис. 4.16. Web-страница с элементом мозаичного изображения

и боковой панелью или границей вдоль левого края страницы

Первый шаг на пути создания границы — рисование или загрузка небольшого изображения в формате GIF, которое будет использоваться для формирования

границы. Для создания вашего собственного элемента мозаичного изображения можно воспользоваться таким графическим редактором, как Photoshop. Кроме того, можно взять готовое изображение из галереи картинок, поставляемой вмес —

те с пакетом Microsoft Office, или выгрузить его из таких Web-сайтов, как

Microsoft Design Gallery Live (http://dgi. microsoft. com). После получения тре — буемого изображения сохраните его в каталоге изображений Web-сайта (напри — мер, в каталоге images). Далее, вставьте на страницу следующее правило каскад — ного списка стилей:

body {background-image:URL(images/TileFilename. gif);

background-repeat:repeat-y}

В приведенном примере свойство background-image указывает относитель —

ный путь к файлу мозаичного изображения, которое должно выводится браузе —

ром. Свойство background-repeat указывает Web-браузеру повторять изображе —

ние в вертикальном направлении. Поскольку свойство background-position не было установлено, Web-браузер будет повторять изображение вдоль левого края страницы. Обратите внимание, что для замены изображения, используемого в качестве элемента мозаичного изображения, замените относительный адрес