<< Пред. стр.

стр. 34
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

128 35%
2726 32%
263443 32%
2 98%
Intensity of the Kenneth Frequency Fluctuations in B.ta transmission Margin of Error




Puc. 56.10. Bud таблицы данных в браузере не изменяется при задании
идентификаторов (ID) и атрибутов headers, но эта дополнительная разметка
будет иметь значение для будущих устройств чтения с жрана

Другой способ улучшения доступности таблицы данных состоит в группировке ячеек
по категориям с помощью атрибута axis. Имена категорий могут быть любыми —
просто используйте имена согласованно, как в следующем примере, где для всех ячеек
«intensity» значение атрибута axis равно i n t e n s i t i e s , для всех ячеек «fluctuation»
значение атрибута axis равно f l u c t u a t i o n s , и для всех ячеек «error» значение атри-
бута axis равно errormargins.
ГЛАВА 56. Разработка таблиц данных 315


Совет
Если ячейка принадлежит двум или большему числу заголовков, раз-
деляйте идентификаторы (ID) заголовков пробелами, как в следую-
щем примере:
<td headerв="первыйзаголовок второйзаголовок третийза-
головок четвертыйзаголовок">

<table border="l" rules="rows">

<caption>Table 4: Intensities of the Kenneth and Bradley
Frequencies and Fluctuations in Beta Transmission</caption>


<col width="150">
<colgroup span="3" width="150" align="center">


<thead>
<tr>
<th>&nbsp;</th>
<th id="intensity" abbr="Intensity"
axis="intensities">Intensity</th>
<th id="fluctuation" abbr="Fluctuation" axis="fluctua-
tions">Fluctuations in Beta Transmission</th>
<th id="error" abbr="Error" axis="errormargins">Margin of
Error</th>
</tr>
</thead>


<tbody>
<tr>
<th id="kenneth" rowspan="5" abbr="Kenneth">Kenneth
Frequency</th>
<td he'aders="intensity kenneth" axis="intensities">l</td>
<td headers="fluctuation kenneth"
axis="fluctuations">90</td>
<td headers="error kenneth" axis="errormargins">6%</td>
</tr> . .•

<tr>
<td headers="intensity, kenneth" axis="intensities">2</td>
Строим Web-сайты
316

<td headers="fluctuation kenneth" axis="fluctua-
tions">128</td>
<td headers="error kenneth" axis="errormargins">35%</td>
</tr>
<tr>
<td headers "intensity kenneth" axis="intensities">3</td>
<td headers1 "fluctuation kenneth" axis="fluctua-
tions">2726</td>
<td headers="error kenneth" axis="errormargin§">32%</td>
</tr>
<tr>
<td headers "intensity kenneth" axis="intensities">4</td>
<td headers1 "fluctuation kenneth" axis="fluctua-
tions">263443</td>
<td headers="error kenneth" axis="errormargins">32%</td>
</tr>
<tr>
<td headers="intensity kenneth" axis="intensities">5</td>
<td headers= "fluctuation kenneth"
axis="fluctuations' >2</td>
<td headers="error kenneth" axis="errormargins">98%</td>


</tbody>


<tbody>
<tr>
<th id="bradley" rowspan="5" abbr="Bradley">Bradley
'Freguency</th>
<td headers="intensity bradley" axis="intensities">l</td>
<td headers="fluctuation bradley"
axis="fluctuations">4</td>
<td headers="error bradley" axis="errormargins">73%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">2</td>
<td headers="fluctuation bradley"
axis="fluctuations">45</td>
<td headers="error bradley" axis=:"errormargins">35%</td>
ГЛАВА 56. Разработка таблиц данных 317

</tr>
<tr>
<td headers="intensity bradley" axis="intensities">3</td>
<td headers="fluctuation bradley" axis="fluctua-
tions">356</td>
<td headers="error bradley" axis="errormargins">12%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">4</td>
<td headers="fluctuation bradley"
axis = "f luctu'ations">32</td>
<td headers="error bradley" axis="errormargins">ll%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">5</td>
<td headers="fluctuation bradley"
axis="fluctuations">12</td>
<td headers="error bradley" axis="errormargins">2%</td>
</tr>
</tbody>


</table>
Вид этой таблицы показан на рисунке 56.11.



Table 4 Intensities of the Kenneth and Bradley Frequencies and Fluctuations in Beta Transmission

a
Intensity Margin of Error
"
Transmission
1 6%
90
128 35%
2 •

Kenneth Frequency 3 2726 32% L
4 32%
263443
5 98%
2
1 4 73%
35%
2 45
Bradley Frequency 3 356 12%
4 11%
32
12 2%
5




Puc. 56.11. Группирование ячеек по категориям атрибута axis не влияет
на внешний вид таблицы данных в браузере, но для будущих устройств чтения
с жрана имена атрибута axi s позволят лучше понимать компоновку таблицы
ГЛАВА 57.
использование псевдоэлементов
В каскадных таблицах стилей псевдоэлементы — это специальные дополнения к се-
лекторам HTML-тегов. Они идентифицируют определенные разделы текста внутри
HTML-элемента. В настоящее время существуют два псевдоэлемента: f i r s t - l i n e и
f i r s t - l e t t e r . Их можно применять к любому текстовому тегу или любым тегам, со
держащим текст, таким, как <table> или <div>.
Любая старая таблица стилей могла бы идентифицировать общий стиль абзаца следу-
ющим образом:
Р(
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;




Определение
В каскадных таблицах стилей псевдоэлемент (pseudo-element) —
это специальное дополнение к селектору HTML-тега, которое иден-
тифицирует определенную часть текста внутри элемента.



Только в очень изощренных таблицах стилей добавляются псевдоэлементы, которые
указывают браузеру, что надо делать с первой строкой абзаца:
Р(
font-family: A r i a l , Helvetica, sans-serif;
f o n t - s i z e : 14px;



p:first-line {
font-weight: bold;
font-variant: small-caps,-


Полученные эффекты можно увидеть на рисунке 57.1.
ГЛАВА 57. Использование псевдоэлементов 319


Fte Favortw loots
?<й View


TMS IS THE FIRST LME OF Д PARAGRAPH. IT GOES ON AND ON AND ON A M I ON AND ON AND ON AND ON AND ON AND ON AND ON AND ON AND O N .
When It finally ends, the style reverts to normal type




Рис. 57.1. Псевдоэлемент first-line идентифицирует специальный стиль
для первой строки текстового элемента, как в этом абзаце


Часто задаваемые вопросы
Как узнать, где кончается первая строка?
Ширина окна браузера определяет, где заканчивается первая строка.
Поэтому дизайнер теряет некоторую степень контроля над тем, какой
текст обрабатывается псевдоэлементом first-line. Если вы хотите
сохранить полный контроль над своим текстом, воздержитесь от ис-
пользования псевдоэлемента first-linen вместо него заключите в
теги <span> ту строку текста, которую хотите изменить. Затем приме-
ните специальное определение стиля к атрибуту style тега <span>.


Псевдоэлемент f i r s t - l e t t e r функционирует во многом так же, только он воздей-
ствует на первую букву текста, а не на всю первую строку:


font-family: Arial, Helvetica, sans-serif;
font-size: 14px;




p:first-letter {
font-family: "Times N w Roman", Times, serif;
e
font-weight: bold;
font-size: 48px;


На рисунке 57.2 показан результат действия этих правил стиля.
Строим Web-сайты
320


Совет
Помните: несмотря на то, что в примерах этой главы показаны абза-
цы, псевдоэлементы first-line и first-letter могут использ о -
ваться с любым текстовым тегом или тегом-контейнером, таким
<table> или <div>.




О псе upon a time, in a land far away, tnere lived з wickect wltcr. She had three fingers on
each hand, two fingernails on each finger, two noses on her face, and three warts on'each nose


"he was quite unhappy with her HMO, and she decided to do something about it




Puc. 57.2. Псевдоэлемент first-letter определяет специальный стиль
для первой буквы текстового элемента


Инструментарий Таблица стилей для буквиц
В издательском деле буквица - это заглавная буква увеличенного
размера, которая обычно располагается в начале главы. Однако
по сравнению с увеличенной заглавной буквой, показанной на
рисунке 57.2, буквица отличается одной особенностью: буквица
выходит вниз за базовую линию текста, и первые три или поряд-
ка этого строк текста в абзаце обтекают ее, как на рисунке 57.3.


Определение
Буквица (drop cap) — это заглавная буква уве-
личенного размера, обычно находящаяся в са-
мом начале главы. Она выходит вниз за базо-
вую линию текста, и соседние строки текста об-
текают ее.



Определение
Нижние выносные элементы (descenders) —
это части букв, которые выходят вниз под базо-
вую линию строки текста, как, например, ножка
строчной буквы р.
ГЛАВА 57. Использование псевдоэлементов 321


Fte Edit flew FavwitM - Tools Hefc



O nce upon a time, in a land far away, there lived a wicked witch She had three
fingers on each hand, two fingernails on each finger, two noses on her face, and
three warts on each nose. She woke up every night prompty at 10:00 She ate a
sensible oreakfast of two frogs and a dried bat wing; then she retired to her study and
practiced the black arts until the first light of day To escape the sun, which rendered her
powerless, she slept deep in a drainage ditch under a blanket of sticks and rotten
leaves
Л




Рис. 57.3. Буквица- это заглавная буква увеличенного размера,
которая выходит вниз за базовую линию текста.
Следующая пара строк текста обтекает буквицу
В этом «Инструментарии» приводится правило стиля для буквиц.
Просто скопируйте и вставьте его в существующую таблицу сти-
лей. Не бойтесь изменять размер шрифта. Возможно, потребует-
ся подогнать стиль для конкретной страницы в зависимости от
гарнитуры и размера шрифта основного текста. По высоте букви-
ца должна занимать от трех до четырех строк текста. Заглавные
буквы с нижними выносными элементами или частями, распо-
ложенными ниже базовой линии, подобно заглавной букве Q в
гарнитуре с засечками (serif), занимают четыре строки текста,
тогда как обычные заглавные буквы занимают три строки.
В правило стиля можно добавлять также другие CSS-атрибуты, та-
кие, как фоновый цвет и дополнительное пустое пространство.
p.dropcap:first-letter {
font-family: Georgia, 'Times New Roman",
Times, s e r i f ;
font-weight: bold;
font-size: 63px;


/* Данный размер шрифта выбран в предположении, что
размер основного текста равен 14 пикселам и что бук-
вица занимает от трех до четырех строк текста. */


float: left;


/* Атрибут float является секретным оружием, кото-
рое заставляет работать буквицу. Когда элемент пла-
вает, браузер окружает его соседними элементами.
Элемент может свободно перемещаться влево или впра-
во. */
Строим Web-сайты
322

p a d d i n g - r i g h t : 2рх;


/* Добавление небольшого пустого пространства
справа от буквицы помогает избежать соприкоснове-
ний буквицы с окружающими строками текста. */




Чтобы использовать данное правило стиля, задайте для любого
абзаца класс d r o p c a p :
<р class="dropcap">Once upon a time, i n a l a r d
far away....</p>
Поскольку область применения класса dropcap в этом «Инстру-
ментарии» ограничивается абзацами, буквицу нельзя добавить в
заголовок, таблицу или тег любого другого типа. Если необходи-
мо, чтобы класс dropcap работал с любым подходящим элемен-
том, включая абзацы, просто удалите тег абзаца из селектора,
как в следующей строке кода:

.dropcap:first-line {




Часто задаваемые вопросы
Эта буквица выглядит нелепо в браузере Netscape. В чем проблема?
Стили буквицы, включая тот, что приведен в этом «Инструментарии»,
как правило, выглядят лучше в Internet Explorer, чем в Netscape, пос-
кольку браузером Netscape добавляется чрезмерная величина пусто-
го пространства над верхом буквицы. Чтобы улучшить вид данного
стиля в Netscape, добавьте в определение стиля фоновый цвет. В ре-
зультате буквица будет помещена внутрь цветного прямоугольника и
пустое место над буквой будет меньше бросаться в глаза.
Для улучшения внешнего вида можно воспользоваться очевидным
искусственным приемом, состоящим в добавлении в определение
стиля отрицательных значений верхнего и нижнего полей:
margin-top: -12рх;
margin-bottom: -12рх;
В этом случае буквица сдвигается вверх, но одновременно добавля-
ются дополнительные 12 пикселов пустого пространства перед нача-
лом абзаца.
Отрицательные поля, по крайней мере, не влияют на внешний вид
буквицы в Internet Explorer, поэтому данное решение проблемы при-
годно для обоих браузеров.
ГЛАВА58.
Определение стилей идентификаторов
Селектор идентификатора (ID) в каскадных таблицах стилей во многом подобен клас-
су, относящемуся к определенном)' тегу, в том отношении, что он является привилеги-
рованным клубом. В действительности селектор идентификатора настолько привиле-
гирован, что применяется к одному и только к одному элементу на странице Никакие
два элемента не должны принадлежать одному и тому же идентификатору, даже если
элементы относятся к одному и тому же типу: абзацам, изображениям, ссылкам или

<< Пред. стр.

стр. 34
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>