HTML, XHTML Рё CSS РЅР° 100%

Квинт Игорь

Глава 9

Оформление HTML-документа средствами CSS

 

 

9.1. Фон

9.2. Генерируемое содержимое

9.3. Автоматическая нумерация и списки

9.4. Таблицы

9.5. Интерфейс пользователя

9.6. Поля и отступы

9.7. Границы

9.8. Работа с блоками

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

 

9.1. Фон

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

Следует отметить, что некоторые браузеры будут отображать фон HTML-документов, заданный для элемента HTML. Хотя рекомендуется устанавливать фон для элемента BODY, а не для элемента HTML.

Рассмотрим пример, приведенный в листинге 9.1.

Листинг 9.1. Фон страницы

Глава 9. Установка фона области представления

Я использую мраморный фон из файла картинки.

Фон документа, представленного в листинге 9.1, будет задан картинкой, размноженной на все окно браузера и находящейся в файле marble.png.

Список всех возможных свойств фона таков: background-color, background-image, background-repeat, background-attachment, background-position и background.

Теперь рассмотрим каждое из них подробнее.

Итак, первое свойство – background-color. Оно устанавливает цвет фона элемента, равный либо шестнадцатеричному значению цвета, либо названию цвета, либо RGB-значению цвета, либо ключевому слову transparent. Ключевое свойство transparent просто-напросто делает фон элемента прозрачным.

Пример:

body { background-color: #FF0000 }

Приведенный код устанавливает красный цвет фона страницы.

Второе свойство – background-image. Оно задает графический объект, то есть картинку из файла, в качестве фона элемента. При определении фонового изображения рекомендуется также указывать цвет фона, который будет использоваться, если изображение недоступно. Если изображение доступно, то оно отображается поверх фонового цвета, который все же будет виден сквозь прозрачные фрагменты изображения. В качестве значения этого свойства выступает адрес картинки. Вы также можете задать в качестве значения ключевое слово none, чтобы не использовать фоновое изображение, например, пока не известен адрес файла фоновой картинки. Рассмотрим такой фрагмент таблицы стилей:

body { background-image: url(В«some_bgimage.gifВ») }

p { background-image: none }

В данном примере в качестве фона страницы будет использоваться изображение из файла some_bgimage.gif. Однако содержимое страницы внутри элемента P будет находиться на белом либо на таком фоне, который задан в браузере по умолчанию (как правило, белый).

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

• repeat – дублируется как по вертикали, так и по горизонтали;

• repeat-x – дублируется только по горизонтали;

• repeat-y – дублируется только по вертикали;

• no-repeat – не дублируется: выводится только одна копия изображения.

Рассмотрим такой пример:

body {

background: white url("pendant.gif");

background-repeat: repeat-y;

background-position: center;

}

Цвет страницы будет белым. Фоновое изображение будет вертикально продублировано и расположено посередине страницы.

Если вы задали фоновое изображение, то нужно указать свойство background-attachment, которое определяет, будет ли изображение фиксироваться относительно окна просмотра (значение fixed) или перемещаться вместе с документом (значение scroll) в процессе его прокрутки.

Рассмотрим пример:

body {

background: red url("pendant.gif");

background-repeat: repeat-y;

background-attachment: fixed;

}

При использовании приведенного примера для какого-то HTML-документа цвет фона документа станет красным, а на странице сформируется бесконечная вертикальная полоса из файла pendant.gif. Полоса будет оставаться как бы «приклеенной» к окну просмотра во время горизонтальной или вертикальной прокрутки.

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

Например, вы можете задавать местоположение, используя проценты. Причем если вы используете пару значений 0 % 0 %, то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов блока. Если зададите пару значений 100 % 100 %, то нижний правый угол изображения помещается в нижний правый угол краевой линии отступов. Если вы зададите пару значений 14 % 8 4 %, то верхний левый угол изображения смещается вдоль изображения на 14 % вправо по горизонтали и на 84 % вниз по вертикали. Тем самым он помещается в точку, смещенную вдоль области, предназначенной для отступов, на 14 % вправо по горизонтали и на 84 % вниз по вертикали.

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

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

• top left и left top – аналогично паре значений 0 % 0 %;

• top, top center и center top – как и пара значений 50 % 0 %;

• right top и top right – аналогично паре значений 100 % 0 %;

• left, left center и center left – как и пара значений 0 % 50 %;

• center и center center – аналогично паре значений 50 % 50 %;

• right, right center и center right – как и пара значений 100 % 50 %;

• bottom left и left bottom – аналогично паре значений 0 % 100 %;

• bottom, bottom center и center bottom – как и пара значений 50 % 100 %;

• bottom right и right bottom – аналогично паре значений 100 % 100 %.

Если вы зададите только одно значение длины или одно процентное соотношение, то оно определит позицию только по горизонтали, а позиция по вертикали будет принята браузером как значение 50 %. Если вы зададите два значения, то первым браузер будет считать позицию по горизонтали. Вы также можете сочетать значение длины и процентное соотношение (например, 5 0 % 2 cm). Можно использовать отрицательные значения. Однако помните, что ключевые слова нельзя применять вместе со значениями длины или процентными соотношениями.

Можно использовать сокращенную запись для всех свойств, приведенных выше, с помощью свойства background. Например:

body { background: url(В«chess.pngВ») gray 50% 20% repeat fixed }

В данной таблице стилей заданы значения для всех свойств фона документа.

 

9.2. Генерируемое содержимое

 

В некоторых случаях у вас может возникнуть необходимость в том, чтобы браузер пользователя отображал на экране содержимое, которое не принадлежит так называемому «дереву» HTML-документа. Хорошим примером может служить нумерованный список. Без сомнения, вам не захочется вводить числа нумерации вручную. Ведь если список довольно большой, а вам вдруг необходимо добавить элемент в его начало, то придется менять всю нумерацию. Не правда ли, будет гораздо удобнее, если браузер будет генерировать нумерацию автоматически? Согласитесь, также гораздо удобнее работать с большими страницами, если, к примеру, браузер сам добавляет слово «Рисунок» и номер рисунка перед его названием или, например, вставляет надпись «Глава 9.» перед заголовком девятой главы.

Хотя это может показаться нелепым, но в отличие от HTML CSS предоставляет средства для решения данных проблем.

С помощью CSS можно генерировать содержимое несколькими способами:

• с использованием свойства content в сочетании с псевдоэлементами: before и: after;

• с использованием элементов, свойство display которых принимает значение list-item.

Подробно рассмотрим все возможности CSS по генерации содержимого и начнем с использования свойства content.

 

Псевдоэлементы :before и: after

С помощью псевдоэлементов: before и: after можно задать стиль и местоположение генерируемого содержимого. Не требуется особых познаний в английском языке, чтобы из названия догадаться, что эти псевдоэлементы определяют местоположение «перед» и «после» содержимого элемента, принадлежащего дереву HTML-документа. Используя эти псевдоэлементы в сочетании со свойством content, вы можете определить содержимое и место, куда оно должно быть вставлено.

Рассмотрим простой пример. Пусть браузер сам расставит точки в конце абзацев в документе:

p:after { content: "." }

Надо помнить, что псевдоэлементы: before и: after могут быть связаны с элементом HTML-документа. Тогда они будут наследовать его свойства. Чтобы вы лучше разобрались, приведу такой пример:

p:before {

content: open-quote;

color: red

}

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

 

Свойство content

Это свойство используется вместе с псевдоэлементами: before и: after для генерации содержимого в документе. В примерах выше мы уже использовали это свойство. Теперь разберем его подробно.

Свойство content может принимать одно из нескольких значений: строку текста, URL-адрес документа, который должен быть вставлен, счетчик, кавычки либо значение атрибута. Вы можете создавать сложную вложенную строку, используя строку текста, счетчики, значения атрибутов элемента одновременно. При этом сложная строка должна быть разделена только пробелами, а не запятыми. Например:

content: "Р РёСЃСѓРЅРѕРє " counter(imagenum) ". "В attr(alt)

В документ может быть вставлена обычная текстовая строка, которая обязательно должна быть заключена в кавычки. Для примера добавим перед всеми абзацами надпись Абзац::

p:before { content "Абзац: " }

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

Скорректируем наш пример:

p:before {

content: "Абзац:\A"

}

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

Рассмотрим вставку строки, которая является значением параметра элемента. На первый взгляд может показаться непонятным, где это можно использовать. Такая функция применяется, например, для вставки значения атрибута alt элемента IMG:

img:before { content: attr(alt) }

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

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

 

Кавычки

Может понадобиться, чтобы в документе или в какой-то его части кавычки отображались не так, как обычно, а в зависимости от стиля и содержимого. С помощью CSS вы можете определять, каким образом браузер будет отображать кавычки. Свойство quotes задает пару «» для каждого уровня вложенности цитат, а свойство content предоставляет доступ к этим кавычкам и вставляет их до и после цитаты.

Рассмотрим определения кавычек с помощью свойства quotes. Лучше всего это можно понять из примера. Попробуйте применить следующую таблицу стиля:

/* Определение пар кавычек для двух уровней в двух языках */

Q:lang(ru) { quotes: ‘"’ ‘"’ "’" "’" }

Q:lang(no) { quotes: "В«" "В»" "<" ">" }

/* Вставка кавычек до и после содержимого элемента Q */

Q:before { content: open-quote }

Q:after { content: close-quote }

к HTML-документу, представленному в листинге 9.2.

Листинг 9.2. Кавычки

Глава 9

Этот текст выделен кавычками.

В результате его обработки браузером вы получите такой текст:

«Этот текст выделен кавычками.»

Если ту же таблицу стилей применить к HTML-документу, приведенному в листинге 9.3, то получим такую строку:

«Trondere graˇter naˇr blir deklamert.»

Листинг 9.3. Кавычки

Глава 9

Trondere graˇter naˇr Vinsjan paˇ kaia blir deklamert.

Как вы, наверное, заметили из примера, кавычки вставляются в соответствующие места документа благодаря значениям open-quote и close-quote, принимаемым свойством content. Каждое вхождение open-quote или close-quote в зависимости от глубины вложения заменяется одной из строк, принадлежащих значению свойства quotes.

Open-quote указывает на первую из двух кавычек, а close-quote – на вторую. Тип используемых кавычек зависит от уровня их вложенности.

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

Таблица 9.1. Кавычки

Например:

quotes: """ """ В«\2039В» В«\203AВ»

 

9.3. Автоматическая нумерация и списки

 

В CSS существует два свойства для управления нумерацией: counter-increment и counter-reset. Счетчики, которые определены данными свойствами, используются функциями counter() и counters() свойства content. Рассмотрим подробно свойства для управления нумерацией.

• counter-increment – с помощью этого свойства вы можете задать одно или несколько имен счетчиков, после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом его использовании. По умолчанию значение счетчика увеличивается на единицу. Вы также можете использовать отрицательные целые числа.

• counter-reset – также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое сначала присваивается счетчику. По умолчанию значение равно 0.

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

• Глава 1:

О‡ 1.1;

О‡ 1.2.

• Глава 2:

О‡ 2.1;

О‡ 2.2 Рё С‚.В Рґ.

Код таблицы следующий:

h1:before {

content: "Глава " counter(chapter) ". ";

counter-increment: chapter; /* Добавление 1 к номеру главы */

counter-reset: section; /* Установка значения 0 для раздела */

}

h2:before {

content: counter(chapter) "." counter(section) " ";

counter-increment: section;

}

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

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

Важно помнить, что свойство counter-reset поддерживает правила каскада. По этим правилам в следующей таблице стилей сбрасывается только счетчик imagenum:

h1 { counter-reset: section -1 }

h1 { counter-reset: imagenum 99 }

Чтобы выполнить сброс обоих счетчиков, необходимо задать их вместе:

h1 { counter-reset: section -1 imagenum 99 }

 

Стили счетчиков

По умолчанию браузер отображает значение счетчика как число в десятичном формате, но вы можете использовать и другие стили отображения счетчика, доступные через свойство list-style-type. Тогда описание счетчика будет выглядеть так:

counter(«название счетчика», list-style-type)

Чтобы задать стиль, используемый по умолчанию, можно использовать следующую запись:

counter(«название счетчика»)

Иными словами, просто не задавать значение list-style-type.

Вы можете использовать любые стили, в том числе disc (круг), circle (окружность), square (квадрат) и none (ничего). Например:

h1:before { content: counter(chno, upper-latin) ". " }

h2:before { content: counter(section, upper-roman) " – " }

blockquote:after { content: " [" counter(bq, hebrew) "]" }

div.note:before { content: counter(notecntr, disc) " " }

p:before { content: counter(p, none) }

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

 

Счетчики со свойством display: none

Неотображаемые элементы, то есть элементы, для свойства display которых установлено значение none, не могут увеличивать или уменьшать значение счетчика.

Например, в таблице стилей, представленной ниже, элементы H2 класса do_not_ display не увеличивают значение счетчика count_h2:

H2. do_not_display {counter-increment: count_h2; display: none}

Следует отметить, что элементы, для которых свойство visibility задано как hidden, увеличивают значения счетчиков.

 

РЎРїРёСЃРєРё

Рассмотрим все возможности задания спискам различного визуального форматирования.

Кстати, если вы с помощью display: marker укажете маркер вместе с элементом списка, созданным с помощью свойств списка, то маркер просто-напросто заменит стандартный элемент списка. Подробно про маркеры будет рассказано дальше.

Для списков также нельзя задать фон. Чтобы использовать в документе список с фоном, нужно задать список как маркер, то есть использовать display: marker, но про это также будет рассказано дальше.

Итак, начнем со стилизации списка с помощью свойства list-style-type. Это свойство задает вид маркера элемента списка, если для свойства list-style-image указано значение none или изображение, на которое указывает URL, недоступно. Можно использовать три типа маркеров: глифы, нумерованные и алфавитные, либо задать значение none, которое означает, что маркер не используется.

Рассмотрим типы маркеров списка подробнее. Первыми разберем глифы. Они определяются с помощью значений disk, circle и square. Обычно они отображаются браузерами клиента как круг, окружность или квадрат. Пример списка с маркером в виде квадрата приведен в листинге 9.4.

Листинг 9.4. Нумерация средствами CSS

Глава 9. Маркеры в виде квадрата

  1. Это первый элемент списка.

  2. Это второй элемент списка.

  3. Это третий элемент списка.

Теперь рассмотрим нумерованные списки. Различают несколько систем нумерации списков. Ниже представлены все системы нумерации, используемые в CSS, и их описание:

• decimal – десятичные числа, начиная с 1;

• decimal-leading-zero – десятичные числа, дополненные нулями (например, 01, 02, 03… 98, 99);

• lower-roman – римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т. д.);

• upper-roman – римские цифры, представленные прописными буквами (I, II, III, IV, V и т. д.);

• hebrew – традиционная еврейская нумерация;

• georgian – традиционная грузинская нумерация (an, ban, gan…, he, tan, in, in-an…);

• armenian – традиционная армянская нумерация;

• cjk-ideographic – простые идеографические числа;

• hiragana – a, i, u, e, o, ka, ki…;

• katakana – A, I, U, E, O, KA, KI…;

• hiragana-iroha – i, ro, ha, ni, ho, he, to…;

• katakana-iroha – I, RO, HA, NI, HO, HE, TO….

Третий вариант задания маркеров списка – с помощью так называемой алфавитной системы, или с помощью букв. Ниже приведены алфавитные системы и их описание:

• lower-latin или lower-alpha – строчные буквы в коде ASCII (a, b, c… z);

• upper-latin или upper-alpha – прописные (заглавные) буквы в коде ASCII (A, B, C… Z);

• lower-greek – классические строчные греческие буквы: альфа (а), бета (Р), гамма (у) и т. д.

Для примера создадим страницу, представленную в листинге 9.5.

Листинг 9.5. Нумерация

Глава 9. Нумерация с использованием римских цифр

  1. Это первый элемент списка.

  2. Это второй элемент списка.

  3. Это третий элемент списка.

В результате обработки браузером кода из листинга 9.5 вы должны увидеть такой список:

I Это первый элемент.

II Это второй элемент.

III Это третий элемент.

Теперь рассмотрим свойство list-style-image. Оно определяет файл с картинкой, используемой в качестве маркера списка. Если картинка доступна, то она заменяет маркер, устанавливаемый свойством list-style-type.

Рассмотрим такой пример:

UL { list-style-image: url(В«http://my_site.com/my_marker.jpgВ») }

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

Свойство list-style-position определяет положение блока маркера в главном структурном блоке. Для данного свойства вы можете задавать следующие значения:

• outside – блок маркера находится за пределами главного структурного блока;

• inside – блок маркера находится в первом строковом блоке главного структурного блока, следом за которым выводится содержимое элемента.

Рассмотрим данное свойство на примере (листинг 9.6).

Листинг 9.6. Нумерация в списках

Глава 9. Сравнение внутреннего/внешнего расположения

  • первый элемент СЃРїРёСЃРєР° располагается первым

  • второй элемент СЃРїРёСЃРєР° располагается вторым

  • первый элемент СЃРїРёСЃРєР° располагается первым

  • второй элемент СЃРїРёСЃРєР° располагается вторым

HTML-документ, представленный в листинге 9.6, показан на рис. 9.1.

Рис. 9.1. Сравнение внутреннего/внешнего расположения

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

Свойство list-style является сокращенной формой задания трех свойств list-style-type, list-style-image и list-style-position, как и рассмотренная ранее сокращенная запись для шрифтов font. Например:

UL { list-style: upper-roman inside } /* Любой элемент UL */

UL > UL { list-style: circle outside } /* Любой дочерний элемент UL элемента UL */

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

OL.alpha LI { list-style: lower-alpha } /* Любой потомок LI элемента OL */

OL.alpha > LI { list-style: lower-alpha } /* Любой дочерний элемент LI элемента OL */

В чем же опасность? При использовании только селекторов потомков вы можете не достичь желаемых результатов. Рассмотрим пример, приведенный в листинге 9.7.

Листинг 9.7. Каскад

Глава 9. Результат применения каскада

  1. первый уровень списка

    • второй уровень СЃРїРёСЃРєР°

Отображение элементов списка первого и второго уровней, помеченных маркерами типа lower-alpha и disc соответственно, будет осуществлено надлежащим образом. Однако каскад приведет к тому, что первое правило стиля (включающее специфичную информацию о классе) будет перекрывать второе. И вы получите одну и ту же маркировку для первого и второго уровней (рис. 9.2).

Рис. 9.2. Каскад

Следующий код позволит решить данную проблему:

OL.alpha > LI { list-style: lower-alpha }

UL LI { list-style: disc }

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

OL.alpha { list-style: lower-alpha }

UL { list-style: disc }

Благодаря наследованию значения свойства list-style элементов OL и UL будут передаваться соответствующим свойствам элементов LI. Именно этот способ рекомендуется использовать для задания стиля списка.

Значение URL вы можете комбинировать с любыми другими значениями, как в этом примере:

UL { list-style: url(В«http://my_site.com/my_image.gifВ») disc }

Если в данном примере браузер не сможет получить доступ к графическому объекту, то вместо него он будет использовать маркер типа disc.

Надо отметить, что если для свойства list-style устанавливается значение none, то свойствам list-style-type и list-style-image также присваивается значение none:

UL { list-style: none }

В результате маркер элемента списка просто не отображается.

 

Маркеры

В данном разделе мы рассмотрим использование маркеров.

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

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

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

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

Листинг 9.8. Создание списка с помощью маркеров

Глава 9. Создание списка с помощью маркеров

  1. Это первый элемент списка.

  2. Это второй элемент списка.

  3. Это третий элемент списка.

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

I. Это первый элемент списка.

II. Это второй элемент списка.

III. Это третий элемент списка.

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

Чтобы задать маркер, вы должны присвоить свойству display в псевдоэлементе: before или: after значение marker. Если содержимое псевдоэлемента: before или: after, которое относится к типу block или inline, является частью главного блока генерируемого элемента, то содержимое типа marker формируется в отдельный блок маркера, находящийся вне главного блока. Блоки маркеров формируются в виде отдельной строки. Следует также отметить, что блок маркера создается только тогда, когда свойство content псевдоэлемента генерирует какое-то содержимое.

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

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

Высоту блока маркера вы можете задать свойством line-height. Блок маркера, связанный с псевдоэлементом: before или: after, принимается во внимание при вычислении высоты первого или последнего линейного блока, содержащегося в главном блоке. Таким образом, маркеры выравниваются по первой или по последней строке содержимого элемента, даже если блоки маркеров располагаются в отдельных линейных блоках.

Вертикальное выравнивание внутри блока маркера определяется свойством vertical-align.

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

Для маркера также можно изменять величину горизонтального интервала, используя свойство marker-offset. Это свойство задает расстояние между блоком маркера и связанным с ним главным блоком. Расстояние измеряется между их ближайшими краями границ.

Если для свойства display элемента задано CSS-правило display: list-item и устанавливается значение marker, то блок маркера, генерируемый для псевдоэлемента: before, заменяет обычный маркер элемента списка.

Создадим такую страницу, в которой содержимое располагается по центру внутри блока маркера фиксированной ширины 6 em (листинг 9.9).

Листинг 9.9. Выравнивание содержимого в блоке маркера

Глава .9 Выравнивание содержимого в блоке маркера

  1. Это первый элемент.

  2. Это второй элемент.

  3. Это третий элемент.

Если вы откроете документ, представленный в листинге 9.9, в браузере, то увидите следующее:

(1) Это первый элемент.

(2) Это второй элемент.

(3) Это третий элемент.

Рассмотрим еще один пример (листинг 9.10). В нем маркеры создаются перед элементами списка и после них.

Листинг 9.10. Маркеры перед элементами списка и после них

Глава 9. Маркеры перед элементами списка и после них

  • первый элемент СЃРїРёСЃРєР° располагается первым

  • второй элемент СЃРїРёСЃРєР° располагается вторым

В результате обработки браузером документа из листинга 9.10 вы получите следующее:

:-) первый элемент списка располагается первым :-(

:-) второй элемент списка располагается вторым :-(

Рассмотрим еще один пример, где маркеры используются для нумерации абзацев-заметок (листинг 9.11).

Листинг 9.11. Маркеры, используемые для создания нумерованных заметок

глава 9. Маркеры, использующиеся для создания нумерованных заметок

Это первый абзац в данном документе.

Это очень короткий документ.

Конец.

В результате выполнения документа из листинга 9.11 получим следующее:

Это первый абзац в данном документе.

Примечание 1: Это очень короткий документ.

Конец.

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

Разберем это свойство на примере. Создадим страницу, в которой маркеры используются для добавления точек после каждого элемента нумерованного списка, и зададим область для маркеров списка шириной 8 em (листинг 9.12).

Листинг 9.12. Пример маркера

Глава 9. Пример маркера

Это предыдущий абзац ...

  1. Это первый элемент списка.

  2. Это второй элемент списка.

  3. Это третий элемент списка.

Это следующий абзац ...

В результате получим следующее:

Это предыдущий абзац ...

I. Это первый элемент списка.

II. Это второй элемент списка.

III. Это третий элемент списка.

Это следующий абзац ...

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

 

9.4. Таблицы

 

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

 

Селекторы столбцов

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

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

• border – задает различные свойства границы столбцам, но работает, только если для свойства border-collapse в элементе таблицы установлено значение collapse.

• background – определяет фон для ячеек в столбце.

• width – определяет ширину столбца.

• visibility – если свойству столбца visibility присвоено значение collapse, то ни одна ячейка столбца не представляется, а ячейки, охватывающие другие столбцы, урезаются. Кроме того, ширина таблицы уменьшается на ширину этого столбца. Другие значения свойства visibility не имеют влияния на отображение.

Рассмотрим несколько строк CSS-кода, определяющих свойства столбцов:

col.totals { background: blue }

table { table-layout: fixed }

col.totals { width: 5em }

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

 

Положение и выравнивание заголовка

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

• top – над полем таблицы;

• bottom – ниже поля таблицы;

• left – слева от поля таблицы;

• right – справа от поля таблицы.

Заголовки, расположенные ниже или выше элемента TABLE, форматируются подобно элементам блока, находящимся ниже или выше таблицы, с тем исключением, что они:

• наследуют наследуемые свойства таблицы;

• не считаются блоками для элементов compact или run-in, которые могут предшествовать таблице.

Заголовок, находящийся ниже или выше поля таблицы, действует как блок для вычисления ширины; она вычисляется относительно ширины содержащего блока таблицы.

Для заголовка, располагающегося в правой или левой части поля таблицы, значение свойства width, отличное от auto, явным образом устанавливает ширину, в то время как значение auto предписывает браузеру выбрать ширину самому. Значение, выбранное браузером автоматически, может колебаться от «самого узкого блока» до «одной строки», поэтому рекомендуется не указывать значение auto для установки ширины левого и правого заголовка.

Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используйте свойство text-align. Для вертикального выравнивания левого и правого блока заголовка относительно блока таблицы используйте свойство vertical-align. В этом случае смысл имеют только значения top, middle и bottom. Все другие значения данного свойства будут трактоваться браузером как top.

Чтобы лучше разобраться с данным свойством, рассмотрим пример.

caption {

caption-side: bottom;

width: auto;

text-align: left

}

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

Теперь рассмотрим более сложный пример.

body {

margin-left: 8em

}

table {

margin-left: auto;

margin-right: auto

}

caption {

caption-side: left;

margin-left: -8em;

width: 8em;

text-align: right;

vertical-align: bottom

}

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

 

Слои и прозрачность таблицы

Чтобы определить фон каждой ячейки таблицы, браузер разбивает различные элементы таблицы на шесть слоев (рис. 9.3). Фон элемента, установленный в одном из слоев, будет видим, только если у расположенных выше слоев фон прозрачный.

Рис. 9.3. Схема слоев таблицы

Рассмотрим каждый слой таблицы подробно снизу вверх.

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

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

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

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

5. Предпоследний слой содержит строки. Строки также занимают всю таблицу.

6. Самый верхний слой содержит собственно ячейки. Как показано на рис. 9.3, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. «Пустые» ячейки считаются прозрачными, поэтому через них будут видны нижние слои.

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

Листинг 9.13. Форматирование таблиц средствами CSS

1

2

3

4

Документ, представленный в листинге 9.13, будет выглядеть, как показано на рис. 9.4.

Рис. 9.4. Таблица с тремя пустыми ячейками в нижней строке

Теперь рассмотрим, как можно изменять ширину таблицы свойствами CSS.

 

Ширина таблицы

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

• fixed – горизонтальное положение таблицы не зависит от содержимого ячеек; оно зависит только от ширины таблицы, ширины столбцов и расстояния между границами или ячейками. Ширина таблицы может указываться явным образом с помощью свойства width либо может быть равной auto.

• auto – браузер автоматически размещает таблицу. Ширина таблицы задается шириной столбцов и расстоянием между границами.

 

Высота таблицы

Высоту таблицы можно задать, используя свойство height для элемента TABLE. Как и для ширины, вы можете оставить выбор высоты браузеру, используя значение auto, либо задать значение числом и указать единицу измерения.

Используя свойство height, вы также можете задавать высоту поля элемента table-row, то есть высоту строк.

 

Вертикальное выравнивание

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

• baseline – базовая линия ячейки располагается на той же высоте, что и базовая линия первой строки, занимаемой ячейкой.

• top – верх блока ячейки совпадает с верхом первой строки, занимаемой ячейкой.

• bottom – низ блока ячейки совпадает с низом последней строки, занимаемой ячейкой.

• middle – середина ячейки совпадает с серединой строк, занимаемых ячейкой.

• sub, super, text-top, text-bottom – эти значения не применяются к ячейкам. В случае их использования ячейка выравнивается по базовой линии.

 

Горизонтальное выравнивание

Горизонтальное выравнивание содержимого ячейки устанавливается свойством text-align. Если в качестве значения свойства text-align для нескольких ячеек в столбце задана строка текста, то содержимое этих ячеек выравнивается относительно вертикальной оси. Начало строки соприкасается с этой осью. Расположение строки слева или справа относительно оси определяется направлением текста. Если значением свойства text-align для ячейки таблицы является строка, но этой строки нет в содержимом ячейки, то конец содержимого соприкасается с вертикальной осью выравнивания.

Это станет понятно из примера. Создадим следующую таблицу стиля:

td { text-align: "." }

td:before { content: "$" }

Создадим также HTML-документ, который имеет следующий фрагмент кода:

Плата за междугородние звонки

1.30

2.50

10.80

111.01

85.

90

.05

.06

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

Браузер клиента представит на странице эту таблицу следующим образом:

Плата за междугородние звонки

$1.30

$2.50

$10.80

$111.01

$85.

$90

$.05

$.06

 

Динамические эффекты строк и столбцов

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

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

 

Границы

Для задания границ вы можете использовать следующие свойства: border, border-collapse и border-spacing.

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

Свойство border-collapse позволяет выбрать модель границ таблицы. Значение separate задает модель с отдельными границами. Значение collapse задает модель с пересекающимися границами.

Свойство border-spacing может принимать сразу два значения длины. Заданная длина обозначает расстояние между границами соседних ячеек. Если указана одна длина, то она определяет расстояние по горизонтали и по вертикали. Если указаны оба значения, то первое определяет расстояние по горизонтали, а второе – по вертикали. Естественно, длины не могут быть отрицательными.

Рассмотрим простой пример задания границы для таблиц на странице:

table { border: outset 10pt;

border-collapse: separate;

border-spacing: 15pt }

td { border: inset 5pt }

Этот CSS-код создаст вокруг таблицы выпуклую границу размером 10 пунктов. Поскольку задано значение separate свойства border-collapse, то для ячеек будут созданы вдавленные границы размером 5 пунктов. Расстояние между ячейками будет составлять 15 пунктов.

 

Стили границ

Помимо размера, CSS предоставляет возможность задавать стиль границ таблицы. Для этого используется свойство border-style. Рассмотрим список значений данного свойства и их описания.

• none – граница отсутствует.

• hidden – аналогично значению none, но в модели с пересекающимися границами имеет приоритет над любыми другими границами.

• dotted – граница представляется рядом точек.

• dashed – граница представляется рядом коротких линейных сегментов.

• solid – граница представляется единым сегментом линии.

• double – граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равна значению border-width.

• groove – граница выглядит вдавленной.

• ridge – в противоположность groove, граница выглядит выпуклой.

• inset – в модели с отдельными границами весь блок выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение groove.

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

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

 

Пустые ячейки

CSS позволяет определить, отображать ли границы пустых ячеек. Вы можете задать отображение пустых ячеек, используя свойство CSS empty-cells. Это свойство управляет представлением границ вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству visibility присвоено значение hidden.

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

table { empty-cells: show }

 

9.5. Интерфейс пользователя

 

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

 

Указатели мыши

Средства CSS позволяют задавать указатель мыши свойством cursor. Данное свойство может принимать следующие значения.

• auto – браузер определяет отображаемый указатель исходя из контекста.

• crosshair – простое перекрестие (напоминающее символ +).

• default – указатель, используемый в данной операционной системе по умолчанию. Зачастую представляется в виде стрелки.

• pointer – указатель, обозначающий ссылку.

• move – указатель, определяющий объект, который можно переместить.

• e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – указатель, определяющий перемещение некоторого края. Например, при перемещении, начинающемся с правого нижнего угла блока, используется указатель se-resize. Первые буквы в этом значении – это первые буквы частей света South и East.

• text – указатель, используемый при выделении текста. Зачастую представляется в виде вертикальной линии |.

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

• help – указатель, означающий, что для объекта, на который он указывает, имеется справочная информация. Зачастую представляется в виде вопросительного знака или воздушного шара.

• hand – указатель представляет собой «руку». Зачастую такой указатель используется для ссылок.

• uri_адрес_файла – при данном значении браузер пользователя загружает файл указателя, задаваемого этим URL-адресом.

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

p { cursor : url(В«mything.curВ»), url(В«second.csrВ»), text; }

В этом примере при наведении на содержимое элемента P указатель мыши станет таким, какой задан в файле mything.cur. Если браузер не сможет загрузить данный файл указателя, он попробует загрузить файл second.csr и отобразить указатель, изображенный в этом файле. Если и этот файл окажется недоступным, браузер отобразит указатель, используемый при выделении текста.

 

Пользовательские настройки цветов

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

• ActiveBorder – граница активного окна.

• ActiveCaption – заголовок активного окна.

• AppWorkspace – фон мультидокументного интерфейса.

• Background – фон Рабочего стола.

• ButtonFace – «лицевая» сторона объемных элементов.

• ButtonHighlight – насыщенная тень для объемных элементов (ребер, находящихся в тени).

• ButtonShadow – тень объемных элементов.

• ButtonText – текст на кнопках.

• CaptionText – текст в заголовках, в элементах управления размерами и элементах полосы прокрутки.

• GrayText – отключенный (недоступный) текст. Если текущий драйвер дисплея не поддерживает насыщенно-серый цвет, то для этого цвета устанавливается значение #0 0 0.

• Highlight – объекты, выделяемые в элементах управления.

• HighlightText – текст в объектах, выделенных в элементах управления.

• InactiveBorder – граница неактивного окна.

• InactiveCaption – заголовок неактивного окна.

• InactiveCaptionText – текст в неактивном заголовке.

• InfoBackground – фон всплывающей подсказки.

• InfoText – текст всплывающей подсказки.

• Menu – фон меню.

• MenuText – текст в меню.

• Scrollbar – полоса прокрутки.

• ThreeDDarkShadow – насыщенная тень для объемных элементов.

• ThreeDFace – «лицевая» сторона объемных элементов.

• ThreeDHighlight – выделенные объемные элементы.

• ThreeDLightShadow – объемные элементы (ребра, расположенные «лицом» к источнику света).

• ThreeDShadow – насыщенная тень для объемных элементов.

• Window – фон окна.

• WindowFrame – рамка окна.

• WindowText – текст в окне.

Рассмотрим CSS-код:

body { background: Background; }

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

 

Пользовательские настройки шрифтов

Наряду с заданием пользовательских настроек цвета вы можете указывать пользовательские настройки шрифтов. Рассмотрим список доступных значений, относящихся к системным шрифтам, и их описание.

• caption – используется для заголовков элементов управления (кнопок, выпадающих меню и т. д.).

• icon – применяется для обозначения пиктограмм.

• menu – используется в меню (например, в выпадающих меню и списках меню).

• message-box – применяется в диалоговых окнах.

• small-caption – используется для обозначения небольших элементов управления.

• status-bar – применяется в панелях, описывающих статус окон.

Рассмотрим пример:

h1 { font: caption; }

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

 

Контуры

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

• контуры вообще не занимают места;

• они могут иметь непрямоугольную форму.

Для задания контура используются свойства outline-width, outline-style и outline-color.

Для более компактной записи можно использовать свойство outline. Это сокращенное свойство, которое устанавливает значения для всех трех свойств outline-style, outline-width и outline-color. Рассмотрим их подробнее.

• outline-style – задает стиль контура и может принимать такие же значения, как и свойство границы border-style, за исключением значения hidden: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

• outline-width – определяет размер контура.

• outline-color – принимает те же значения, что и ключевое слово invert, осуществляющее инверсию цветов, используемых для отображения пикселов на экране. Этот традиционный прием используется для того, чтобы независимо от цвета фона контур был всегда виден.

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

:focus { outline: thick solid black }

:active { outline: thick solid red }

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

 

9.6. Поля и отступы

 

В этом разделе мы разберем важный момент при создании веб-страниц – задание полей и отступов. Итак, начнем с полей.

 

Свойства полей

Как отмечалось выше, отображая каждый элемент, браузер как бы создает прямоугольный блок, внутри которого и размещается содержимое элемента. Свойства полей определяют ширину области поля блока. Свойство margin позволяет управлять шириной всех четырех полей. Вы также можете указывать одно из следующих свойств: margin-top, margin-right, margin-bottom, margin-left либо некоторые из них в любой комбинации, чтобы задать значения полей только для отдельных сегментов.

Все свойства margin могут принимать следующие значения.

• «длина» – вы указываете фиксированную ширину поля.

• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.

• auto – браузер задает значение поля автоматически. Соответственно, разные браузеры будут использовать разные значения.

Рассмотрим пример – небольшое правило CSS, которое устанавливает значение ширины верхнего поля, равное 2 em.

H1 { margin-top: 2em }

Подробнее разберем сокращенную запись этих свойств – margin. Согласитесь, не очень-то удобно каждый раз набирать следующий код:

body {

margin-top: 2em;

margin-right: 2em;

margin-bottom: 2em;

margin-left: 2em;

}

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

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

Напоследок рассмотрим такой пример:

body { margin: 1em 2em 3em }

Применив эту таблицу стилей к HTML-документу, вы установите ширину верхнего, правого, нижнего и левого полей страницы равной 1 em, 2 em, 3 em и 2 em соответственно.

 

Свойства отступов

Свойства отступов позволяют задать ширину области отступов блока.

Всего существует четыре свойства отступов: padding-top, padding-right, padding-bottom и padding-left, которые задают верхний, правый, нижний и левый отступы соответственно. Эти свойства можно комбинировать. Свойства padding могут принимать одно из следующих значений.

• «длина» – вы указываете фиксированную ширину поля.

• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.

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

Свойство padding является сокращенной записью всех четырех свойств отступов: padding-top, padding-right, padding-bottom и padding-left. Свойство padding работает, как и сокращенная запись для полей. Если свойство принимает только одно значение, то оно применяется ко всем отступам. Если свойство принимает два значения, то первое применяется к верхнему и нижнему отступам, а второе – к правому и левому отступам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему отступу. Если свойство принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому отступам соответственно.

Фон отступов будет использовать цвет или изображение, заданные этому элементу с помощью свойства background:

h1 {

background: white;

padding: 1em 2em;

}

В приведенном примере ширина вертикальных (padding-top и padding-bottom) и горизонтальных (padding-right и padding-left) отступов устанавливается равной 1 em и 2 em соответственно. Напомню, что единица измерения em задается относительно размера шрифта элемента: 1 em равен размеру используемого шрифта.

 

9.7. Границы

 

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

 

Ширина границы

Рассмотрим свойства border-top-width, border-right-width, border-bottom-width, border-left-width, которые определяют значение ширины верхней, правой, нижней и левой границы элемента страницы соответственно. Все свойства, рассматриваемые в данном разделе, могут принимать одно из следующих значений:

• thin – тонкая граница;

• medium – граница средней толщины;

• thick – толстая граница;

• «длина» – толщина границы задается числом. Естественно, что число, заданное в качестве значения ширины границы, не может быть отрицательным.

Надо отметить, что каждый браузер будет по-своему устанавливать числовое значение для ключевых слов thin, medium и thick, соблюдая такое правило: thin <= medium <= thick.

Для границ также существует свойство border-width, позволяющее одновременно установить значения всем четырем свойствам: border-top-width, border-right-width, border-bottom-width и border-left-width. Причем, если задать для border-width только одно значение, оно будет применяться ко всем границам. Если задать два значения, то первое будет применяться к верхней и нижней границам, а второе – к правой и левой. Если указать три значения, то первое значение будет применяться к верхней границе, второе – к левой и правой, а третье – к нижней границе. Если же задать четыре значения, то они будут применяться к верхней, правой, нижней и левой границам соответственно.

Рассмотрим три CSS-правила:

h1 { border-width: thin } /* тонкая */

h1 { border-width: thin thick } /* тонкая толстая */

h1 { border-width: thin medium thick } /* тонкая средняя толстая */

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

Теперь рассмотрим, как можно задавать границе цвет.

 

Цвет границы

Как и для ширины, для задания цвета существует четыре свойства для четырех сторон: border-top-color, border-right-color, border-bottom-color, border-left-color и сокращенная запись – border-color. Они задают цвет верхней, правой, левой и нижней границ соответственно. Для всех этих свойств вы можете либо задать значения цвета, либо использовать ключевое слово transparent, которое сделает границу прозрачной. Если задать значение transparent, то граница будет невидимой, даже если она имеет какую-то ширину.

Рассмотрим такой пример: p {

p {

border-width: 2px

border-color: blue;

}

Для элемента P будет создана граница синего цвета размером два пиксела.

 

Стиль границы

Для задания стиля границы используются следующие свойства: border-top-style, border-right-style, border-bottom-style, border-left-style и сокращенная запись – border-style. Свойства стиля границы определяют стиль линии (сплошная, двойная, пунктирная и т. д.), выступающей в качестве границы. Все свойства могут принимать одно из следующих значений.

• none – граница отсутствует. В результате значение свойства border-width будет равно нулю.

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

• dotted – граница отображается пунктирной линией.

• dashed – граница выводится штрихпунктирной линией.

• solid – граница отображается сплошной линией.

• double – граница выводится двумя непрерывными линиями. Сумма значений ширины двух линий и расстояния между ними равна значению свойства border-width.

• groove – граница отображается вдавленной линией.

• ridge – противоположно значению groove: граница отображается выпуклой линией.

• inset – весь блок выглядит вдавленным.

• outset – противоположно значению inset: весь блок выглядит выпуклым.

Все границы выводятся поверх фоновой заставки блока. Цвет границ для значений groove, ridge, inset и outset зависит от значения свойства элемента color.

Свойство border-style определяет стиль всех четырех сегментов границ. Оно может иметь от одного до четырех значений, каждое из которых присваивается различным сегментам подобно тому, как это происходит у свойства border-width.

Рассмотрим такой пример:

#xyz { border-style: solid dotted }

Здесь горизонтальные сегменты границы будут иметь значение solid, а вертикальные – dotted.

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

 

9.8. Работа с блоками

 

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

 

Выбор схемы позиционирования

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

Рассмотрим значения этого свойства и их интерпретацию браузером.

• static – является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства left и top не применяются.

• relative – положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока применяется модель относительного позиционирования, положение следующего блока рассчитывается так, как будто блок не был смещен.

• absolute – положение блока (возможно, и размер) указывается свойствами left, right, top и bottom. Они определяют величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются никакими другими полями.

• fixed – положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). Вы также имеете возможность сделать определение значения fixed аппаратно-зависимым. Например, вы можете сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но на печатной странице этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано на примере ниже:

@media screen {

h1#first { position: fixed }

}

@media print {

h1#first { position: static }

}

 

Смещение блоков

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

• top – задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.

• right – определяет смещение правого сегмента внутренней краевой линии влево относительно правого сегмента краевой линии контейнера блока.

• bottom – задает смещение нижнего сегмента внутренней краевой линии вверх относительно нижнего сегмента краевой линии контейнера блока.

• left – определяет смещение левого сегмента внутренней краевой линии вправо относительно левого сегмента краевой линии контейнера блока.

Значения этих четырех свойств имеют следующий смысл.

• «длина» – смещение задается фиксированным значением расстояния от исходной краевой линии.

• «проценты» – смещение задается процентным соотношением относительно ширины (для свойств left и right) или высоты (для свойств top и bottom) контейнера. Если высота контейнера не указана точно, то есть зависит от высоты содержимого, то процентное соотношение, определяющее значение свойств top и bottom, интерпретируется как значение auto.

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

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

 

Позиционирование перемещаемого объекта

Перемещаемый объект – это блок, который смещается по строке в левую или правую сторону. Свойство float определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов, порождающих блоки, не являющиеся абсолютно позиционируемыми. Значения данного свойства имеют следующий смысл.

• left – элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства clear). Свойство display игнорируется, если ему не присвоено значение none.

• right – подобно значению left с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха.

• none – блок не перемещается.

Следующее правило перемещает все блоки, порожденные элементом IMG с атрибутом class="icon", влево и устанавливает значение ширины поля равным нулю:

IMG.icon {

float: left;

margin-left: 0;

}

Рассмотрим исходный HTML-документ и таблицу стилей на примере из листинга 9.14.

Листинг 9.14. Пример перемещаемого объекта

Глава 9. Пример перемещаемого объекта

Данный рисунок иллюстрирует перемещаемые объекты

Пример текста, у которого нет другого...

Блок, порожденный элементом IMG, перемещается влево. Следующее за ним содержимое форматируется справа от него, начиная с той же строки, на которой находится он сам. Присутствие перемещаемого объекта влияет на то, что, пока линейные блоки находятся справа от него, они укорачиваются, но как только они достигают его конца, сразу восстанавливают свою исходную ширину (равную ширине контейнера, назначенного элементом P). Приведенный документ может быть отформатирован следующим образом:

Произвольный текст,

Данный рисунок иллюстрирует перемещаемые объекты

у которого нет другого...

Это объясняется тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.

 

Фиксированное позиционирование

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

Вы можете использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации, представленный на рис. 9.5.

Рис. 9.5. Фиксированное позиционирование

Подобного эффекта можно достичь с помощью HTML-кода и правил стиля, представленных в листинге 9.15.

Листинг 9.15. Создание кадров в CSS

Глава 9. Создание кадров в CSS

...

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

 

Определение позиционного уровня

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

• «целое число» – является значением позиционного уровня сгенерированного блока в текущем контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем 0.

• auto – позиционный уровень блока в текущем контексте совпадает с позиционным уровнем родительского блока.

Рассмотрим пример, приведенный в листинге 9.16. В этом примере позиционные уровни блоков именуются с использованием атрибута id. Причем позиционный уровень text2 наследуется от корневого блока. Другие уровни указываются свойством z-index.

Листинг 9.16. Позиционирование вдоль оси z

Глава 9. Позиционирование вдоль оси z

src="someimg.gif" alt="Картинка"

style="z-index: 1">

style="z-index: 3">

Этот текст будет находиться поверх изображения.

Этот текст будет находиться под всем остальным.

style="z-index: 2">

Этот текст будет находиться ниже текста text1, но поверх изображения.

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

 

Резюме

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