<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>


Welcome back, my friends, и the Show That Never Ends)




Puc. 42.3. В каскадных таблицах стилей дочерний элемент наследует
стиль своих родительских элементов. Браузеру не надо указывать
об отображении текста абзацев шрифтом Arial,
если в определении стиля для тега <body> уже задан шрифт Arial
ГЛАВА 42. Добавление каскадных таблиц стилей 219

Каскадная природа CSS (CSS — Cascading Style Sheets) означает, что определения сти-
лей дочерних элементов дополняют или уточняют стили родительских элементов.
В этой таблице стилей:
<style type="text/css">


body {
font-family: Arial;




P{
font-style: italic;



</style>
текст абзацев отображается курсивным шрифтом Arial, тогда как другие основные эле-
менты — например, теги h i — отображаются обычным шрифтом Arial. Заголовки пер-
вого уровня являются дочерними элементами тега <body>, как абзацы, а все дочерние
элементы тега <body> отображаются шрифтом Arial. Однако в этой таблице стилей
только дочерние элементы абзаца имеют дополнительное уточнение об отображении
курсивом, поэтом)' браузером это дополнительное определение стиля применяется к
тегам <р>, а остальные дочерние теги остаются без изменения. На рисунке 42.4 пока-
зан результат применения данной таблицы стилей.


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




This is a first-level header. It inherits
Arial from the body style, but it does not
display in italic.
This is a paragraph It inherits Anal from the body style, and it displays in italic because
of the additional paragraph style




Puc. 42.4. Используйте дополнительные определения стилей
для уточнения и рааиирения стилей, которые наследуются
дочерними элементами от своих родителей


Внедрение таблиц стилей
Чтобы внедрить таблицу стилей на HTML-страницу, расположите CSS-код между т и а-
ми стиля и поместите весь блок стиля внутрь раздела заголовка страницы, подо "но
следующему примеру:
<html> •. . • .• • -

<head>
<title>MoH HTML-CTpaHMD;a</title>
<style type="text/css">


body -{
font-family: Arial;


P(
font-style: italic;


</style>
</head>
<body>


<!—Содержимое страницы располагается здесь. —>
ГЛАВА 42. Добавление каскадных таблиц стилей 221

</body>
</html>
Встроенная таблица стилей действует в отношении всех элементов на той странице,
где она внедрена, и не действует на элементы других страниц, если только не вставить
таблицу стилей на другие страницы сайта.


Совет
Чтобы спрятать CSS-код от старых браузеров, не поддерживающих
каскадные таблицы стилей, можно поместить блок CSS-кода в теги
комментария (<!—, —>). Поместите открывающий тег комментария
сразу после открывающего тега s tyl е, а закрывающий тег коммен-
тария поместите непосредственно перед закрывающим тегом
s tyl e.




Цмпорт таблиц стилей
Чтобы не включать одинаковые таблицы стилей на каждой странице сайта, можно по-
местить таблицу стилей в отдельный файл, сохранить этот файл с расширением .ess,
а затем импортировать данную таблицу стилей на все страницы, где она нужна. При-
меняя такой способ, требуется только один раз написать таблицу стилей, и вам не на-
до будет копировать и вставлять один и тот же код. Если потребуется изменить стиль,
вам нужно будет лишь изменить его в одном месте — в CSS-файле. Если же вы внедря-
ете таблицу стилей, необходимо будет обновлять CSS-код на всех страницах сайта, где
эта таблица вставлена.
Чтобы импортировать внешний CSS-файл, пользуйтесь правилом ©import вместо
внедренной таблицы стилей:
<html>
<head>
<title>MoH HTML-CTparoma</title>
<style type="text/css">


©import u r l ( " s t y l e s / m y s t y l e s . e s s " ) ;


</style>
</head>
<body>


<!— Здесь располагается содержимое страницы. —>
Строим Web-сан ты
222



</body>
</html>
После правила ©import укажите адрес в Интернете таблицы стилей, используя для:»г >
го конструкцию u r l ("путь"). Путь может указываться относительно документа, кор-
невой папки или же может приводиться абсолютный путь, подобно пути для ссылки.
Можно импортировать несколько таблиц стилей:
<style t y p e = " t e x t / c s s " > •


©import url("styles/stylesOl.ess");
©import url("styles/stylesO2.ess");
©import url("styles/stylesO3.ess");


</style>
Если импортированные таблицы стилей требуется дополнить дополнительными, ха-
рактерными только для конкретной страницы, стилями, используйте следующий код:
<style type="text/css">


©import url("styles/stylesOl.ess");
©import url("styles/stylesO2.ess");
©import url("styles/stylesO3.ess");




color: #ffOOOO;



</style>
Если одна из импортированных таблиц стилей содержит стиль абзаца и необходимо,
чтобы браузер использовал вместо него стиль, специфический для данной страницы,
задайте стиль для страницы следующим образом:
<style type="text/css">


©import url("styles/stylesOl.ess"J
©import url("styles/styles02.ess"!
©import url("styles/stylesO3.ess"!
ГЛАВА 42. Добавление каскадных таблиц стилей 223

Р(
color: #ffOOOO;
!important;




</style>


Совет
Браузеры старых версий не понимают правило стиля @import, но
этот недостаток можно обратить в достоинство. Внедрите базовые
определения стилей в HTML-код страницы, а затем используйте
@import для внесения расширенных стилей, которые не работают в
старых браузерах. Только не маркируйте основные, внедренные сти-
ли объявлением ! important, иначе общие стили заменят усовер-
шенствованные версии, добавленные командой @import.

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



использование HTML-атрибута стиля
Написание таблицы стилей оправданно, когда имеется глобальный стиль, который
применяется ко всем элементам определенного типа. А когда существует одноразовый
стиль, который применяется к конкретному экземпляру элемента на странице и нигде
больше, имеет смысл поместить определение в атрибут стиля для тега элемента.
Скажем, вы хотите, чтобы определенный абзац отображался полужирным, красным
шрифтом, тогда как остальные абзацы должны отображаться шрифтом, который ис-
пользуется браузером по умолчанию. Вы не хотите создавать таблицу стилей для тега
абзаца, поскольку это приведет к изменению шрифта всех абзацев на полужирный,
красный шрифт. Эта задача решается с помощью следующего кода:
<p>This i s a normal paragraph, n e i t h e r bold nor red.</p>


<p>This is another normal paragraph, neither bold nor red.</p>


<p style="font-weght: bold; color: #FF0000;"">This is a special
paragraph, both bold and red.</p>


<p>Back to normal paragraph style here, neither bold nor red.</p>
224 Строим Web-сайты

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



Совет
Обратите внимание, что определение внутри атрибута стиля соответ-
ствует правилам написания каскадных таблиц стилей, даже если в
окружающем коде соблюдаются синтаксические правила HTML




Fe
U

Ibis is a normal paragraph, neither bold nor red

This is another normal paragraph, neither bold nor red

This « з special paragraph, both bold imti led.

Back to normal paragraph style here, neither bold nor red




Puc. 42.5: Пдмещайте CSS-определение внутрь атрибута
стиля HTML-тега, чтобы создать стиль
одноразового употребления для этого тега
ГЛАВА 43.
Замена тегов форматирования
каскадными таблицами стилей
Теги форматирования — это HTML-теги, которые в явном виде задают шрифтовые
эффекты, такие, как полужирное начертание, подчеркивание и курсив. В отличие от
элементов фразы, теги форматирования не определяют структуру размечаемого текс-
та. Они просто показывают, что определенная строка текста должна отображаться по-
лужирным шрифтом, курсивом или с подчеркиванием.
К тегам форматирования относятся: b (для полужирного шрифта), i (для курсива), и
(для подчеркивания) и s, или s t r i k e , (для перечеркивания). На рисунке 43.1 пока-
зано действие этих тегов.



"Yes," he said boldly "By all means, use italics Ibev.look classier than underlines
Otherwise, ГЦ just otiike tluuugli your copy and make you do it again"




Рис. 43.1. В этом абзаце используются теги форматирования
для получения полужирного начертания, курсива,
подчеркивания и перечеркивания



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




8-191
Строим Web-сайты
226


Совет
Избегайте использования подчеркивания, независимо от способа
его реализации. Подчеркивание практически всегда указывает на ги-
перссылки. Если на странице подчеркивается текст, не являющийся
ссылкой, посетители сайта будут пытаться щелкнуть на этом тексте,
полагая, что это ссылка. Если вы выделили подчеркнутый текст дру-
гим цветом, возможно, вам придется просить посетителей направ-
лять свои электронные сообщения, полные возмущений, Web-масте-
ру. Лучше полностью исключить подчеркивания текста, не являюще-
гося ссылками, и использовать для выделения текста курсив вместо
подчеркивания.


Поскольку теги форматирования ничего не должны делать со структурой, и т.к. счита-
ется, что HTML должен быть языком разметки только структуры, форматирование с
помощью этих тегов теперь считается ошибкой разметки. Вместо этого следует при-
менять определения стилей в каскадных таблицах стилей так, как это описано в
инструментарии данной главы.
Скопируйте эти определения в таблицу стилей своего сайта или поместите их между
тегами стиля в разделе заголовка HTML-файла. Затем, чтобы отформатировать часть
текста с помощью этих определений, используйте тег <span>, действие которого по-
казано на рисунке. 43.2. Поместите имя стиля, который хотите использовать, в атри-
бут класса.


Инструментарий Определения стилей с помощью каскадных таблиц стилей
для замены тегов форматирования
В данном инструментарии приводится четыре определения сти-
лей CSS с целью замены HTML-тегов форматирования для полу-
жирного шрифта, курсива, подчеркивания и перечеркивания,
•Ь {
font-weight:.bold;


•i {
font-style: italic;


•u{
text-decoration: underline;


..s {
text-decoration: line-through;
ГЛАВА 43. Замена тегов форматирования каскадными таблицами стилей 227


Ne ?dit wew Favorites Tools Help


This style gives you bold text.

This style gives you italic text.

This style gives you underlined text.

This style gives you iuiX-Llluuugli text.




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

Листинг 43.1. Исходный код страницы, вид которой
в браузере показан на рисунке 43.2
<p>This style gives you <span class="b">bold</span> text.</p>


<p>This style gives you <span class="i">italic</span> text.</p>


<p>This style gives you <span class="u">underlined</span> text.</p>


<p>This style gives you <span class="s">strikethrough</span>
text.</p>



Совет
Сокращенные имена классов стилей — b, i, u, s — образованы от
имен соответствующих тегов форматирования с тем, чтобы облег-
чить Web-дизайнерам старой школы переход на использование кас-
кадных таблиц стилей. Если предпочтение отдается более содержа-
тельным именам, скажем bold или italic, ничто не мешает поступить в
соответствии со своими предпочтениями. Проверьте, чтобы в атри-
бутах классов для тегов <span> приводились измененные имена
классов.
ГЛАВА44.
Создание специальных стилей
форматирования
В качестве предпочтительных элементов, какими являются HTML-теги форматирова-
ния в определенных кругах Web-дизайнеров, эти теги достаточно ограничены. Они
предоставляют лишь основные виды форматирования: полужирное начертание, кур-
сив, подчеркивание и перечеркивание.
В главе 43 описывается, как сымитировать эффекты HTML-тегов форматирования с
помощью простой таблицы стилей. Каскадные таблицы стилей открывают дорогу ко
многим другим возможностям форматирования, перечисляемым в таблице 44.1.

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>