<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>


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


Обратите внимание, что второй абзац под заголовком первого уровня не выделяется
полужирным шрифтом. Почему? Потому что фактически этот абзац следует за абза-
цем, а не за заголовком первого уровня. Братский селектор выбирает только тег, сле-
дующий непосредственно за ним, и только тогда, когда второй тег не является дочер-
ним объектом первого тега. Таким образом, приводимое ниже правило стиля:
td + em {
font-weight: bold;
Строим Web-сайты
238


Е» Е* XN» Favortes look a*

Here is a paragraph. It doesn't follow a Erst-level head


Here is a first-level head.
Here is a paragraph that follows a first-level head.

Here is a paragraph that follows a paragraph.


Here is a second-level head.
Here is A paragraph that follows a second-level bead




Рис. 45.4. Используйте братский селектор для воздействия на теги, которые
следуют за другими тегами, но не являются дочерними объектами этих тегов

не оказывает воздействия на следующий блок HTML-кода:
<td>
This i s unformatted t e x t with <em>emphasis</em>.
</td>
Как и с другими типами селекторов, братские селекторы позволяют достигать высо-
чайшего уровня точности в управлении тегами. Это правило стиля действует только в
отношении абзацев, следующих за заголовками четвертого уровня, которые следуют
за заголовками третьего уровня и т.д.:
hi + h2 + h3 + h4 + p {
font-weight: bold;




Смешивание селекторов разных типов
Каскадные таблицы стилей обладают достаточной гибкостью, позволяющей приме-
нять одно и то же определение стиля к нескольким селекторам разных типов. Просто
разделите селекторы с помощью запятых. Рассмотрим следующий пример:
p i , h i , h2 + h3, td > strong {
color-: #FF0000;


Данное правило стиля применяется ко всем абзацам, всем заголовкам первого уровня,
всем заголовкам третьего уровня, являющимся братьями заголовков второго уровня,
и ко всем тегам <strong>, являющимся дочерними элементами ячеек таблицы. Со-
гласно правилу все эти элементы окрашиваются в красный цвет.
ГЛАВА 45. Изменение внешнего вида текстового элемента 239

Следующая таблица стилей оказывает тот же самый эффект, но она не отличается ла-
коничностью:
Р(
color: #FF0000;



hi {
color: #FFO0O0;



h2 + h3 {
color: #FF0000;



td > strong {
color: #FF0000;


Конечно, используйте длинную форму записи, если для вас она представляет более
понятное описание стилей. Но после того как вы привыкните к синтаксису каскадных
таблиц стилей, не забудьте, что можно написать очень эффективные правила стилей,
совершенно не жертвуя точностью определений.
ГЛАВА46.
Определение стилей классов
В главе 45 объяснялось, как с высокой ТОЧНОСТЬЮ переопределять внешний вид текс-
та, размеченного HTML-тегами. А что происходит, если требуется определить стиль,
который не обязательно должен применяться к какому-либо определенному HTML-те-
гу или логической последовательности тегов? Не стоит бояться. Каскадные таблицы
стилей выручат вас. Просто определите свой собственный селектор стиля, называе-
мый классом.



Определение
Класс — это специально создаваемый селектор стиля, который не
обязательно должен применяться к какому-либо определенному
HTML-тегу или к конкретной последовательности тегов.



Правило стиля для типичного класса выглядит похожим на следующий пример:
.bolditalic {
font-weight: bold;
font-style: italic;


Придумайте имя для своего класса и поставьте точку перед ним, как это сделано в пре-
дыдущем фрагменте кода для имени класса . b o l d i t a l i c .



Совет
При заполнении атрибута класса для HTML-тега не включайте точку а
начале имени класса. Просто приведите имя без точки.



Класс каскадных таблиц стилей - это что-то типа клуба, в который может «вступить»
любой HTML-тег, но членство допускается только по приглашению. Чтобы «пригла-
сить» HTML-тег в клуб, заполните для тега атрибут класса, как в листинге 46.1.
ГЛАВА 46. Определение стилей классов 241


Ejle Ed* View Favotites loots НЫр



This first-level heading belongs to the bolditalic

class.
This first-level heading does not.
Ibis paragraph belongs to the boUitalic class.

This paragraph does not.




Рис. 46.1. После определения стиля класса поместите его имя
в атрибут класса того тега, к которому хотите применить класс

Листинг 46.1. Исходный код страницы, вид которой в браузере
показан на рисунке 46.1
<style type="text/css">


.bolditalic {
font-weight: bold;
font-style: italic;



</style>


to the
<hl class="bolditalic">This first-level heading belongs
bolditalic class.</hl>


<h^>This first-level heading does not.</hl>


<p class="bolditalic">This paragraph belongs to the bolditalic
class.</p>


<p>This paragraph does not.</p>

В коде листинга 46.1 следует отметить пару интересных моментов. Во-первых, стиль
класса можно использовать для любого типа тега. Помните, что класс подобен клубу,
в который может «вступить» любой тег. Во-вторых, стиль класса не переопределяет
используемый по умолчанию внешний вид тегов в браузере, если только стиль прямо
Строим Web-сайты
242

не противоречит стандартным настройкам браузера. Заголовки первого уровня отоб-
ражаются полужирным шрифтом по умолчанию, поэтому тег <hl>, входящий в клуб,
просто становится курсивным; полужирным он уже является. Если бы стилем класса
было задано нормальное начертание шрифта, тогда текст, размеченный тегом <h 1 >,
.
отображался бы нормальным, а не полужирным шрифтом, поскольку определение
стиля опровергает стандартный выбор полужирного начертания, используемого бра-
узером по умолчанию для заголовков первого уровня.
Теперь рассмотрим следующий абзац:
<p>This paragraph contains text that belongs to the bolditalic
class.</p>


Определение
Диапазон — это сегмент содержимого, идентифицируемый в HTML -
документе тегами <span>.



Как сделать так, чтобы только слово «text» вошло в клуб bolditalic (полужирный ку| >-
сив)? Атрибут класса нельзя определить, т.к. тогда весь текст абзаца стал бы полужир-
ным и курсивным, а не только слово «text». Для решения этой задачи потребуется тег
<span>, поставленный в нужном месте:
<p>This paragraph c o n t a i n s <span>text</span> t h a t belongs to the
b o l d i t a l i c class.</p>
Тег <span> не оказывает видимого эффекта в окне браузера. Его единственное назна-
чение - это разметка сегмента или диапазона (span) содержимого. Теперь, когда тег ус-
тановлен в надлежащем месте, можно сделать запрос на вхождение тега <span> в клуб:
<p>This paragraph c o n t a i n s <span class="bolditalic">text</spai>
t h a t belongs t o t h e b o l d i t a l i c class.</p>
Результат выполненных действий показан на рисунке 46.2.



This paragraph contains text that belongs to the bolditaic class




Puc. 46.2. Если в требуемом месте нет тега, поместите тег <span> точно там,
где он необходим, а затем внесите тег <span> в свой стиль класса
ГЛАВА 46. Определение стилей классов 243


Формирование привилегированного клуба
ЕСЛИ обычные СТИЛИ классов подобны клубам, в которые может «вступить» любой тег,
то можно также определить привилегированные клубы, в которые могут войти толь-
ко теги определенного типа. Так можно создать стиль класса, который не воздейству-
ет на все абзацы в документе, а только на те абзацы, которые принадлежат классу. За-
головки первого уровня, заголовки второго уровня и все остальные не могут принад-
лежать этому классу, если только вы не добавили их в селектор стиля.
Такое правило стиля выглядит следующим образом:
p.bolditalic {
font-weight: bold;
font-style: italic;
} •

На рисунке 46.3 показан результат действия этого стиля.
Листинг 46.2. Исходный код страницы, вид которой в браузере
показан на рисунке 46.3
<р class="bolditalic">Only paragraphs can join the p . b o l d i t a l i c
class.</p>


<p>This paragraph opts not to join, so i t doesn't enjoy the bene--
f i t s of membership.</p>


<hl class="bolditalic">This f i r s t - l e v e l heading belongs to the
class, but i t doesn't get any of the benefits, because i t i s n ' t a
paragraph.</hl>




Only paragraphs conjoin the p.bolditalic class.


This first-level heading belongs to the class,
but it doesn't get any of the benefits.




Рис. 46.3. Объединяя селектор тега с именем класса, можно создать стиль класса,
которому могут принадлежать только теги этого определенного типа
244 Строим Web-сайты

Как можно заметить, ничто не препятствует тегу <hl> присоединиться к классу, но
браузер полностью игнорирует этот тег, поскольку он не является абзацем. Коне «-
но, браузер по-прежнему отображает заголовок первого уровня полужирным шриф-
том, но это обусловлено тем, что данные элементы отображаются с полужирным на-
чертанием по умолчанию. Полужирное начертание здесь никак не связано с табли-
цей стилей.


Совет
При заполнении атрибута класса не включайте селектор тега в имя
класса, относящегося к тегу. Просто введите имя класса.




Совет
Любой тип селектора тега (простой, контекстно-зависимый, дочер-
ний или братский) может иметь специальное обозначение класса.
Просто добавьте точку и имя класса после селектора. Дополнитель-
ные сведения о типах селекторов смотрите в главе 45.
ГЛАВА 47.
Управление шрифтом
Обычно для отображения текста браузером на компьютерах с операционной систе-'
мой Windows почти всегда используется по умолчанию шрифт Times New Roman.
В HTML существует тег шрифта, позволяющий изменять гарнитуру для определенной
части текста. Тег шрифта работает следующим образом:
<р>
<font face="Arial">3TOT абзац отображается шрифтом Arial.</font>
</р>
Значением атрибута face является имя шрифта, который вы хотите использовать.
Изменяя положение тегов <f ont>, можно применять шрифт к нескольким текстовым
элементам подряд:
<font face="Arial">
<п1>Этот заголовок отображается шрифтом Arial.</hl>
<р>Как и этот абзац.</р>
<р>Как'и этот абзац.</р>
</font>
Но теперь, когда имеются каскадные таблицы стилей, нет необходимости использо-
вать тег < f ont >. Атрибут font - f ami ly выполняет ту же функцию. Атрибут можно до-
бавить в определение стиля HTML-тега:
<Р>
<font family: Arial;
</р>
или стиля класса:
.arialtext {
<font family: Arial;


Каскадные таблицы стилей облегчают также управление шрифтом. Если правило стиля
определено так, что все абзацы отображаются шрифтом Arial, как в первом примере кас-
кадных таблиц стилей, можно забыть об этих раздражающих тегах <f ont>. При каждом
добавлении на страницу абзаца он автоматически отображается со шрифтом Arial.


Совет
Если имя шрифта состоит из нескольких слов, как Times New Roman
или Courier New, удостоверьтесь в том, что имя шрифта помещено в
кавычки в определении CSS-стиля.
246 Строим Web-сайты

Теперь стало лучше. Скажем, вы хотите, чтобы весь текст на странице отображался
шрифтом Arial. Просто поместите атрибут f o n t - f a m i l y в правило стиля для тега
<body>:
body { N

<font family: Arial;




Устранение ошибок, связанных со шрифтами
Чтобы тег <font> и атрибут f o n t - f a m i l y работали корректно, на компьютере посе-
тителя должен иметься указываемый вами шрифт. Не важно, имеется ли этот шрифт на
вашем компьютере. Главное, чтобы шрифт присутствовал на компьютере посетителя.
Итак, как узнать, какие шрифты имеются на компьютере посетителя? Краткий отиет:
узнать невозможно. Но пусть это не мешает вам сформулировать некоторые обос но-
ванные предположения. Все типовые персональные компьютеры поставляются со
стандартными шрифтами. Гарнитуры, перечисляемые в таблице 47.1, практически
всегда имеются на большинстве компьютеров. Смотрите также рисунок 47.1.




serif
sans-serif
monospaced




Рис. 47.1. Шрифт с засечками отличается наличием мелких украшений
на концах букв, а шрифт без засечек не имеет таких украшений.
В моноширинном шрифте все буквы имеют одинаковые интервалы
между знаками для имитации стиля печатной машинки


Определение
Шрифт без засечек (sans serif) такой, как Arial, не имеет небольших
элементов украшения на концах букв. Шрифт с засечками (serif),
например, Times New Roman, имеет такие засечки на концах букв.
• Моноширинный шрифт, например, Courier New, стилизован под
шрифт печатающей машинки, где между любыми знаками и симво-
лами сохраняется одинаковый интервал.
ГЛАВА 4 7 . Управление шрифтом 247

Чтобы дополнительно минимизировать риск отсутствия шрифта, можно задавать ди-
апазон предпочитаемых шрифтов в теге <font> или CSS-атрибуте f o n t - f a m i l y .
Просто укажите свои предпочтения в некотором порядке, разделяя названия шриф-
тов запятыми:
<font face="Arial, Helvetica, sans-serif">
или:
body {
font-family: Arial, Helvetica, sans-serif;




Табл. 47,1. Наиболее распространенные шрифты,
рекомендуемые для использования на Web-страницах

Шрифт Macintosh Категория
Шрифт Windows

Times New Roman Times С засечками

Arial Helvetica Без засечек

Times
Georgia С засечками

Verdana Geneva Без засечек

Courier New Courier Моноширинный


В этих случаях браузер сначала пытается визуализировать текст с помощью шрифта

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>