<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>


Совет
Тег форматирования — это HTML-тег, который описывает внешний
вид блока содержимого, но не идентифицирует ни структуру, ни наз-
начение содержимого. К тегам форматирования в HTML относятся b
(полужирный), i (курсив), и (подчеркивание) и s или strike (пере-
черкивание).


Табл. 44.1. Стандартные CSS-атрибуты форматирования

CSS-атрибуты Возможные значения Пример
font-weight bold, bolder, lighter, font-weight: bolder,-
normal
font-style italic, oblique, normal font-style: oblique;

font-variant normal, small-caps' font-variant:
small-caps;
text-decoration underline, overline, text-decoration:
line-through, none overline;
text-transform capitalize, uppercase, text-transform:
lowercase, none capitalize;



Совет
Текст с большей или меньшей плотностью шрифта вряд ли будет от-
личаться от обычного текста на экране, но, возможно, разница будет
заметна на распечатке. Кроме того, в существующих браузерах нак-
лонный шрифт (oblique) выглядит также, как курсивный шрифт (italic),
хотя в будущих версиях браузеров наклонный текст, возможно, будет
выглядеть по-другому.
ГЛАВА 44. Создание специальных стилей форматирования 229

Хотите черту сверху вместо подчеркивания? Нет проблем - см. рис. 44.1.

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


•о {
text-decoration: overline;




</style>




<q>I thought we went <span class="o">over</span> this,</q> said
Captain Steward.




Рис. 44.1. Использование каскадных таблиц стилей (CSS)
для создания черты сверху вместо подчеркивания

Строку текста можно также визуализировать в стиле small-caps (капитель), который
преобразует строчные буквы исходного кода в уменьшенные прописные буквы в окне
браузера (рис. 44.2).
Строим Web-сайты
230


Fie ?* View Favortes loots


THE B U C K STOPS HERE That's what the placard on his desk said




Рис. 44.2. Строчные буквы исходного кода преобразуются
в окне браузера в заглавные

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


. sc {
font-variant: small-caps;
} •




</style>



<span class="sc">The Buck Stops Here.</span>That's what t h e plac-
ard on h i s desk s a i d .


Подобным образом, используйте значения c a p i t a l i z e , uppercase и lowercase с
атрибутом t e x t - t r a n s f o r m , чтобы изменить регистр букв исходного кода. В тексте
со значением атрибута c a p i t a l i z e первая буква каждого слова выводится на экран
как заглавная. Как показано на рис. 44.3, текст со значением атрибута uppercase
отображается в браузере со всеми заглавными буквами, а текст со значением атрибу-
та lowercase — со всеми строчными буквами, независимо от регистра букв в исход-
ном коде.
ГЛАВА 44. Создание специальных стилей форматирования 231


Fie ?dtt View Favorites loots (jrip


An Ordinary Line Of Text, So Transformed By CSS

AN ORDINARY LINE OF TEXT, SO TRANSFORMED BY CSS

an ordinary line of text, so transformed by ess




Рис. 44.3. Изменяйте регистр букв предложения
с помощью значений атрибута text-trans form

Листинг 44.3. Исходный код страницы, вид которой в браузере
показан на рисунке 44.3
<р style="text-transform: capitalize;">an ordinary iine of text, so
transformed by CSS</P>


<p style="text-transform: uppercase;">an ordinary line of text, so
transformed by CSS</P>


<p style="text-transform: lowercase;">an ordinary line of text, so
transformed by CSS</P>
ГААВА45.
изменение Внешнего Вида
текстового элемента
В каскадных таблицах стилей простейшим селектором стиля является имя HTML те-
га. Определение стиля для этого простого селектора устанавливает, как браузер будет
отображать элемент, независимо от его места на странице:.
hi {
font-family: Arial;
font-weight: bold;




font-family: Verdana;


Таким образом, выполняется переопределение общего внешнего вида HTML-тегов
текста. Как показано в таблице 45.1, каскадные таблицы стилей позволяют выбирать
гораздо более специфические селекторы для всей серии тегов, чтобы получить требу-
емый шрифтовой эффект.



Определение контекстно-зависимых
селекторов
Контекстно-зависимый селектор — это селектор стиля, который идентифицирует
все HTML-теги определенного типа, находящиеся где-нибудь внутри тега другого ти-
па. Этот тип селектора используется для установки стиля всех тегов выделения, кото-
рые встречаются, например, внутри таблицы, либо всех тегов <strong>, встречаю-
щихся внутри упорядоченного списка. В этих примерах браузер игнорирует теги вы-
деления, которые не появляются в таблице, или теги <strong>, которые не находят-
ся в упорядоченном списке, если только для этих случаев не предоставлены дополни-
тельные правила стилей.
Дочерний и братский селекторы не всегда работают хорошо в браузере Internet
Explorer.
ГЛАВА 45. Изменение внешнего вида текстового элемента 233

Табл. 45.1. CSS-селекторы для HTML-тегов

Селектор Описание Пример Описание примера
синтаксиса

Простой Все HTML-теги одного Все абзацы
Р
типа
Контекстно- Все HTML-теги одного ти- table e Все теги выделения, кото-
m
па, которые находятся
зависимый рые находятся где-нибудь
где-нибудь внутри тега внутри таблицы
другого типа

Дочерний Все HTML-теги одного ти- td > р Все абзацы, для которых
ячейки таблицы являются
па, которые имеют в каче-
их прямыми родителями
стве родителя какой-ни-
будь тег другого типа

Все абзацы, которые сле-
Все HTML-теги одного ти- hi +р
Братский
па, которые следуют за те- дуют сразу за заголовками
гом другого типа, но не яв- первого уровня
ляются дочерними элемен-
тами этого другого тега



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


Синтаксис для этого типа селектора выглядит следующим образом:
тег-контейнер целевой-тег
Как можно видеть, имена тегов разделяются с помощью одиночного пробела. Таким
образом, чтобы определить стиль для всех тегов <strong>, располагающихся где-ни-
будь внутри упорядоченного списка, правило стиля должно выглядеть подобно следу-
ющему примеру:
ol strong {
font-style: italic; .-


Только те теги <strong>, которые находятся внутри упорядоченного списка, отобра-
жаются браузером полужирным курсивом. Возможно, у вас возникнет вопрос, почему
полужирным, если в стиле ничего не указывает на полужирное начертание шрифта?
Потому что по умолчанию браузеры воспроизводят текст, размеченный тегами
<strong>, полужирным шрифтом. Как видно из рисунка*45.1, остальной текст на
странице, размеченный тегами <strong>, отображается полужирным шрифтом без
дополнительного эффекта курсива.
Строим Web-сайты
234


ЕЙ Е* J/iew Favorites Tools tJdp
i
Tins strong t a g doesn't appear in an ordered list

• This strong tag appears in an unordered list
• So does this on*

1. This strong tag appears in an ordered list
2 So does this one




*




Рис. 45.1. При использовании контекс тно-зависимого тега
дополнительный стиль применяется тольк к тем тегам <strong>,
о
которые находятся внутри упоря точенного списка

С помощью контекстно-зависимых селекторов можно действовать действительно из-
бирательно. Скажем, вы хотите применить стиль только к тем тегам выделения, нахо-
дящимся внутри тегов абзацев, которые в свою очередь находятся внутри ячеек таб-
лицы, расположенных внутри элементов div:
div td p em {
font-weight: bold;
}
Как показано на рисунке 45.2, браузер следует инструкциям буквально.



Here is the regular content of the page. It doesn't appear inside a div A table follows:


but no paragraph in this celt
Emphasis,
but no paragraph in this cell
Emphasis,
This content appears insi»le a div element. A table
and a paragraph
Emphasis,
follows:


b a t s o paragraph m this cell
Emphasis,
4mphusts, but no paragraph in this celt




Puc. 45.2. Соберите вместе ряд из нескольких тегов для создания специфичного
контекстно-зависимого селектора. Этот стиль воздействует только на теги <ет>,
расположенные внутри тегов абзацев, внутри ячеек таблиц, внутри элементов di v
ГЛАВА 45. Изменение внешнего вида текстового элемента 235


Определение дочерних селекторов
Дочерний селектор — это селектор стиля, идентифицирующий все HTML-теги опре-
деленного типа, которые имеют в качестве своего непосредственного родителя тег
другогб типа, как, например, все абзацы, которые являются непосредственными до-
черними объектами ячеек таблицы. Если рассматриваемый тег не является прямым
дочерним объектом родительского тега, правило стиля не применяется.
Синтаксис данного типа селектора выглядит следующим образом:
родительский-тег > дочерний-тег
Разделяйте имена тегов с помощью знака «больше чем» (>). Следующее правило сти-
ля действует только в отношении абзацев, находящихся внутри ячеек таблицы:
td > р {
'font-weight: bold;


Как показано на рисунке 45.3, все остальные абзацы отображаются браузером невыде-
ленными.



Here is a paragraph, but its parent is the body tag, not a table cell. A table follows:


Here is s ome text. Its parent is a table cell, but it isn't a paragraph.


Here ii a paragraph. Its parent is a table cell.




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


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


т
Совет
Браузер Microsoft Internet Explorer некорректно обрабатывает пример,
показанный на рисунке 45.3, поэтому очень тщательно проверяйте
дочерние селекторы в Internet Explorer.


Здесь важна точная генеалогия тега. Чтобы дочерний селектор работал, рассматрива-
емый тег должен быть прямым дочерним объектом своего родителя. Таким образом,
правило стиля, подобное следующему примеру:
t d > em {
font-weight: bold;


не оказывает воздействия на следующий блок HTML-кода:
<td>
<p>This i s a paragraph with <em>emphasis</em>.</p> '
</td>
но работает корректно в данном случае:
<td>
This i s unformatted t e x t with <em>emphasis</em>.
</td>
Почему? В первом случае прямым дочерним объектом ячейки таблицы является тег
абзаца, а не тег выделения. Несомненно, ячейка таблицы является «дедом» тега выде-
ления, но в такой ситуации дочерний селектор не работает. Тег выделения должен
быть прямым дочерним объектом родительского тега, как во втором случае.
Чтобы воздействовать на все теги выделения внутри ячеек таблиц, независимо от точ-
ной генеалогии, воспользуйтесь вместо дочернего селектора контекстно-зависимым
селектором:
td em {
font-weight: bold;


Это правило стиля действует в обоих предыдущих случаях, поскольку в обоих этих
случаях тег выделения находится где-то внутри ячейки таблицы.
Вернемся к дочерним селекторам. Можно задавать полную генеалогию тега в качест-
ве селектора для получения действительно особенных результатов. Это правило сти-
ля выбирает только те теги выделения, которые являются дочерними объектами те-
гов <hl>, являющихся в свою очередь дочерними объектами ячеек таблицы:
td > hi > em {
font-weight: bold;
ГЛАВА 45. Изменение внешнего вида текстового элемента 237


Определение братских селекторов
Братский селектор — это селектор стиля, идентифицирующий HTML-теги опреде-
ленного типа, за которыми следует тег другого типа, но при этом идентифицируемые
теги не являются дочерними объектами этого тега. Рассмотрим тег абзаца, следую-
щий за заголовком первого уровня внутри ячейки таблицы. Абзац не является дочер-
ним объектом заголовка, поскольку тег абзаца не находится внутри тега заголовка.
Эти теги являются братскими, подобно брату и сестре. Их общий родитель — ячейка
таблицы, которая содержит оба эти тега:
<td>
<!— This t a b l e cell is t h e proud p a r e n t of t h e s e two children.
—>
<hl>I am t h e o l d e r sibling. I am way too serious for my own
good.</hl>
<p>I am t h e younger sibling. I always g e t my own way.</p>
</td>
Таким образом, для выбора всех абзацев, следующих за заголовками первого уровня,
используйте следующий синтаксис: ^
старший-брат + младший-брат
для правила стиля, которое выглядит подобно следующему примеру:
hi +р {
font-weight: bold;


Как показано на рисунке 45.4, абзацы, следующие за заголовками первого уровня,
отображаются полужирным шрифтом, тогда как к другим абзацам это выделение не
применяется.

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>