| |
азмера шрифта — выражение его по отношению
к размеру родительского элемента в пунктах. Отношения типа родительский эле-
мент/дочерний элемент устанавливаются путем включения одного Web-элемента
в другой. Внешний элемент считается родительским, а внутренний — дочерним.
Например, в следующем HTML-коде элемент цитирования является дочерним
элементом для элемента абзаца, поскольку он заключен между начальным и ко-
нечным дескрипторами абзаца:
<р>Весь текст, заключенный между набором начального и конечного
дескрипторов параграфа, является частью элемента параграфа.
3TOT элемент цитаты представляет собой дочерний элемент
по отношению к тому элементу параграфа, в рамках начального и
конечного дескрипторов которого он размещенv
Когда мы используем один HTML-элемент внутри другого, внутренний
элемент является дочерним, а внешний -- родительским.
Параметр em позволяет устанавливать размер Web-элемента в отношении раз-
мера его родительского элемента в пунктах. Параметр em представляет собой ши-
рину буквы "М" текущего шрифта. Поэтому, если в списке стилей установлены
следующие правила, размер текста цитаты, расположенного внутри текста абзаца,
будет в 1.5 раза больше, чем размер текста абзаца:
cite {font-size:1.5em}
р {font-size:12pt}
Если применить эти правила для кода приведенного выше примера, Web-бра-
узер выведет на экран текст абзаца (родительский элемент) размером 12 пунктов,
а текст цитаты выстой 18 пунктов, т.е. в 1.5 раза больше, чем размер родительс-
кого элемента.
На рис. 4.7 показан пример использования следующего списка стилей для
форматирования четырех текстовых элементов (абзац, полужирный текст, эле-
мент списка и цитата):
ycTaHOBKa размера текста с использованием пунктов,
Em и nHKceneii
192 Глава 4. Каскадные списки стилей
Ь \^Т 'ТУ-' - II - - в • ' Г ' - 1 II •
Web-браузер отображает текст этого абзкца с использованием шрифт a Helvetica 12
ПуНКТОВ, поскольку CSS-правнло для серектора"р" иаэтой странице вьнлядит
ках: {font-family:helvetica, "times new roman", courier;
font-size: 12pt}
Приведенная выше конструкция "12 pt" и ссылка на
CSS-правило, равно как и этот текст, отображаются
шрифтом "18 pt", поскольку он заключен в
дескрипторы полужирного начертания, которые
управляются следующим CSS-правилом: b {fontsize:
18ptJ
Каждый элемент в следующем неупорядоченном списке имеет размер 30 пикселей,
что определяется CSS-правилом: li {fOnt-SlZe:30px}.
. Элемент 1
. Элемент 2
. Элемент 3
Весь текст, заключенный между набором начального и конечного дескрипторов
Рис. 4.7. Текст Web-страницы при установке размера шрифта
с помощью пунктов, параметров ет и пикселей
Создание перекрывающегося текста
С помощью каскадных списков стилей на Web-страницу можно внести некую
"изюминку", отформатировав и расположив гиперссылки так, как показано на
рис. 4.8. (Несмотря на отсутствие обычного подчеркивания, все элементы на
Web-странице представляют собой гиперссылки.)
$ Л) -3 -У
Изучение CSS...
.пецификации CSS
. j
Рис. 4.8. Web-страница с перекрывающимся текстом различных типов шрифтов и
размеров
Глава 4. Каскадные списки стилей
Операторы позиционирования каскадных списков стилей позволяют создавать
эффекты наложения элементов Web-страницы (например, текста, изображений и
ДРУГИХ Объектов). ГиперССЫЛКа "Что нового появилось в каскадных списках
стилей?" находится "за" четырьмя остальными гиперссылками, поскольку прави-
ла каскадного списка стилей указали Web-браузеру поместить дополнительный
текст на место, в котором уже находится другой текст. Если вы для каждой ги-
перссылки меняется тип шрифта, его размер и цвет, посетитель будет знать, где
щелкнуть указателем мыши для перехода по каждой ссылке. Кроме того, опреде-
ление границ гиперссылок можно облегчить за счет изменения вида указателя
мыши и/или стиля гиперссылки при подводе к ней указателя. (В последующих
советах этой главы будет показано, каким образом можно изменять внешний вид
указателя мыши и гиперссылки при ее выделении.)
Свойство position каскадных списков стилей указывает Web-бр
|
|
