Web дизайн\Учебник по HTML

Глава 10. Добавьте оригинальности: таблицы стилей, шрифты и специальные символы

• Таблицы стилей: теория
  • Что такое "таблица стилей"
  • Для чего нужны таблицы стилей
  • CSS и XHTML
• Что заменили собой таблицы стилей
• Создание таблиц стилей
  • Атрибут style
  • Элемент <style>
  • Создание специальных классов
  • Элемент <span>
  • Элемент <div>
  • Связывание или внедрение?
• Свойства и стили
  • Текстовые стили
  • Свойства шрифтов
  • Фон и цвет
  • Расположение и вид блоков
  • Стили ссылок и объектов
  • Первая буква, первая строка
  • Специфические табличные стили
• Специальные символы
• Резюме

HTML является программно-независимым языком описания гипертекстовых документов. Веб-страницы, написанные на нем (строго говоря, на XHTML), должны отображаться без существенных искажений как на браузерах, встроенных в сотовые телефоны и КПК, так и на обычных графических браузерах полноценных компьютеров. Как уже говорилось ранее, это достигается путем разделения двух разнородных концепций создания страницы, а именно содержания и формы, визуального оформления. В этой главе обсуждаются вопросы создания стилей с помощью отдельных инструментов, а также переходные возможности стилизации, когда часть работы выполняется на HTML, часть — с помощью таблиц стилей. Итак, то, о чем вы сможете узнать из этой главы, — это:

• основы создания таблиц стилей, включая стоящую за ними теорию;
• блоки, используемые при построении таблиц стилей, включая как <style>, <span> и <div>, так и обсуждение различий между связыванием и внедрением таблиц;
• создание классов и добавление внутренних атрибутов обычных элементов HTML;
• какого рода стили и свойства определяются с помощью таблиц стилей;
• специальные символы и веб-документы.

Таблицы стилей: теория

Ранние версии HTML мало чего позволяли делать с оформлением страниц. В начале 90-х годов большинство веб-сайтов выглядело довольно примитивно. В основном использовался шрифт Times или подобный, а также моноширинный шрифт, плюс имелись все базовые элементы: заголовки, списки, элементы для вставки изображений и гиперссылок. Однако популярность Web, как известно, с тех пор резко возросла, Сеть стала коммерческой средой передачи информации. И дизайнеры начали заполнять пространство Интернета своими разработками. И превратились в веб-дизайнеров. А значит, крупные компании-производители браузеров (такие как Netscape и Microsoft) обязаны были предоставить им определенный инструментарий. Так появились новые элементы, увеличившие возможности более гибкой работы при оформлении веб-страниц. Среди этих элементов были <center>,
<font> и еще один, вначале вызвавший интерес, а затем попавший в раздел вредных элементов, — элемент <blink>.

Несмотря на то что некоторые из этих элементов были включены в спецификацию (в частности, в стандарт HTML 3.2), гуру от веб-дизайна резко осудили их введение. Эти элементы, по их мнению, привели к появлению страниц, ориентированных исключительно на внешний вид и не несущих никакой информации. Кроме того, в кодах появились такие, например, строки:

 <font face="Arial. Helvetica" size="+2">добpo
 пожаловать на мой сайт</font><bг />

Казалось бы, ничего ужасного нет. Однако те браузеры, которые не умеют обрабатывать элемент <font> (приходят на ум все те же КПК), не только игнорируют его, но и не выделяют заключенный в него текст как заголовок. Если же используется элемент <hl>, то как графические, так и неграфические браузеры могут выделить текст так, чтобы стало понятно, что это заголовок.

ПРИМЕЧАНИЕ

Что я имею в виду под «неграфическими браузерами»? Это такие браузеры, которые не умеют отображать различные шрифты или хотя бы размеры шрифтов, а часто ничего не знают и об изображениях. Они могут быть встроены в карманные компьютеры, сотовые телефоны и тому подобные устройства. Эти браузеры не распознают элементы типа <font>, но могут различать <hl> и <h2>.

Что такое «таблица стилей»

Хотя элементы типа <font> были (и есть) весьма популярны и использовались в графических браузерах очень часто, они игнорировались многими браузерами. В лучшем случае это приводило просто к тому, что искажался заданный стиль, в худшем — могли привести к некоторым проблемам. Поэтому потребовалось решение. Им явилось создание таблицы стилей, которое позволило веб-дизайнерам использовать элементы Strict XHTML и при этом иметь возможность создавать такие стили:

<h1 style="font-family: Arial.Helvetica">Добpo пожаловать на сайт</h1>

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

Теория, стоящая за таблицами стилей, такова: применение таблиц стилей основано на принципе разделения информативной и оформительской частей работы над веб-страницами. Именно это требуется при использовании Strict XHTML, старые теги можно использовать только в том случае, если вы применяете спецификацию Transitional XHTML.

Для чего нужны таблицы стилей

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

Отделение стилевых элементов от организационных решает еще один вопрос HTML: удобство восприятия кода. Представьте себе вот такую строку:

 <p><font face="Arial. Helvetica, San Serif" size="+2" 
соlог="green">Спасибо за визит. 
Пожалуйста, зарегистрируйтесь в  гостевой книге 
и оставьте свои замечания/предложения.</ font></p> 

Я не хочу сказать, что это совсем невозможно читать, но существует способ сделать код более прозрачным. Для этого нужно в таблице стилей определить значение элемента <р>, указав определенный шрифт, размер и цвет:

<style>
р (font-family: Arial. Helvetica. San Serif; font-size: 16 pt;
 color: green }
</style>

Теперь в теле документа для получения ровно того же результата вы пишете:

<р>Спасибо за визит. Пожалуйста, зарегистрируйтесь в гостевой
книге и оставьте свои замечания/предложения. </р>

В случае, если на вашем сайте используется именно такое оформление текста в абзацах, то ничего, кроме набора этого текста внутри тегов <р>, </р>, вам делать и не придется. А если потребуется изменить стиль, это делается в таблице стилей, что существенно сокращает время на написание кода. Как видите, этот инструмент минимизирует затраты вашего времени и придает веб-страницам единообразный вид.

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

CSS и XHTML

Таблицы стилей, как и язык HTML (точнее, XHTML) имеет несколько спецификаций. Мы будем пользоваться стандартом CSS2 (CascadingStyle Sheets 2). Он наиболее часто применяется в веб-публикациях, и на данный момент с ним могут работать практически все современные графические браузеры. (Некоторые распознают только CSS1, но не так уже много изменений было сделано в новом стандарте CSS2.)

Подход к разработке веб-страниц с использованием CSS ясен и понятен. Спецификация включает в себя ряд свойств, каждое из которых принимает ряд значений. Эти свойства являются частью стилевого атрибута данного элемента XHTML. Применяется этот стиль уже браузером, если он, конечно, на это способен. Вот несколько примеров:

<h1 Style="font-family: Arial. Helvetica. San Serif">
Рестораны нашего города</h1>
<p style="font-size: 12 рt">Добро пожаловать на наш сайт.
Вы узнаете много нового о ресторанах и меню,
которые они предлагают.</р>

Использование таблиц стилей не является жизненной необходимостью при написании XHTML-документов. Можно обойтись без этого уровня форматирования. Но даже если вы и решили форматировать каким-то образом свою страницу, то техническим решением может быть не обязательно применение CSS. Можно использовать иную спецификацию таблиц стилей, указав это в секции <head>. Большинство веб-браузеров распознает все-таки CSS, а не что-то другое, значит, это, видимо, лучший выбор.

Таблицы стилей поддерживаются браузерами со времен появления Netscape серии 4.0 и соответствующих приложений Microsoft. Начиная с этого уровня ПО вы можете почти со стопроцентной гарантией использовать форматирование на основе таблиц стилей, а элементы <blink> и <font> отложить до лучших времен.

Если вы хотите найти какие-либо существенные различия между CSS1 и CSS2, можете успокоиться. Различия почти что незаметны. В реальности CSS2 просто базируется на стандарте CSS1, вот и все. Добавлены такие исключительно специфические вещи, как стилевые элементы неграфического (речевого, в частности) представления веб-страниц, а также таблиц, некоторые инструменты для интернационализации и т. п. Это все обсуждается в последующих главах. Например, все, что касается организации неграфического представления на основе CSS, описывается в главе 14, а позиционирование с помощью таблиц стилей — в главе 19.

Что заменили собой таблицы стилей

Прежде чем мы углубимся в вопросы, связанные с таблицами стилей, давайте вернемся назад и посмотрим на элементы и атрибуты, оставшиеся в том далеком прошлом, когда еще на свет не появились CSS. Многие страницы и до сих пор продолжают использовать все тот же элемент <font> наряду с некоторыми атрибутами, которые официально считаются принадлежностью XHTML 1.0 (а в некоторых случаях HTML 4.01 — стандарта, который предшествовал ему).

Элемент <font> может иметь ряд атрибутов, включая face, size и color. Он является контейнером и относится только к тексту, который помещен внутрь него. Например:

 <font face="Arial. Helvetica" size="+2">Добро
пожаловать на мой caйт</font>

В атрибуте face указывается список названий семейств шрифтов. Если первый шрифт не установлен у пользователя, используется следующий по списку и т. д. Чтобы использовать шрифт, заданный в браузере по умолчанию, можно указать в качестве значения face "Sans Serif" или "Serif". Атрибут size может принимать значения от 1 до 7; кроме того, можно заставить элемент font отображать шрифт, который на определенное число позиций больше или меньше текущего. (Например, size="2" сделает шрифт «на два размера» меньше.) Атрибут color задает цвет. Его значениями могут быть как названия (red, green, bl ue, aqua, yellow...), так и шестнадцатеричные значения (это обсуждается в параграфе «Фон и цвет» далее в этой главе).

Контейнер <center> позволяет разместить по центру страницы практически любой элемент, включенный в него: текст, изображение, гиперссылку и т. д. Даже мультимедиа-вставки. <center> можно заменить на элемент <div>, речь о котором пойдет далее.

Еще одним популярным в прошлом контейнером является <blink>. Он заставляет текст, включенный в него, мигать. Кроме того, можно упомянуть контейнеры <s>, или <strike> (делает текст перечеркнутым), и <u> (выделяет текст подчеркиванием).

Как уже говорилось в предыдущих параграфах, многие из изученных нами элементов могут иметь атрибут align. Вернее, могли. В старых спецификациях HTML это было возможно. XHTML Strict ничего про align не знает и знать не хочет. Да и зачем, если есть CSS, в которых совершенно без проблем можно организовать любой тип выравнивания без использования в веб-документе атрибута align? Та же участь постигла атрибут bgcolor, задающий цвет фона.

Создание таблиц стилей

Теперь мы уже кое-что рассказали о том, что собой представляют CSS в теории. Пора переходить к практике. Сделаем небольшой обзор различных методов, которыми следует пользоваться при реализации таблиц стилей.

Атрибут стиля. Применяя стилевые атрибуты различных элементов и контейнеров XHTML, можно присваивать им определенные характеристики.

• Определение стиля элемента. С помощью таблиц стилей можно определять элементы (например, такие, как <р>, <blockquote>, <h3> и т. д.). Что это дает? Эти элементы не теряют своей индивидуальности на протяжении всей вебстраницы или даже сайта. Если вы хотите, чтобы все абзацы были выполнены в едином стиле, то нет ничего проще, чем применить определение стиля элемента.
• Определение классов элементов. Наконец, можно создавать собственные классы элементов, указывая их состав. Например, определив один раз, что <р> будет отображать текст красным цветом, затем при создании страницы можно сослаться на определение этого класса.

Все эти возможности открыты перед вами. Теперь следует задуматься над тем, как именно реализовывать таблицы стилей. Существуют два пути. Первый: можно включать информацию о стилях внутрь веб-страницы (определяя их либо в секции <head>, либо внутри каждого конкретного элемента). Второй: можно просто связать страницу с отдельным файлом, в котором содержатся исключительно определения стилей. При этом одна и та же таблица стилей может использоваться неограниченное число раз. Обе возможности мы обсудим далее.

Атрибут style

Начнем с самого простого: обсудим, каким образом можно включать стили в веб-документ. Для этого понадобится атрибут style. С его помощью можно сообщить практически любому элементу XHTML: «Эй, приятель! Я собираюсь применить к тебе такой-то стиль. Слушай мою команду!» И элементы будут слушаться.

Вы уже видели атрибут sty I e включенным в элементы <р> и <hl>. Конечно же, этими двумя элементами область применения стилевого атрибута не исчерпывается. В следующем примере сделан маленький фокус: у гиперссылки украдено подчеркивание.

<а href ="index.html" style="text-decoration":
nonе">Щелкните здесь!
Онлайновый магазин на расстоянии одного 
щелчка мышкой!</а>

Или вот пример того, как можно изменить цвет фона выбранной ячейки таблицы:

 <table>
<tr><td style="background: yellow">100</td><td>200</td>
<td style="background: red">300</td></tr>
</table>

Получилась разноцветная таблица.

Если хотите задать сразу несколько свойств, разделяйте их точкой с запятой:

 <р style="align: right: font-style: Italic: font-weight: bold:
background: yellow">XM... жирный, наклонный шрифт
 на желтом фоне? Оригинально....</р>

Итак, если вам захотелось изменить стиль парочки элементов страницы, проще всего это сделать, включив атрибут style в их определения. Однако это не есть определение стиля элемента вообще. Для указанного действия служит элемент <style>.

Элемент <style>

Атрибут style применяется лишь тогда, когда нужно изменить свойства одного-двух конкретных элементов, расположенных в конкретном месте страницы. Это, в общем-то, не очень серьезное изменение стиля. Если вам действительно хочется создать нечто единообразное, обратите внимание на элемент <style>. Именно с его помощью в страницу включается таблица стилей. А сам он при этом должен быть расположен в секции <head>. Формат следующий:

<head><style type="text/css">
р {font-style: italic}
</style>
<style type="text/css">
ЭЛЕМЕНТ {свойство: значение}
</style>
</head>

Ну вот видите, как все просто? Например, вы хотите оформить все абзацы на своей странице капителями. Для этого вам потребуется написать следующий код в разделе <head>:

 <style type="text/css"> р {font-style: small-caps} </style>

Выбранный элемент (в данном случае <р>) в терминах CSS называется селектором, а все, что располагается между фигурными скобками, — определением. Все вместе называется правилом.

Селекторы вам уже должны быть знакомы: это те буквы, из которых состоят определения элементов XHTML: p, h1, ul и т. д. При создании правила вы сопоставляете выбранному элементу определение стиля. Например:

 ul {list-style: disc}

Элемент <style> может содержать и несколько правил. Каждое из них оканчивается закрывающей скобкой, поэтому даже на одной строке вы можете разместить более одного правила. Но это не лучший стиль программирования. Во всяком случае, я бы порекомендовал делать так:

<style type="text/css">
p {font-style: small-caps}
h1 {color: blue} 
ul {list-type: disc} 
</style>

Далее, каждое определение может включать в себя несколько свойств. Они отделяются друг от друга точкой с запятой, но, опять же, для улучшения читабельности кода я бы посоветовал выносить каждое из них в отдельную строку:

<style type="text/css">
р{ font-style: small-caps:
background: yellow;
padding-left: 12 px
 } </style>

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

Хочу заметить, что одно и то же определение можно применить сразу к нескольким элементам. Для этого надо написать несколько селекторов подряд, разделяя их запятыми. Например:

 <style type="text/css">
p, hi. h2. h3. blockquote, ul. ol (font-family: Arial. Helvetica}
</style>

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

Наконец, еще один аспект. Недаром ведь CSS содержит слово «Cascading» (каскадный). Наверное, таблицы стилей обладают неким свойством, напоминающим наследование. Например, если какой-либо стиль присвоен элементу <table>, то входящие в него элементы (то есть строки и ячейки) будут иметь именно этот стиль. Это, с одной стороны, естественно, с другой стороны, не так уж и очевидно с технической точки зрения. То же самое правило касается, например, элемента <body>, и вообще всех элементов, внутри которых есть другие. Действие стиля распространяется на них без ограничений (до тех пор, пока не встретится другой стиль). Например, следующее определение (задано семейство шрифтов Arial, Helvetica) действует на все тело страницы, но не применяется к маркированному списку (ul), поскольку для него задан свой стиль (шрифт Times или Times New Roman):

<style>
body (font-family: Arial. Helvetica: font-size: 12 pt }
ul {font-family: Times New Roman. Times } 
</style>

Создание специальных классов

Таблицы стилей позволяют не только задавать свойства отдельных элементов, но и создавать целые классы. В сущности, эти классы позволяют варьировать характеристики элементов! Познакомьтесь со следующим примером:

<head>
<style>
hl.krasota (color: red}
</style>
</head>
<body>
<h1>Обычный такой заголовок</h1>
<h1 class="krasota">Heoбычный такой, красный заголовок</h1>
</body>

В данном примере мы используем селектор hl.krasota вместо обычного h1. Указанный стиль будет применяться к hi только там, где вы укажете атрибут class. Такой подход применяется очень широко. Замечательным образом можно определять разные классы для одного и того же элемента. В результате мы получили изящный код:

<style>
p.body { font-family: Arial. Helvetica: font-size: 15 pt }
p.footnote
 { font-family: Times New Roman. Times: font-size: 13 pt }
</style>

Теперь, меняя в теле страницы значение атрибута class, вы измените внешний вид элемента <р> в соответствии с определенным выше стилем.

Мы можем создать универсальный класс. Его можно в теле страницы привязать к любому элементу, и он будет использовать указанный стиль. Например:

 <style>
 .small { font-family: Arial. Helvetica: font-size: 15 pt }
</style>

Теперь пишите на странице что хотите, только успевайте указывать значение cl ass: <ul class="small"> или вот <blockquote class="small "> и т. д.

Элемент <span>

При работе с таблицами стилей вам понадобится еще один новый элемент — <span>. Используя его, можно применять стиль вообще к чему угодно. Иначе говоря, <span> — это такой контейнер, в котором определяется стиль и который действует вплоть до своего закрывающего тега. Примерно так:

<span style="font-variant: small-caps"> Так себе текстик, 
но зато как оформлен! </span>

ПРИМЕЧАНИЕ

Есть, конечно, одно «но»: элемент <span> имеет такую же область действия, как <ет> (то есть является внутристрочным). Поэтому в него нельзя включать изображения, мультимедиа и т. п. Если вам нужно применить стиль к большому отрезку страницы, используйте элемент <div> (его обсуждение еще впереди).

Поскольку, как уже говорилось, стиль можно определять практически для любого элемента, <span> тоже не является исключением.

 <style>
span { font-family: Arial, Helvetica: font-size: 12 pt }
</style>

Теперь <span> можно использовать в качестве специфического элемента, к которому можно применить определенное форматирование. Например:

<р><span>Скоро: Что-то интересненькое!</sраn></р>

Но даже это — не самое замечательное применение элемента <span>, поскольку при таком подходе вы ограничены одним-единственным определением стиля. Что же еще можно придумать? Ответ прост: создать класс на основе <span>!

<head>
<title>Буквицы и капители</title>
<style>
span.dropcap 
{font-family: Times New Roman.
Times: font-size: 28 pt: float}
span, small caps
{font: Arial. Helvetica: font-variant: small-caps }
</style>
</head>

С помощью этих правил можно использовать элемент <span> с атрибутом class. Например:

<p><span class="dropcap">3</span><span 
class="smallcaps">TO было темным, дождливым вечером.</span>
Тучи неслись с огромной скоростью, одна норовила догнать другую. 
Изредка   небо прорезали яркие молнии.</р>

Теперь осталось лишь совместить описание классов и их реализацию и увидеть в браузере нечто подобное изображенному на рис. 10.1.

Рис. 10.1. Здесь вы видите элемент <span> в действии, вид текста изменяется с помощью созданных вами универсальных классов стилей

Что еще можно делать с элементом <span>? Можно использовать его с определенными заранее независимыми классами:

 <style>
 .dropcap {font- family: Times New Roman. 
Times: font-size: 24pt: text-align: top}
</style>

Теперь, написав <span class="dropcap">, можно применить указанный стиль к заключенному в этот контейнер тексту. Точно так же универсальные классы можно применять и в любых других контейнерах.

Элемент <div>

Рассмотрим еще один элемент, который имеет отношение к стилям. Он называется <div> (сокращение от «division», что означает «разделение») и применяется для разделения всего веб-документа на секции. Это, разумеется, контейнер, он может содержать практически любые элементы, а к ним может быть применено практически любое форматирование. <div> можно рассматривать как некоторый пользовательский элемент, по своей значимости и области действия он сопоставим с <body> или <head>. (В спецификациях он называется элементом блокового уровня, это означает, что браузер автоматически оставляет вокруг него пустое пространство, как вокруг <р> или <blockquote>.)

Элемент <div> может использоваться примерно так же, как <span>. Для него могут быть определены правила таблиц стилей, он может иметь атрибут cl ass.

Пример:

<h1>Kaк пообедать вне дома</h1>
<div style="background-color: yellow">
<р>Вот некоторые советы на тему того, 
как хорошо пообедать вне своего дома:</р>
<ul>
<li>3аранее обзвоните рестораны, чтобы узнать,
можно ли еще зарезервировать столик. </li>
<li>Если вы собираетесь идти вшестером или большей компанией,
сделайте специальный заказ: например, в тихом уголке,
банкетном зале или возле окна с хорошим видом. </li>
<li>Если позвоните достаточно рано (хотя бы до начала 
обеденного времени), возможно, вам удастся получить
краткую информацию о том. что представляет собой данный
ресторан и какие блюда и вина являются его гордостью.
</li>
<li>Узнайте, может ли ресторан предложить вегетарианские, 
 кошерные, диабетические или другие специфические блюда, 
особенно если вы не знакомы со всеми своими гостями, 
приглашенными к обеду. </li>
<li>Продумайте заранее, какие еще специфические требования 
должны быть удовлетворены.
Например, возможно ли комфортное размещение людей
на инвалидных колясках. </li>
<li>0сторожно передайте свою кредитную карточку старшему
официанту или сообщите ему о том, что вы собираетесь 
расплачиваться чеком. Это предотвратит возможные 
недоразумения в конце обеда. </li>
<li>Следует дать на чай всему персоналу, обслуживающему вас,
особенно если вы стоите в ожидании освобождения столика. </li>
</ul>
</div> 

Как видно из приведенного листинга и из рис. 10.2, элемент <div> может включать в себя совершенно разные типы контейнеров, например, такие, как <р> и <ul >. Именно для этого он и предназначен — для искусственного разделения страницы на секции, выполненные в едином стиле.

Рис. 10.2. Элемент <div> позволяет применять один стиль к нескольким элементам

СОВЕТ

<div> может иметь даже такой атрибут, как align, который распознается большинством браузеров, даже если они ориентированы на поддержку таблиц стилей. Например, <div align="center">...</div> разместит все, что находится между открывающим и закрывающим тегом контейнера, — будь то текст, гиперссылки, изображения, мультимедиа — посередине веб-страницы. Такой подход более предпочтителен по сравнению с использованием элемента <center>, ибо последний не входит в рекомендации по стандарту XHTML.

Как и с другими элементами (включая <span>) элемент <div> может использовать правила таблиц стилей.

Связывание или внедрение?

Рассмотрим еще один вопрос, который нам нужно обсудить перед тем, как мы пойдем далее. Оказывается, существует два различных метода определения таблиц стилей. Вы уже видели много примеров одного из подходов: внедрение с помощью контейнера <style>, включенного в заголовок документа. Он обычно применяется тогда, когда таблица стилей распространяет свое действие только на ту страницу, в которую она включена.

Конечно, далеко не все разрабатывают веб-сайты именно таким образом. Довольно часто дизайнеры работают как раз над тем, чтобы как можно больше страниц (а то и все) были оформлены в одном стиле. Внедрять одну и ту же таблицу много раз, согласитесь, неудобно, да и глупо. Гораздо разумнее было бы иметь некую универсальную таблицу и связывать с ней все необходимые страницы.

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

Конечно, даже если у вас имеется предопределенный стиль, вы всегда можете обойти его, используя <span>, <div> или атрибут style внутри иного нужного элемента.

Итак, каким образом можно связать страницу с таблицей стилей? Во-первых, для этого нужно создать отдельный документ, в котором вы будете описывать только стили. Там не должно быть ничего, что напрямую отображается в браузере. Только правила таблиц стилей. Этот документ имеет смысл сохранить для дальнейшего использования с расширением .css, например styles.css. Внутри него можно использовать специальные теги для вставки комментариев. Они выглядят несколько специфически: /* и */. Любой текст, заключенный между ними, игнорируется. Вот небольшой пример таблицы стилей:

 /* Начало описания правил для заголовков */ hi {
font-family: Arial. Helvetica:
font-size: 24pt:
font-weight: bold:
word-spacing: 2pt; 
}

Теперь нужно подключить этот файл к веб-документу. Для этого существует элемент <link />, который должен быть помещен в заголовок (между <head> и </ head>).

 <head>
<titlе>Главная страница</titlе>
<link rel="stylesheet" href=
"http://www.fakecorp.com/styles.css"  />
</head>

He забудьте, что вместо полного может использоваться сокращенный URL, но он будет варьироваться в зависимости от того, где в файловой иерархии располагается веб-документ относительно файла таблиц стилей. Однако можно вспомнить и о том, что существует элемент <base>, его никто не отменял. В главе 7 описывалось, как им пользоваться.

ПРИМЕЧАНИЕ

Если вы хотите узнать чуть больше о связанных таблицах стилей, а также получить примеры готовых правил, зайдите на http://www.w3.org/StyleSheets/Core. Любая веб-страница может содержать ссылку (<link />) на таблицу стилей, созданную W3C, и это вполне нормально. Тем самым вы можете выбрать наиболее понравившийся вам стиль и связать с ним свой документ.

Свойства и стили

Теперь вы знаете, что такое таблицы стилей, как они создаются, связываются с вебстраницами или внедряются в них. Рассмотрим, какие именно стили и свойства включены в спецификации CSS1 и CSS2. Обо всех возможностях, предлагаемых стандартом CSS1, можно узнать на сайте http://www.zvon.org/xxl/csslReference/ Output/index.html. Там же вы найдете ссылки на хорошие описания CSS2. Официальный вариант спецификации CSS2 располагается на сайте http://www.w3.org/TR/
css2/.

В следующих параграфах мы еще будем возвращаться к некоторым вопросам стилей, связанных с оформлением текста, фона, ссылок, границ, полей и отступов.

Текстовые стили

Текстовые стили (в терминологии CSS) определяют, каким образом отображать и позиционировать текст. Они могут использоваться также и с внутри-строчными изображениями. В таблице 10.1 показаны некоторые из этих стилей.

Таблица 10.1. Свойства текстовых стилей

Свойства word-spacing, letter-spacing, line-height и text-indent принимают числовые значения, означающие длину чего-либо. Указывается число и единица измерения. Вот пример создания разреженного шрифта:

 p.wide { letter-spacing: 2pt }

При создании правил CSS используется число и буквенное обозначение единиц измерения (без пробелов между ними). Число может быть как положительным, так и отрицательным. В качестве единиц измерения могут выступать: пикселы (рх), дюймы (in), миллиметры (mm), сантиметры (cm), пункты (pt), высота текущего шрифта (em) и высота буквы «х» текущего шрифта (ех).

text-decoration изменяет оформление шрифта и может принимать только те значения, которые приведены в табл. 10.1. Возможно также значение nonе.

vertical-align и text-align дают веб-дизайнеру возможность управлять расположением текста в документе по вертикали и горизонтали. Вертикальное расположение имеет смысл изменять, когда текст находится внутри какого-то элемента. Например, такое определение задает класс элемента <ет>, который может использоваться как верхний индекс:

 em.super { vertical-align: super }

Если этот стиль применить к обычному тексту абзаца, то он действительно будет выглядеть, как верхний индекс:

 <р> Хаос лиц, и не видно тропы <br />
в Вифлеем из-за снежной крупы.<em class="super">
И. Бродский. Январь 1972</ет></р>

Свойства шрифтов

Хотя элемент <font> и оказался как бы на задворках современных технологий веб-публикаций, это не означает, что вся Сеть осталась без возможности разнообразить шрифты и вид абзацев. Можно задавать все те же самые свойства (семейство шрифтов, размер, выделение, цвет и т. п.) с помощью правил таблиц стилей. В частности, здесь необходимо вспомнить о наследовании. Можно определить свойства для <body>, затем отменить их для определенных элементов, входящих в этот контейнер. В таблице 10.2 приведены некоторые свойства, которые можно устанавливать для шрифтов. Там же приведены и небольшие примеры.

Рассмотрим то, что описано в таблице.

Таблица 10.2. Свойства шрифтов

В элементе font-famlу задается название семейства шрифтов. Нужно указывать как можно более общее название, чтобы система пользователя смогла узнать в нем хоть что-нибудь из того, что установлено (например, Helvetica или Courier). Избегайте применения точных названий типа «Helvetica Oblique» или «Courier Heavy 12».

На самом деле, font-family позволяет варьировать значения в зависимости от системы, установленной у пользователя:

 <style type="text/css">
p.standard {font-family: Helvetica, Arial, Sans Serif}
</style>

ПРИМЕЧАНИЕ

Когда название семейства шрифтов используется в определении правила таблицы стилей, оно все целиком должно быть заключено в двойные кавычки: "Century Gothic". Если же оно указывается в атрибуте style, то нужны одинарные кавычки, поскольку style сам по себе требует двойных кавычек: style="font-family: 'Century Gothic', serif".

Свойство font-family может иметь одно из общих значений: serif, cursive, fantasy и mono-space. Применяя их, вы с некоторой долей уверенности сможете предсказать, что появится в окне браузера.

font-size может указываться в процентах, пунктах или иметь относительные значения, такие как larger или smaller. Свойство font-weight связано со степенью «жирности» шрифта. Значения могут быть относительные (bolder, Iighter) либо абсолютные — от 100 до 900 (нормальный шрифт соответствует числу 400). font-style может определять степень наклона. Возможные значения: oblique, italic и normal.

Что касается свойства font- van' ant, то оно используется только лишь для того, чтобы переключаться с обычного шрифта (normal) на капители (smalI -caps).

Особо примечательно свойство font. Оно, в принципе, может заменить собой все четыре вышеприведенных, может принимать любые значения любых других свойств шрифтов... Проблема, как всегда, заключается в том, что разные браузеры отображают его по-разному. Именно из-за этого советую определять свойства все-таки по отдельности.

Фон и цвет

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

Свойства фона обычно указываются в теге <body> (в этом случае они действуют на весь документ), но никто не мешает сделать это же для любых элементов XHTML, начиная от внутристрочных (<em>, <span>) и заканчивая блоковыми (<р>, <hl>). Можно задать «подсветку» вокруг отдельных слов или определить цвет фона целого абзаца, списка и т. п.

В таблице 10.3 приведены всевозможные свойства фона.

Таблица 10.3. Свойства фона

Возможные значения цветов таковы: black, red, maroon, white, green, olive, lime, aqua, teal, blue, navy, yellow, brown, gray, silver, orange, purple и fuchsia. Если вы предпочитаете использовать для задания цвета формат RGB, то это можно сделать двумя способами: указать шестнадцатеричное значение (например, #OFOFOF) или задать соотношение в десятичной системе счисления: "color: rgb(254,255.0)".

ПРИМЕЧАНИЕ

Шестнадцатеричная система счисления отличается от десятичной тем, что имеет основание 16, вместо 10. То есть единицы считаются до 16, потом десятки — аналогично и т. д. Поскольку арабских цифр в нашем распоряжении только 10 штук, то к ним добавлено еще 6 букв от А до F, представляющих собой значения от 10 до 15. Как узнать десятичное значение шестнадцатеричного числа FF? Оно равно (15*16)+15=255, а шестнадцатеричное число 10 в десятичной системе счисления равно 10. Впрочем, эти факты, надеюсь, вам в той или иной степени известны.

Цвета заднего фона отдельно задаются, в общем-то, довольно редко. Существует свойство background, с помощью которого можно определить все, что касается фона:

<style type="text/css">
body {background: url(http://www.fakecorp.com/images/back.gif)
white repeat-x fixed}
</style>

Если вам все же захочется использовать только некоторые частные свойства фона, то вот их описание.

• background-repeat. С помощью одного из четырех значений задается режим повторения фонового изображения на экране: repeat-x размножает его по горизонтали; repeat-у — по вертикали.
  
• background-attachment. Определяет, будет или нет прокручиваться фоновое изображение вместе с остальным текстом. Соответственно, два значения может приниматься: scroll и fixed.
  
• background-position. Определяет с помощью фиксированных значений или процентов положение левого верхнего угла фонового изображения.

Расположение и вид блоков

Элементы XHTML, вокруг которых браузеры по умолчанию оставляют пустое пространство, называются блоковыми. Такое название появилось из-за того, что они как бы создают блоки текста (или других элементов) и могут рассматриваться в качестве объектов на странице. Это позволяет изменять их расположение и вид, устанавливать поля, отступы, добавлять границы и т. д. Некоторые свойства уже встречались вам в виде свойств таблиц в главе 9, и необходимо отметить, что с помощью таблиц стилей их можно применять к любым элементам блокового уровня.

Определения таблиц стилей задают набор свойств, предназначенных специально для управления внешним видом блоков. Все эти свойства показаны в табл. 10.4.

Свойства margin и padding означают примерно одно и то же. Наборы значений определяют, какие именно стороны страницы изменяются:

• одиночное значение (например, {margin: 5pt}) означает, что устанавливаются поля верхней, нижней, левой и правой границ;
  
• два значения (например, {padding: .5in .4in}) говорят о том, что первое из них применяется к верхней и нижней границе, а второе — к левой и правой;
  
• могут присутствовать н три значения ({padding: .5in .4in ,3in}): первое устанавливает верхнюю границу, второе — правую и левую, третье — нижнюю;
  
• четыре значения ({margin: 5em 6em 4em 9em}) соответствуют верхнему, правому, нижнему и левому полям.

Таблица 10.4. Свойства блоков

Разница между свойствами ma rgi n и paddi ng состоит в том, что первое устанавливает дополнительные пробелы за границами блока, а второе включает их между границами и текстом.

Оба свойства имеют «направленные» разновидности типа "margin-left: 12px" или "padding-bottom: lin". Это удобно при определении отступов и полей с какой-то одной стороны.

Свойство border обобщает все предыдущие, напоминая этим background. В данном случае значениями являются ширина, стиль и цвет элемента. Например, ширину можно задать буквально так: thi n, mediurn, thick, а можно и числовым значением; цвет, как обычно, задается названием либо шестнадцатеричным числом. Стили бывают такие: none, dotted, dashed, solid, double, gnoove, ridge, inset, outset. Например:

p.redborder {border: red dashed 20px}

border заменяет собой довольно большое число свойств, задающих размер границы (border-1 eft-size, border-right-size и т. д.) и ее ширину (border-bottom-width, border-left-width и т. д.). Это свойство имеет «направленные» разновидности типа "border-1eft: 12рх blue dotted". Свойства wi dth и height могут использоваться для определения ширины или высоты любого блокового элемента. Значением может служить как конкретное число, так и процентное соотношение. (В некоторых случаях применяется и значение "auto".)

Свойство float — это инструмент для создания «плавающих» блоков, обтекаемых текстом. Оно очень сильно напоминает al ign, разница состоит лишь в том, что float применим к любым элементам:

 h2.wrap {float: left}

Наконец, обратимся к свойству clear. С его помощью определяется, можно ли другим элементам обтекать данные с какой-то конкретной стороны. Например, если clear равно left, элемент сдвигается под все, что находится слева от него:

<style type="text/css">
img.right {float: right}
h2.no_wrap {clear: right} 
</style>

Попробуем при помощи этих свойств создать страничку. Она должна выглядеть так, как изображено на рис. 10.3.

 <h2>Традиционное трехкомнатное жилище</h2>
<img class="right" src="housel.jpg">
<р>Традиционное жилье настоящего англичанина. 
В нем есть все. что нужно джентльмену и его
семье: современное итальянское освещение и
берберские ковры. </р>
<h2 clаss="по_wrар">Мини-дворец</h2>


<р>Вы больше нигде не встретите таких предложений 
за такую скромную сумму! Выложенный кирпичом вход 
(с забавным дистанционным управлением) ведет к 
прекрасному домику. Внутри вы увидите </p>

Рис. 10.3. Мы использовали свойство clear и с его помощью опустили текст второго абзаца
под плавающее изображение. Обратите внимание на пустое место,
оставленное над вторым заголовком

Стили ссылок и объектов

Изменение стилей ссылок — это, пожалуй, самое интересное занятие. Можно не только менять их цвета, можно менять вид ссылок при наведении мыши (популярный способ придать странице интерактивный вид). Для этого используются так называемые псевдоклассы, в частности специально предназначенные для работы со ссылками и подобными им объектами.

Псевдоклассы показаны в табл. 10.5.

Таблица 10.5. Псевдоклассы

Эти классы определяются в правилах таблиц стилей с помощью свойств color, font и background:

 <style type="text/css">
a:link {color: red: background: white}
a:visited {color: pink: background: white)
a: hover {color: blue: background: yellow}
a: active {color: orange: background: yellow}
</style>

При указанном определении стили автоматически присваиваются элементам <а>, находящимся в соответствующих состояниях на странице.

Первая буква, первая строка

Приведу еще два примера псевдоклассов, которые, возможно, вас заинтересуют. Я имею в виду классы : first -letter и : first -line. Они предназначены для создания капителей, буквиц и т. п. Например:

<style type="text/css"> p.drop.-first-letter {
font-family: Times. "Times New Roman":
font-size: 450Я%:
float: left:
margin-right: 5px:
</style>

Применение этого кода заключается в создании буквицы в начале каждого абзаца. Делается это при помощи атрибута class="drop" в составе элемента <р>. Все это справедливо и для first-line.

Специфические табличные стили

Многое из того, что обсуждалось выше, может быть с успехом применено при разработке таблиц. Вы еще не пытались использовать таблицы стилей в элементах <table>, <tr>, <td>?Для них всех можно задать свойства фона, цвета, а также определить стили целых блоков внутри таблицы. Особенно полезно оформлять в едином стиле строки. Это можно сделать, например, так:

<style>

tr.yellow { background-color: yellow } 
</style>

Это определение создает класс <tr>, который используется для создания строк таблицы с задним фоном желтого цвета. Можно применять практически любое оформление, вы здесь ограничены только своей фантазией. То же самое касается и элементов <td>.

Итак, с отдельными ячейками и строками все понятно. К ним можно применять самые разные стили. А как обстоит дело со столбцами? Очевидно, что как раз здесь могут снова пригодиться описанные ранее (глава 9) элементы <colgroup> и <col />. Например, таким образом можно задать цвет фона выбранной колонки. Для начала создадим стиль:

 <style>
col.yellow {background-color: yellow }
</style>

Теперь, используя элемент <col />, присвоим этот стиль какому-нибудь столбцу:

<table>
<colgroup>
<col />
<col class="yellow" align="right" />
</colgroup>
<tr><td>Январь</td><td>$100</td></tr>
<tr><td>Февраль</td><td>$150</td></tr>
<tr><td>MapT</td><td>$1000</td></tr>
</table>

Поскольку второй колонке, как видно из листинга, был присвоен определенный стиль (с помощью cl ass и align), то при просмотре в браузере это проявится в виде желтого цвета ее фона.

Границы и отступы внутри таблицы, оказывается, тоже можно изменять без проблем. Для этого используют свойства border и margin, обсуждавшиеся ранее, когда речь шла об оформлении блоков. Не только ко всей таблице можно применить их, но и к отдельным ячейкам, строкам и даже столбцам:

<table style="border: solid red">

Этот открывающий тег говорит о том, что ниже последует таблица, причем цвет ее границы будет красный. Будут в таблице внутренние линии или нет, зависит от свойства border, примененного к конкретной строке (<tr>) или столбцу (<col />). (Имейте в виду, что существующие версии большинства веб-браузеров отличаются в том числе и реализацией границ таблицы. Можно попробовать настроить их вид с помощью атрибутов border, frame и rules, обсуждавшихся в главе 9.)

По своему опыту я знаю, что, например, листинг 10.1 задает красные границы вокруг всех ячеек в Internet Explorer 5 (и выше), а в то же время Netscape 6 уверен, что нужно рисовать просто красную линию вокруг всей таблицы.

Листинг 10.1. Свойства границ таблиц

 <!DOCTYPE HTML PUBLIC "\//w#C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>


redborder { border: solid red } 
</style>
</head>
<body>

<table class="redborder">
<colgroup>
<col class="redborder" />
<col class="redborder" />
</colgroup>
<tr class="redborder"><td>flHBapb</td><td>$100</td></tr>
<trxtd>(lieBpanb</tcl><td>$50</td></tr>
<tr><td>MapT</td><td>$1000</td></tr>
</table>
 </body>
</html>

Специальные символы

В предыдущих параграфах нам уже встречался способ добавления в текст специальных значков цитирования (элемент <q>), а также упоминалось об использовании неразрывных пробелов. Однако на самом деле есть еще очень много разных спецсимволов, которые время от времени употребляются на страницах. Что нужно сделать для того, чтобы спецсимвол появился на экране? Его нельзя просто взять и набрать на клавиатуре, большинство из них просто не установлены. А что, если использоваться стандартные для XHTML угловые скобки? (< и >). Да, это возможно. Более того, спецсимволы добавляются при помощи специальных сущностей, которые все чем-то напоминают уже знакомый нам знак неразрывного пробела. Они позволяют решить проблему отображения элементов XHTML в HTML-документе. Рассмотрим такой пример:

Студенты должны уметь использовать элементы <b> и </b>.
Студенты должны уметь использовать элементы &lt:b&gt: и &lt:/b&gt:.

Что мы увидим в браузере? В первом случае слово «и» будет выделено жирным шрифтом. Но это вовсе не то, что нам нужно. Вот вторая строка будет выглядеть в браузере ровно так, как первая строка нашего исходного кода. В ней вместо угловых скобок, означающих, что внутрь них заключен тег, используются спецсимволы &lt; и &gt; («меньше» и «больше» соответственно).

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

Таблица 10.6. Буквенные обозначения спецсимволов по ISO

ПРИМЕЧАНИЕ

Хотя в данной таблице указаны буквенные обозначения спецсимволов, вместо них можно применять и цифровые коды. Например, сущности &nbsp; соответствует &#160. Далее вы найдете ссылку на Интернет-сайт, на котором можно посмотреть таблицу соответствия кодов.

Кроме этих спецсимволов существует множество других, некоторые из них предназначены для отображения специфических букв разных национальных алфавитов. Например, чтобы получить на экране «n с волной» (и), можно использовать &ntitle;. Ту же самую букву, но заглавную, получают с помощью &Ntitle. Существуют обозначения и для многих других необычных букв, например &ouml; означает («о» с умляутом, б), a &eacute; — «e» с акцентом (Е).Но и это еще не все. Поддерживаются и другие типы диакритических знаков, буквы греческого алфавита, математические символы и многие другие. См. http://www.w3schools.com/html/ html_entitiesref.asp. Определения сущностей и подробную информацию о них можно найти на сайте http://www.w3.org/TR/REC-html40/sgml/entities.html.

Резюме

В этой главе вы узнали обо всем, что касается таблиц стилей, начиная от теории вопросов необходимости и полезности их применения и заканчивая примерами.

Узнали о спецификации CSS, о некоторых элементах XHTML, таких как <span> и <div>, которые очень тесно связаны с концепцией таблиц стилей. Вторая часть главы была посвящена всему тому многообразию стилей, с помощью которых можно сделать свою страницу совершенно уникальной. Для этого используются различные свойства текста, шрифта, заднего фона и блоков. Вы узнали о некоторых псевдоклассах, служащих для создания специфических эффектов, научились применять стили к таблицам на HTML. В конце главы были представлены коды некоторых специальных символов.

В главе 11 вы получите дополнительные сведения об изображениях в Сети, включая их оптимизацию для ускорения процесса загрузки пользователями, научитесь создавать карты ссылок.