Internet_tehnologii_kurs_lek

Рис. 10.4. Изменение начертания текста на курсив в состоянии hover

Вероятно, самой распространенной модификацией является удаление подчеркивания ссылки. Это можно выполнить для всех состояний, воспользовавшись объявлением text-decoration: none;.

a {color: orange; text-decoration: none;}

Как отмечалось ранее, общие стили для всех состояний должны размещаться в якорном элементе, чтобы можно было воспользоваться наследованием. Нет необходимости добавлять это объявление ко всем псевдоселекторам, поскольку они унаследуют правило автоматически, как показано на рисунке 10-5.

Рис. 10.5. Посмотрите-ка - подчеркивание исчезло!

Правила также можно комбинировать. Некоторым дизайнерам нравится использовать подчеркивание только для состояния hover. Для этого в селектор :hover добавляется объявление text-decoration: underline;, перекрывающее унаследованное значение якорного элемента благодаря свойству специфичности селекторов.

Рис. 10.6. Состояния link, visited, hover и active с подчеркиванием в состоянии hover

Несколько стилей ссылок с использованием селекторов класса

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

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

10.4.

Пример 10.4. Использование классов для создания нескольких стилей ссылок

/* default link styles, appropriate for content area - стандартные стили ссылок, подходящие для области содержимого */ a {color: orange; text-decoration: none;}

a:link {color: orange;} a:visited {color: yellow;} a:hover {color: fuchsia;} a:active {color: red;}

/* classed link styles, appropriate for navigation area - стили ссылок в виде класса, подходящие для области навигации */ a.nav {color: white; text-decoration: none;}

a.nav:link {color: white;} a.nav:visited {color: yellow;} a.nav:hover {color: orange;} a.nav:active {color: fuschia;}

Чтобы применить класс к ссылкам, к элементу ссылки необходимо добавить атрибут class="nav": <а class="nav" href="http://www.molly.com/">Molly.Com</a>

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

Рис. 10.7. Применение нескольких стилей ссылок при помощи классов

Стилизация ссылок с использованием селекторов потомков

Конечно, использование множества классов означает не только написание большого количества CSS-правил, но и добавление множества атрибутов class в HTML-документ. Если необходимо стилизовать большой объем содержимого и вы полагаетесь на классы, в результате получится то, что промышленные специалисты называют «везде классы» (class-it is) - чрезмерное использование классов. Подобной ситуации можно избежать, если воспользоваться другими видами селекторов.

Элементы можно уникально идентифицировать при помощи ID-селектора. Эти селекторы начинаются со знака решетки, за которым следует уникальное имя – очень похоже на то, что мы делали при создании класса:

#id-name

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

81

следующих главах, особенно в той главе, где рассматриваются CSS-макеты.

После того, как раздел документа идентифицирован, можно воспользоваться селекторами потомков. Эти селекторы выбирают элементы, основываясь на определенном родительском элементе. Сначала указывается имя родителя, затем пробел и селектор элемента, для которого вы хотите определить стили: #nav a. Данное объявление выбирает все якорные элементы, являющиеся потомками родительского элемента с идентификатором nav. В примере 10.5 демонстрируется использование этого метода в контексте нескольких ссылок.

Пример 10.5. Несколько ссылок с ID-селекторами и селекторами потомков

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title> <style type="text/ess">

body {font: 14px Georgia, Times, serif; color: white; background-color: black,-}

hi {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;}

h2 {font: italic 20px Georgia, Times, serif; color: #ccc,-background-color: black; text-transform: lowercase,-} /*link defaults*/ a {color: orange; text-decoration: none,-} a-, link {color-, orange;} a:visited {color: yellow,-}

a:hover {color: fuchsia; text-decoration: underline,-} a:active {color: red;} /*link styles for all descendant links of the example2 division*/

#example2 {background-color: white; color:black;} #example2 a {color: lime;} #example2 a:link {color: lime,-} #example2 a:visited (color: red;} #example2 a:hover {color: aqua; text-decoration: underline;} #example2 a:active {color: fuchsia;} </style> </head> <body>

<div id="examplel">

<p> I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <a href="http://www.prengall.com/">most</a> agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> </div>

<div id="example2">

<p>This latter was a <a href="http://www.prengall.com/"> re-markably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p> </div> </body> </html>

В данном случае, в документе существует два раздела с уникальными идентификаторами. Поскольку для раздела examplel не определено никаких стилей ссылок, для отображения этих ссылок будут использованы стандартные стили. Но определены стили ссылок специально для раздела example2, поэтому эти стили будут применены ко всем ссылкам, являющимся потомками данного раздела, как показано на рисунке 10.8.

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

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

маркер изображением. У нас есть некоторый текст, нестилизованный упорядоченный список и определены стили фона, как показано на рисунке 10.9.

Рис. 10.9. Стилизованная страница с упорядоченным списком

Если вы хотите использовать альтернативный маркер, можно воспользоваться свойством list-style-type и соответствующим значением. Существует множество значений (большинство из которых отвечают за отображение чисел в других языках), но в упорядоченных списках наиболее часто используются значения leading-zero (в этом случае нумерация начинается с нуля) и lower-roman или upper-roman (в данном случае для отображения используются римские цифры в нижнем или верхнем регистре, соответственно). Просто добавьте желаемое значение в существующую таблицу стилей:

ol {list-style-type: lower-roman;}

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

10.10.

Рис. 10.10. Стилизация упорядоченного списка при помощи строчных римских цифр

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

Пример 10.6. Использование классов для применения изображений к упорядоченному списку

82

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title>

<style type="text/css">

body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif); background-position: right top; background-repeat: norepeat;}

h1 {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline; text-transform: capitalize;} h2 {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;}

.listl {list-style-image: url(l.gif);}

.list2 {list-style-image: url(2.gif);}

.list3 {list-style-image: url(3.gif);> </style>

</head>

<body>

<hl>Directions to the Party!</hl> <ol>

<li class=‖listl‖>From the corner of Broadway and 5th Avenue, take a right onto 5th.</li>

<li class=‖list2‖>Follow 5th North about three miles until you come to the Oak Road intersection.</li> <li class=‖list3‖>Take a right on Oak Road. Stay on Oak about five miles.</li> </ol> </body> </html>

Рис. 10.11. Добавление графических изображений с числами к элементам, списка с использованием классов

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

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

Маркеры неупорядоченного списка можно стилизовать с использованием трех ключевых слов: disc, circle или square, как показано в примере 10.7.

Пример 10.7. Встроенные стили демонстрируют использование трех ключевых слов для стилизации маркеров неупорядоченных списков

<h2>What to Bring:</h2> <ul>

<li style="list-style-type: disc;">A beverage of choice.</li> <li style="list-style-type: circle;">Munchies.</li>

<li style="list-style-type: square;">Music and movies.</li> </ul>

На рисунке 10.12 показаны красивые результаты.

Рис. 10.12. Демонстрация результатов использования ключевых слов disc, circle и square - обратите внимание, что в некоторых браузерах вид маркеров может быть немного другим, однако, общие возможности сохраняются

Если вы хотите заменить маркер собственным изображением, создайте изображение и добавьте его при помощи свойства list-style-image, как показано в примере 10.8.

Пример 10.8. Просмотр исходного кода завершенного документа, в котором используются маркеры-изображения

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title> <style type="text/ess">

body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif); background-position: right top; background-repeat: norepeat;}

hi {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;} ul {list-style-image: url(bullet.gif);} </style> </head> <body>

<hl>What to Bring:</hl> <ul>

<li>A beverage of choice.</li> <li>Munchies.</li> <li>Music and movies.</li> </ul> </body> </html>

Здесь не нужны классы; требуется всего одно изображение. Это изображение заменит маркер, как показано на рисунке 10.13.

83

Рис. 10.13. Использование изображений вместо текстовых маркеров для изменения внешнего вида буллитов

Можно использовать еще одно свойство списка list-style-position, которое может принимать значение outside или inside. Значение outside размещает маркер за пределами блока, поэтому при переносе строки к новой строке добавляется отступ - обычное поведение списка. При использовании значения inside, отступ к новой строке не добавляется, как показано на рисунке 10.14.

Рис. 10.14. В верхнем варианте для свойства list-style-position используется значение outside, а в нижнем - значение inside

Сокращения языка CSS для стилей списка

Еще одним свойством-сокращением является свойство list-style. Оно объединяет в себе свойства списка и позволяет создавать их с использованием сокращенной формы записи, как показано в примере 10.9.

Пример 10.9. Использование свойства-сокращения list-style <!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title> <style type="text/css">

body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif); background-position: right top,- background-repeat: no-repeat;}

hi {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;}

ul {list-style: url(arrow.gif) inside;} </style>

</head>

<body>

<hl>What to Bring:</hl> <ul>

<li>A beverage <br /> of choice.</li> <li>Munchies.</li>

<li>Music <br /> and movies.</li> </ul>

</body>

</html>

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

Рис. 10.15. Стилизация списка с использованием свойства-сокращения list-s tyl e

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

стилизации простого списка и избавимся от маркеров, воспользовавшись свойством list-style-type и значением none. Это объявление удалит все маркеры, оставив список ссылок, как показано в примере 10.10.

Пример 10.10. Стилизация списка ссылок

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>working with style</title>

84

<style type="text/ess">

body {font: 14px Georgia, Times, serif; color: black;} ul {list-style-type: none;}

a {color: orange; text-decoration: none;} a:link {color: orange;}

a:visited {color: yellow;}

a:hover {color: fuchsia; text-decoration: underline;} /*font-style: italic; font-weight: bold; background-color: aqua,-*/ a:active {color: red;}

</style> </head> <body>

<ul>

<li> <a href="home.html">Home</a> </li>

<li> <a href="products.html">Products</a> </li> <li> <a href="services.html">Services</a></li> <li> <a href="about.html">About Us</a> </li> <li> <a href ="contact.html">Contact</a> </li> </ul>

</body>

</html>

На рисунке 10.16 показан список стилизованных ссылок без маркеров.

Рис. 10.16. Простая вертикальная навигация на основе списка со стилизованными ссылками

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

10.11.

Пример 10.11. Добавление стилей к списку

body {font: 14px Georgia, Times, serif; color: black,-} ul {list-style-type: none; padding: 0; width: lOOpx;

background-image: url(swirls.gif); border: 2px solid orange;} li {padding-left: 5px; padding-bottom: 5px; border-bottom: lpx solid orange;}

a {color: orange; text-decoration: none;} a:link {color: orange;}

a:visited {color: yellow;} a:hover {color: fuchsia;} a:active {color: red;}

Да, определенно, этот список стал выглядеть более интересно, как показано на рисунке 10.17.

Рис. 10.17. Теперь выглядит, как панель навигации

По мере использования различных стилей для навигации, вы обнаружите отличия в способах обработки браузерами стилизованных списков. Например, браузеры Mozilla и Mozilla Firefox тщательно интерпретируют отступы и ширину, а браузер IE стремится быть более прощающим.

Вертикальная панель навигации на основе списка с эффектами изображения

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

Пример 10.12. Использование фоновых изображений для создания сложных эффектов навигации body {font: bold 15px Georgia, Times, serif; color: black;}

a {color: white; text-decoration: none; display: block;} a:link {color: white;}

a:visited {color: yellow;}

a:hover {color: white; background-image: url(linkgover.gif);} a:active {color: red;}

#nav, #nav a, #nav li {width: lOOpx; margin: 0; padding: 0; list-style-type: none;} li {background-image: url (linkback.gif) ,- border-bottom: 3pxsolid white;}

Обратите внимание, что установлено фоновое изображение как для элемента списка, так и для состояния hover. В результате будет

85

получена панель навигации с роскошным дизайном и профессиональными визуальными эффектами, как показано на рисунке 10.18.

Рис. 10.18. Добавление фоновых изображений к элементам списка и состоянию hover для создания насыщенных графикой эффектов, которые раньше было невозможно создать без использования языка JavaScript

Значение свойства display якорного элемента с inline (в тексте) изменено на block (за элементом добавляется разрыв строки). Это необходимо, чтобы ширина якорного элемента соответствовала ширине элемента списка. Благодаря этому, фоновое изображение состояния hover будет отображаться корректно во всех браузерах.

Горизонтальная панель навигации на основе списка с использованием цвета

Впоследнем разделе мы использовали объявление display: block;, чтобы превратить якорный элемент из встроенного элемента в блочный. Воспользовавшись объявлением display: inline;, можно сделать так, чтобы списки являлись встроенными, то есть отображались горизонтально, как показано в примере 10.13.

Пример 10.13. Разметка и CSS-cmwiu для горизонтальной панели навигации на основе списка с использованием цветовых эффектов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title>

<style type="text/ess">

body {font: 14px Georgia, Times, serif; color: black;}

ul#navlist {margin-left: 0; padding-left: 0,- white-space: nowrap;} #navlist li (display: inline; list-style-type: none;}

#navlist a {padding: 3px lOpx;}

#navlist a:link, ttnavlist a:visited {color: white; background-color: orange; text-decoration: none;} ttnavlist a:hover {color: orange; background-color: yellow; text-decoration: none,-}

</style>

</head>

<body>

<div id="navcontainer"> <ul id="navlist">

<lixa href ="home.html">Home</a></li> <lixa href ="products.html">Products</a></li> <li><a href ="services.html">Services</ax/li> <lixa href= "about.html">About Us</ax/li> <lixa href="contact.html">Contact</ax/li> </ul>

</div>

</body>

</html>

Врезультате будет получена очень красивая горизонтальная панель навигации, как показано на рисунке 10.19.

Рис. 10.19. Использование списка и цветовых эффектов для получения горизонтальной панели навигации на основе списка

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

горизонтальных списков. Я немного изменила предыдущую таблицу стилей, добавив фоновые изображения к состояниям link и hover. Затем я использовала полужирный шрифт белого цвета для состояний link и hover, чтобы добиться хорошего контраста при переключении изображений, когда указатель мыши наведен на ссылку, как показано в примере 10.14.

Пример 10.14. Панель навигации на основе списка с использованием фоновых изображений body {font: 14px Georgia, Times, serif; color: black;}

ulttnavlist {margin-left: 0,- padding-left: 0; white-space: nowrap;}

ttnavlist li {display: inline; list-style-type: none,-} #navlist a {padding: 3px lOpx;}

#navlist a: link, #navlist a:visited {color: white,- background-image: url(linkback.gif); text-decoration: none;} #navlist a-.hover {color: white; background-image:

url (linkhover.gif) ,- text-decoration: none,-}

86

На рисунке 10.20 представлена элегантная схема навигации.

Рис. 10.20. Горизонтальная панель навигации на основе списка с использованием переключения изображений

Квантовый скачок: состояние hover и браузер Internet Explorer

Используя списки для создания панелей навигации, особенно горизонтальные списки, вы обнаружите, что существуют поразительные отличия в способе обработки стилей браузером Internet Explorer в сравнении с браузерами Mozilla, Firefox, Opera и Safari. К сожалению, браузер Internet Explorer не обновлялся годами, и в версии 6.0 для операционной системы Windows отсутствует существенная поддержка языка CSS. В результате, приходится создавать обходные стили, чтобы гарантировать, что ваша работа будет отлично выглядеть в максимально возможном диапазоне браузеров (которые описанные здесь).

Существенная проблема браузера IE заключается в том, что селектор :hover поддерживается только для якорного элемента, хотя остальные браузеры поддерживают этот селектор для любого элемента. Если бы эта поддержка была реализована в браузере IE, было бы меньше путаницы и неразберихи при работе с навигацией на основе списков - не говоря уже о большом количестве дополнительных возможностей для динамической стилизации списков без необходимости использования языка JavaScript. Чтобы больше узнать о динамической навигации на основе списков, например ниспадающей или плавающей навигации, не работающей в браузере IE, обратитесь к статье «CSS Edge» Эрика Мейера (Eric Meyer) по адресу http://www.meyerweb.com/eric/css/edge/.

Поля, границы и отступы

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

Рис. 11.1. Изучение блоков визуальной модели языка CSS

Светло-серый цвет использован для фона, чтобы визуально выделить отдельные и строчные блоки. Заголовок h2 является отдельным блоком. Ширина блока равна ширине доступного пространства браузера (шириной блока можно управлять при помощи свойства width), а с правого края блока размещается разрыв строки. Строчный блок представлен ссылкой и размещен на одной строке с окружающим его текстом. Несложно заметить, что его края находятся в непосредственной близости от содержимого.

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

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

Исследование блочной модели

Блочная модель - это стандартизированная часть технологии, используемой в браузерах. Консорциум W3C наблюдает за реализацией стандартов в браузерах, и поэтому разработал блочную модель, представленную на рисунке 11.2.

Рис. 11.2. Блочная модель, разработанная консорциумом W3C

Использование полей Стилизация полей чаще всего используется для управления расстоянием между элементами. Обратите внимание, что по умолчанию

вокруг содержимого, при отображении в Web-браузерах, существует определенное пространство, как показано на рисунке 11.1. Этим пространством можно управлять, изменяя значения полей элемента body, как показано в примере 11.1.

Пример 11.1. Установка значений полей для элемента body

87

body {

font: 14px Verdana, Arial, Helvetica, sans-serif; color: white;

background-color: black; margin-top: 0; margin-left: 0;

border: 2px solid white;

}

h1 {

font-size: 24px; color: orange;

}

h2 {font: italic 20px Georgia, Times, serif; color: #999;

text-indent: 15px;

}

Заметьте, что после 0 значение длины, например рх или ет, не указывается, поскольку для значения 0 длина не требуется, это подразумеваемое значение.

После установки значения верхнего и левого полей элемента body в 0, все содержимое элемента body сместится вместе с его дочерними элементами, как показано на рисунке 11.3.

Рис. 11.3. Задание нулевых значений для верхнего и левого полей элемента body - обратите внимание, что белая граница вокруг элемента body прижата к верхней и левой стороне области просмотра

Посмотрите на рисунок 11.3 и обратите внимание, что все дочерние элементы прижаты к левой стороне, кроме элемента h2, у которого значение свойства text-indent равняется 15 пикселам. Однако у элемента абзаца и элемента h1, которые являются дочерними элементами элемента body, значения полей не заданы, поэтому они прижаты к левой и верхней стороне. Или нет? Что это за расстояние между элементом h1 и внешней границей элемента body? Хотя очевидно, что элемент body прижат к верхней стороне окна просмотра, этого не скажешь об элементе h1. Чтобы первый элемент был прижат к верхней границе родительского элемента, в браузерах Mozilla предполагается, что значение свойства margin-top для первого элемента должно быть равным 0. В браузере Internet Explorer данное предположение игнорируется и в результате элемент h1, как и остальные элементы, прижимается к верхней и левой стороне элемента body.

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

Пример 11.2. Установка ряда полей и значений для демонстрации их использования body {font: 14px Verdana, Arial, Helvetica, sans-serif; color:

white; background-color: black; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; border: 2px solid white;}

hi {font-size: 24px; color: orange; margin-top: 0; margin-right: lOOpx; border: 2px solid white;}

h2 {font: italic 20px Georgia, Times, serif; color: #999; text-indent: 15px;}

p (margin-left: lOOpx; margin-top: 5px; margin-bottom: 0; border: 2px solid yellow;}

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

88

Рис. 11.4. Использование полей для ряда элементов, вклкгчая элементы body, hi и элементы абзаца

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

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

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

Пример 11.3. Использование отрицательных значений полей для вынесения содержимого за пределы элемента-контейнера

body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color: black; margin-top: 30px; margin-right: 30px; margin-bottom: 30px; margin-left: 130px; border: 2px solid white;} p {margin-left: -65px; margin-top: 5px; margin-bottom: 0;}

Теперь поля абзаца смещены относительно левого поля элемента body, как показано на рисунке 11.5.

Рис. 11.5. Использование отрицательных значений полей для вынесения содержимого за пределы блока-контейнера - в данном случае, элемента body Квантовый скачок: решения с использованием отрицательных значений полей для дизайнеров

Если вы заинтересовались использованием отрицательных значений полей для решения известных дизайнерских задач, в Интернете существует несколько отличных статей. Статья Райана Брила (Ryan Brill) «Creating Liquid Layouts with Negative Margins» - прочитайте ее сейчас или отложите, пока не познакомитесь со следующими двумя главами (статья находится по адресу http://www.alisapart.com/articles/negativemargins/). При помощи отрицательных значений полей также можно центрировать элементы, что описывается в статье Роба Чанданайз (Rob Chandanais) по адресу http://www.bluerobot.com/web/css/center2.html. Как и в случае с множеством других проблем языка CSS, способы реализации свойства браузерами отличаются. Отрицательные значения полей попадают в эту категорию, поскольку эти значения интерпретируются по-разному различными браузерами. Поэтому, используйте отрицательные значения с осторожностью -хороший практический совет: если существует более простой способ для достижения цели, используйте его.

Свойство-сокрашение margin

У свойств полей существует сокращенный эквивалент - свойство margin. Обратите внимание, что свойства-сокращения языка CSS имеют собственные причуды, например порядок значений. Свойство margin - не исключение.

При использовании свойства margin значения полей задаются именно в этом порядке: верх, право, низ, лево. Популярная символика, используемая в индустрии, - «TRouBLe». В примере 11.3 установлены все «полноформатные» свойства для элемента body:

body {margin-top: ЗОрх; margin-right: ЗОрх; margin-bottom: ЗОрх; margin-left: 130px;}

Хотя «полноформатные» свойства необязательно указывать в определенном для полей порядке, полагаю, вам будет полезно увидеть, как этот «полноформатный» стиль преобразуется в сокращенную запись:

body {margin: ЗОрх ЗОрх ЗОрх 130рх;}

Обратите внимание, что значения не разделяются запятыми и все значения будут применены в порядке TRBL.

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

body {margin: ЗОрх 20рх;}

Б результате значения полей сверху и снизу будут равны 30 пикселам, а справа и слева - 20 пикселам. Но что произойдет, если указать три значения?

body {margin: ЗОрх 20рх 70рх;}

Значение левого поля будет взято из значения правого поля, поэтому в результате получим: значение верхнего поля - 30 пикселов, правого

89

- 20 пикселов, нижнего - 70 пикселов, левого - 20 пикселов.

Если значения всех полей одинаковы, просто укажите это значение: body {margin: ЮОрх; }

Врезультате значения всех полей элемента body будут равны 100 пикселам. Можно также использовать значения, выраженные в процентах:

body {margin: 2 0%;}

Врезультате значения всех полей элемента body будут равны 20%. Наконец, запомните, что для значения 0 не нужно указывать длину или проценты:

body {margin: 0 ЗОрх 20рх 0;}

Стилизация границ

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

Стилизация границ включает в себя стилизацию сторон, толщины, начертания и цвета. Для этого используются различные свойства границы: border-width, border-style и border-color. Сторона границы указывается между двумя составляющими названия свойства: border- left-color, border-right-style и border-top-width. Более изящный подход по использованию свойств границы описан в части «Свойствосокращение border» этой главы.

Толщина границы Толщину границы можно указать с использованием значений длины, например пикселов или единиц размеров шрифта или ключевых слов thin, medium или thick:

border-bottom-width: 2рх; border-left-width: thick;

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

значения используются для свойства border-style, как показано в таблице 11.1.

Табл. 11.1. Начертания границ в языке CSS

Авот пример использования свойства начертания границы и соответствующего значения: border-right-style: dotted

Цвет границы

Цвета можно задавать при помощи любых доступных значений: шестнадцате-ричных, сокращенных шестнадцатеричных, RGB-значений, RGB-процентов и поддерживаемых названий цветов:

border-top-color: #808080;

Атеперь все вместе!

В примере 11.4 продемонстрировано использование различных комбинаций свойств границы. Пример 11.4. Комбинирование стилей свойств границы

body {

font: 14px Verdana, Arial, Helvetica, sans-serif; color: white;

background-color: black; margin-top: 0;

}

h1 {

font-size: 24px; color: orange;

border-left-width: 3px; border-left-color: red; border-left-style: dotted; border-bottom-width: thick; border-bottom-color: lime; border-bottom- style : insert;

}

h2 {font: italic 20px Georgia, Times, serif; color: #999-text-indent: 15px; border-bottom: thin; border-bottom-style :dotted; border-color: fuschia;} p {border-left-widht: medium; border-left-style: solid; border-left-color: blue;}

Результаты использования всех стилей границы показаны на рисунке 11.6.

90