Добро пожаловать!
Здесь вы можете найти ответ на интересующий вас вопрос в отрасли сайтостроения, познакомится ближе с web технологиями и web стандартами.

CSS2

Глава 2. Форматирование документа средствами CSS2.

Содержание:

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

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

Сам блок представляет собой несколько вложенных друг в друга прямоугольных областей. В самой внутренней области и помещается информативное содержание HTML-элемента (рис. 2.1).

Области стилевых блоков
Рис. 2.1  Области стилевых блоков.

Под HTML-элементы, являющиеся строковыми, стилевые блоки не выделяются. Например, согласно блочной модели документа, визуальное представление абзаца (элемента <p>) будет иметь вид, представленый на рис. 2.2.

Демонстрация внешнего вида блока абзаца
Рис. 2.2  Демонстрация внешнего вида блока абзаца.

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

  • фоновое оформление информативной области задается CSS-свойствами HTML-элемента, начинающимися со слова background;
  • область отступов также использует для своего фона свойство background HTML-элемента, породившего данный блок;
  • область границы сама имеет свои свойства, устанавливающие ее фоновое оформление;
  • область поля всегда является прозрачной и служит только для корректировки расположения блока на Web-странице. Поэтому в качестве цвета области поля используется цвет, установленный свойством background родительского по отношению к текущему HTML-элемента.

Как уже говорилось ранее, универсальным элементом уровня блока является элемент div, универсальным строковым элементом — элемент span. Смысл их использования заключается только в привнесении структуры в HTML-документ. Как элементы HTML, они не задают никаких визуальных параметров для своего содержимого. Информация между начальным и конечным тегами элементов div и span считается блоком или строкой соответственно.

В рамках блочной модели представления документов использование этих элементов принимает особое значение. Например, благодаря элементу div можно выделить как блок группу строковых элементов или фрагмент текста, что автоматически позволяет применять CSS-свойства, соответствующие блокообразующим элементам. То же самое можно было бы сделать с помощью элемента <p> (элемента абзаца), но иногда, с точки зрения смысловой организации структуры документа, было бы правильнее использовать универсальный элемент блока div. К тому же использование элемента абзаца приведет к выделению его содержимого пустыми строками сверху и снизу. То есть элемент <p>, как элемент с четко определенным смысловым значением (элемент <p> — элемент абзаца), привносит свойственные ему особенности визуального представления. Элемент div всего этого лишён, предоставляя разработчику самому определить его смысловое значение и особенности внешнего вида.

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

  • горизонтальный размер:
    • левое поле (margin-left);
    • левая граница (border-left);
    • левый отступ (padding-left);
    • ширина информативной области (атрибут width блокообразующего элемента, который также может указываться в таблице стилей);
    • правый отступ (padding-right);
    • правая граница (border-right);
    • правое поле (margin-right).
  • вертикальный размер вычисляется аналогично горизонтальному с той разницей, что вместо правых и левых (left и right) суммируются верхние и нижние (top и bottom) размеры соответствующих областей. Наглядно это представлено на рис. 2.3.
Схема стилевого блока
Рис. 2.3  Схема стилевого блока с указанием CSS-свойств, задающих размеры соответствующих областей.

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

Вертикальные поля "плавающих" элементов (для которых задано свойство float) никогда не перекрываются.

Далее по тексту будет произведено подробное описание свойств различных областей стилевого блока.

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

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

  • margin-left — размер левого поля;
  • margin-right — размер правого поля;
  • margin-top — размер верхнего поля;
  • margin-bottom — размер нижнего поля.

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

<html>
<head>
<title>Пример внедренной таблицы стиля </title>
<style type ="text/css">
p { margin-left: 10 px;
    margin-right: 10 px;
    margin-top: 12 px }
</style>
</head>
<body>
.....текст документа.....
<p>
.....текст абзаца.....
.....текст абзаца.....
</p>
.....текст документа
</body>
</html>

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

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

p { margin: 12рх 10рх 0рх 16рх }

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

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

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

  • padding-left — размер левого отступа;
  • padding-right — размер правого отступа;
  • padding-top — размер верхнего отступа;
  • padding-bottom — размер нижнего отступа.

Размеры также указываются в стандартных для CSS2 значениях длины или в процентном задании от ширины ближайшего родительского элемента. Сокращенная форма задания размеров всех четырех отступов осуществляется с помощью правила padding. Например:

pre { background: lightgrey;
      color: blue;
      padding: 10рх 15px 10px 15px }

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

2.4. Свойства границ.

Границы представляют собой обыкновенные линии, ограничивающие видимую часть стилевого блока (поля являются прозрачными и поэтому невидимы). Определенные в CSS2 свойства позволяют задавать толщину, цвет и тип этих линий.

2.4.1. Ширина границ.

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

  • border-top-width — ширина верхней границы;
  • border-bottom-width — ширина нижней границы;
  • border-right-width — ширина правой границы;
  • border-left-width — ширина левой границы.

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

  • thin — тонкая линия границы;
  • medium — средняя линия границы;
  • thick — толстая линия границы.

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

Единственное, что можно сказать со всей уверенностью, так это то, что ширина границы thin меньше ширины границы medium, которая, в свою очередь, меньше ширины границы thick.

Пример задания границ:

div { padding: 10 10 10 10;
      border-top-width: 5px;
      border-bottom-width: 5px;
      border-right-width: thin;
      border-left-width: thin }

Или тоже самое, но с использованием стенографического свойства border-width:

div { padding: 10рх 10рх 10px 10px;
      border-width: 5px thin 5px thin }

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

<html>
<head>
<title>
Демонстрация рамок, толщина которых задала ключевыми
словами thin, medium и thick.
</title>
<style type="text/css">
div { margin: 20;
      padding: 20;
      text-align: center;
      border-width: thin;
      border-style: solid;
      border-color: black }
div.2 { border-width: medium }
div.3 { border-width: thick }
</style>
</head>
<body bgcolor="white">
<h3 align="center">
Демонстрация рамок, толщина которых задана ключевыми словами
</h3>
<div>
Границы этого блока имеют толщину thin
</div>
<div class="2">
Границы этого блока имеют толщину medium
</div>
<div class="3">
Границы этого блока имеют толщину thick
</div>
</body>
</html>
Границы этого блока имеют толщину thin
Границы этого блока имеют толщину medium
Границы этого блока имеют толщину thick
Рис. . Вид рамок с различными значениями border-width.

2.4.2. Цвет границ.

Цвет границ определяется следующими свойствами:

  • border-top-color — цвет верхней границы;
  • border-bottom-color — цвет нижней границы;
  • border-right-color — цвет правой границы;
  • border-left-color — цвет левой границы.

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

p { padding: 10px 10px 10px 10px;
    border-width: 5px thin 5px thin;
    border-color: blue red blue red }

2.4.3. Тип линии границ.

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

  • none — граница определена как отсутствующая. При таком задании значение border-width устанавливается равным нулю;
  • solid — граница будет отображаться в виде одной сплошной линии. Если атрибут border-width не задан, то по умолчанию используется значение border-width: medium;
  • double — граница будет очерчена двумя сплошными линиями. Причем свойство border-width будет показывать суммарную толщину двух этих линий и расстояния между ними;
  • dotted — граница будет отображена в виде пунктирной линии;
  • groove — граница будет показана как вдавленная линия;
  • ridge — граница будет отображенв в виде выпуклой линии;
  • inset — при задании такого типа границ, весь блок будет отображен как вдавленный;
  • outset — указание этого значения при задании типа границ приведет к тому, что весь блок будет отображен как выпуклый.

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

  • border-top-style — задает тип верхней границы;
  • border-bottom-style — задает тип нижней границы;
  • border-left-style — задает тип левой границы;
  • border-right-style — задает тип правой границы.

Или с помощью одного стенографического свойства border-style могут быть указаны типы всех четырех границ сразу. Пример задания:

pre { border-style: double }
div { border-top-style: single; border-bottom-style: single;
      border-left-style: none; border-right-style: none }

Порядок задания типов линий границ для свойства border-style идентичен порядку, определеному для всех предыдущих аналогичных свойств: верхняя граница, правая, нижняя и левая. Пример использования (рис. 2.5):

<html>
<head>
<title>Примеры рамок разного стиля</title>
<style type="text/css">
div { margin: 10;
      padding: 5;
      text-align: center;
      border-style: solid;
      border-color: red;
      border-width: medium }
</style>
</head>
<body bgcolor=white>
<h3 align="center">Демонстрация рамок разного стиля</h3>
<div>
Границы этого блока имеют стиль solid
</div>
<div style="border-width: 10; border-style: double">
Границы этого блока имеют стиль double
</div>
<div style="border-width: 15; border-style: groove">
Границы этого блока имеют стиль groove
</div>
<div style="border-width: 15; border-style: ridge">
Границы этого блока имеют стиль ridge
</div>
<div style="border-width: 15; border-style: inset">
Границы этого блока имеют стиль inset
</div>
<div style="border-width: 15; border-style: outset">
Границы этого блока имеют стиль outset
</div>
</body>
</html>
Демонстрация границ разного стиля
Рис. 2.5  Демонстрация границ разного стиля.

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

  • border-top — ширина, тип линии и цвет верхней границы;
  • border-bottom — ширина, тип линии и цвет нижней границы;
  • border-left — ширина, тип линии и цвет левой границы;
  • border-right — ширина, тип линии и цвет правой границы.

Пример использования:

h3 { border-bottom: 10px solid blue }

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

Например:

pre { border-color: green;
      border-top: double;
      border-bottom: double }

В этом случае для элемента pre задан зеленый цвет всех границ. Однако верхняя и нижняя границы будут показаны черным цветом (цветом, используемым по умолчанию для вывода текста). Это произойдет потому, что свойства border-top и border-bottom, помимо типа линии границы, определяют ее цвет и толщину. Так как цвет разработчиком не указан, то эти свойства используют цвет, установленный для элемента pre по умолчанию, то есть черный. А поскольку свойства border-top и border-bottom по тексту заданы после свойства border-color, то они переопределяют его значение. Чтобы этого не происходило, достаточно следующим образом поменять их местами:

pre { border-top: double;
      border-bottom: double;
      border-color: green }

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

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

Любопытно обстоит дело с заданием полей, границ и отступов для элемента body. Браузер Mozilla Firefox воспринимает его как его как обычный блокообразующий элемент и обращается с ним соответствующим образом. Рассмотрим это на примере. В окне Mozilla Firefox приведенный ниже документ будет иметь вид, как на рис. 2.6.

<html>
<head>
<title>
Пример задания свойств полей, границ и отступов для элемента body
</title>
<style type="text/css">
body { margin: 40px;
       padding: 40px;
       border: 40px solid blue;
       text-align: justify;
       background-color: yellow }
h3 { border: 2px solid red }
p { border: 2px solid red }
</style>
</head>
<body>
<h3 align=center>Голубой воришка.</h3>
<p>
Завхоз 2-го дома Старсобеса был застенчивый ворюга. Все существо
его протестовало против краж, но не красть он не мог. Он крал, и
ему было стыдно. Крал он постоянно, постоянно стыдился, и поэтому
его  хорошо  бритые  щечки  всегда  горели  румянцем  смущения,
стыдливости, застенчивости и конфуза. Завхоза звали Александром
Яковлевичем, а жену его — Александрой Яковлевной. Он называл ее
Сашхен, она звала его Альхен. Свет не видывал еще такого голубого
воришки, как Александр Яковлевич.
</p>
</body>
</html>
Пример документа с заданными размерами полей, границ и отступов элемента body, открытого в браузере Mozilla Firefox
Рис. 2.6  Пример документа с заданными размерами полей, границ и отступов элемента body, открытого в браузере Mozilla Firefox.

Аналогично обстоит дело с браузером Opera (рис. 2.7):

Пример документа с заданными размерами полей, границ и отступов элемента body, открытого в браузере Opera
Рис. 2.7  Пример документа с заданными размерами полей, границ и отступов элемента body, открытого в браузере Opera.

Самое интересное начинается при открытии этого документа в браузере Internet Explorer. При этом для элемента body поля и границы меняются местами. Таким образом, у стилевого блока элемента body сначала идут границы, затем поля и потом отступы (рис. 2.8).

Пример документа с заданными размерами полей, границ и отступов элемента body, открытого в браузере Internet Explorer
Рис. 2.8  Пример документа с заданными размерами полей, границ и отступов элемента body, открытого в браузере Internet Explorer.

2.5. Задание цвета текста и фона.

Как уже упоминалось, каскадные таблицы стилей были задуманы для наиболее эффективного задания внешнего вида содержимого HTML-элементов, который они принимают в окне браузера. А что же, как не цветовое оформление является основной визуальной характеристикой. Для каждого отображаемого HTML-элемента может быть указано два цвета: цвет фона и цвет переднего плана. На переднем плане отображается информативное содержимое элемента, проще говоря — текст. В CSS2 цвет текста задается единственным, предназначенным для этих целей свойством color. Цвет указывается одним из стандартных, определенных в CSS2 способов: ключевым словом или RGB-функцией, например:

p { color: olive }
b { color: rgb (255,0,0) }

Для описания фонового оформления элемента в CSS2 определено несколько возможностей. При этом фон можно задать с помощью следующих свойств:

  • background-color — указывает цвет фона.
  • background-image — указывает фоновое изображение. Причем для этого случая может быть задано несколько дополнительных параметров фона:
    • background-repeat — указывает наличие или отсутствие дублирования фонового изображния как по вертикали, так и по горизонтали;
    • background-attachment — это свойство указывает на то, будет или нет фоновое изображение прокручиваться при прокрутке документа;
    • background-position — задает положение изображения в рамках стилевого блока, к которому оно принадлежит.

2.5.1. Свойство background-color.

Использование этого свойства аналогично использованию свойства color. Разница заключается в том, что для строковых элементов свойство color, определяет цвет текста, a background-color — цвет фона, на котором этот текст отображается. Свойство background-color заданное для блокообразующего элемента, указывает цвет, которым будет залито все информационное пространство стилевого блока вместе с его отступами. Пример использования (рис. 2.9):

<html>
<head>
<title>
Пример использования свойства background-color
</title>
<style type="text/css">
body { background-color: yellow }
p { margin: 30;
    padding: 30;
    text-align: justify;
    background-color: lightblue }
</style>
</head>
<body>
<h3 align=center>Голубой воришка.</h3>
<p>
Завхоз 2-го дома Старсобеса был застенчивый ворюга. Все существо
его протестовало против краж, но не красть он не мог. Он крал, и
ему было стыдно. Крал он постоянно, постоянно стыдился, и поэтому
его  хорошо  бритые  щечки  всегда  горели  румянцем  смущения,
стыдливости, застенчивости и конфуза. Завхоза звали Александром
Яковлевичем, а жену его — Александрой Яковлевной. Он называл ее
Сашхен, она звала его Альхен. Свет не видывал еще такого голубого
воришки, как Александр Яковлевич.
</p>
<p>
Он был не только завхозом,  но и вообще  заведующим.  Прежнего за
грубое  обращение с воспитанницами  сняли  с работы  и  назначили
капельмейстером симфонического оркестра. Альхен ничем не напоминал
своего невоспитанного начальника.
</p>
</body>
</html>
Пример документа, в оформлении которого использовалось свойство background-color
Рис. 2.9  Пример документа, в оформлении которого использовалось свойство background-color.

2.5.2. Свойство background-image.

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

body { background-image: URL(/myimages/bgimage.jpg) }
p { color: green;
    background-image: URL(/myimages/flowers.jpg) }

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

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

<html>
<head>
<title>
Пример использования свойства background-image для строковых
элементов
</title>
<style type="text/css">
span { background-image: URL(bgimg.jpg);
       font-weight: bold }
</style>
<body bgcolor=white>
<h3 align=center>3a6aвные политики</h3>
<span>
Что можно сказать о политике и политиках более обидного, чем то,
что говорят они сами? Джон Гэлбрейт считал, что политика — выбор
между  гибельным и неприятным, Джон Морли, английский  политик и
публицист, называл  политику  неустанным  выбором из двух зол, а
актер Питер Устинов говорил, что политика есть искусство удерживать
людей от участия в делах,  которые  их  прямо  касаются.  Не зря,
очевидно, Шарль де Голль говорил, что политика  очень  серьезное
дело,  и поэтому  доверять ее политикам  нельзя.  Ему, французу,
виднее — когда  его  соотечественнику  Талейрану  кто-то  посмел
заикнуться, что члены  палаты депутатов, конечно, не ахти какие
светочи разума, но хоть совесть имеют, тот  немедленно подтвердил:
"Да, имеют - и не одну". Кстати, о том, кто кого имеет, наиболее
четко высказался американский  режиссер  Мел  Брукс, предположив,
что президенты  делают со своими странами то, что не могут делать
со своими женами.
</span>
</body>
</html>
Пример задания свойства background-image для строкового элемента
Рис. 2.10  Пример задания свойства background-image для строкового элемента.

2.5.3. Свойство background-repeat.

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

  • repeat — изображение дублируется в вертикальном и горизонтальном направлении (используется по умолчанию);
  • repeat-x — изображение дублируется только в горизонтальном направлении;
  • repeat-y — изображение дублируется только в вертикальном направлении;
  • no-repeat — изображение не дублируется вовсе. При этом оно будет отображено только один-единственный раз.

Пример использования (рис. 2.11):

<html>
<head>
<title>
Примеры различного задания свойства background-repeat
</title>
<style type="text/css">
p {background-image:URL(bgimg.jpg);
   margin: 10;
   padding: 30;
   border: thin solid gray;
   text-align: center}
</style>
</head>
<body bgcolor="white">
<h3 align="center">
Примеры различного задания свойства background-repeat
</h3>
<p style="background-repeat:no-repeat">
Для этого блока <b>background-repeat:no-repeat<b>
</p>
<p>
Свойство background-repeat для этого блока используется
в значении, установленном по умолчанию.
То есть <b>background-repeat:repeat</b>
</p>
<p style="background-repeat:repeat-x">
Для этого блока <b>background-repeat:repeat-x</b>
</p>
<p style="background-repeat:repeat-y">
Для этого блока <b>background-repeat:repeat-y</b>
</p>
</body>
</html>
Демонстрация различного задания свойства background-repeat
Рис. 2.11  Демонстрация различного задания свойства background-repeat.

Выложить фоновым изображением крест, дважды использовав свойство background-repeat (один раз в значении repeat-x, другой раз в значении repeat-y) не получится. Обьясняется это тем, что оба этих свойства являются одновременными, и поэтому второе просто-напросто переопределяет первое. Положение исходного изображения задается свойством background-position.

2.5.4. Свойство background-attachment.

Свойство background-attachment устанавливает, будет ли фоновое изображение фиксироваться в окне браузера или будет прокручиваться вместе с документом в процессе его прокрутки. Это свойство имеет смысл только для фоновых изображений элементов, для которых предусмотрены полосы прокрутки (элементы body и frame). Если изображение указано как зафиксированое, то содержимое элемента как бы проплывает над ним при прокрутке. В противном случае фоновое изображение (обычно продублированное) будет прокручиваться вместе с документом. Для задания параметров фиксации используются следующие значения свойства background-attachment:

  • fixed — фоновое изображение задается как зафиксированное;
  • scroll — фоновое изображение будет прокручиваться вместе с документом. По умолчанию используется значение scroll.

Пример задания:

body { background-image: url(bg.gif);
       background-repeat: no-repeat;
       background-position: center;
       background-attachment: fixed }

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

2.5.5. Свойство background-position.

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

Через свойство background-position положение фоновой картинки может быть задано тремя способами.

  1. В процентах.

    В этом случае возможны следующие варианты позиционирования:

    • если в качестве значения свойства background-position указана пара 0% 0% (background-position: 0% 0%), то левый верхний угол изображения помещается в левый верхний угол области отступов;

    • если указана пара 30% 60%, то сначала браузером определяется точка изображения, полученная в результате смещения от левого верхнего угла изображения на 30% ширины вправо и на 60% высоты вниз. Затем изображение размещается в стилевом блоке таким образом, чтобы эта точка была совмещена с точкой блока, полученной в результате смещения вдоль области отступов на 30% вправо и на 60% вниз от верхнего левого угла области отступов;
      Пример процентного задания позиционирования фонового изображения блока
      Рис. 2.12  Пример процентного задания позиционирования фонового изображения блока.


    • если указано значение 100% 100%, то в этом случае правый нижний угол изображения совмещается с правым нижним углом области отступов стилевого блока.

  2. В единицах длины.

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

  3. С помощью ключевых слов top, center, bottom, right и left.

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

    • top left, top left — комбинация аналогична процентному значению 0% 0%. Обратите внимание на то, что пунктуация должна быть именно такой, какой она указана здесь.
    • bottom right, right bottom — комбинация аналогична процентному значению 100% 100%.
    • center, center center — комбинация аналогична процентному значению 50% 50%.
    • top, top center, center top — комбинация аналогична процентному значению 50% 0%.
    • left, left center, center left — комбинация аналогична процентному значению 0% 50%.
    • right top, top right — комбинация аналогична процентному значению 100% 0%.
    • bottom left, left bottom — комбинация аналогична процентному значению 0% 100%.
    • right, right center, center right — комбинация аналогична процентному значению 100% 50%.
    • bottom, bottom center, center bottom — комбинация аналогична процентному значению 50% 100%.

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

В том случае, если для свойства background-position в качестве значения указано только одно процентное значение или одна длина, то это значение определяет положение изображения по горизонтали. Вертикальная составляющая принимается равной 50%. Допускается совместное использование в одном определении значений в единицах длины и в процентах. Например:

p { background-image: url(myimage.gif);
    background-position: 10% 1cm;
    color: yellow }

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

Как и для границ, отступов и полей, для фона в CSS2 предусмотрено стенографическое (сокращенное) свойство background, с помощью которого можно сразу задать все параметры фона и фонового изображения. Свойство background объединяет в себе все пять вышеописанных свойств фона: background-color, background-image, background-repeat, background-attachment и background-position. Пример использования:

pre { color: blue;
      background: url(/image/bg.gif) 0%0% repeat scroll }

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

2.6. Разметка текста.

Итак, со стилевыми блоками и их цветовыми и фоновыми характеристиками разобрались. Теперь остается описать разметку текста, располагающегося в информативной области блоков. С помощью средств языка CSS2 можно задать отступы и высоту строк в текстовых фрагментах, расстояния между словами и буквами. Возможности CSS2 также позволяют трансформировать текст, написанный строчными буквами в прописной текст, и наоборот. С помощью свойства text-decoration можно указать подчеркивание, зачеркивание или надчеркивание текста. Описание всего этого букета возможностей и составляет данный параграф.

2.6.1. Отступы. Свойство text-indent.

С помощью свойства text-indent может быть задан отступ первого слова в первой строке абзаца. Или, говоря другими словами, свойство text-indent определяется размер красной строки. Сдвиг производится относительно левого края текстового фрагмента (т.е. относительно левого края информативной области стилевого блока). Размер отступа может быть задан либо в фиксированном виде (в единицах длины), либо в виде процентов. Процентное соотношение задается относительно ширины информативной области (ширины текстового фрагмента).

Пример использования (рис. 2.13):

<html>
<head>
<title>
Демонстрация применения свойства text-indent.
</title>
<style type="text/css">
p { margin: 25px;
    margin-top: 5px;
    padding: 15px;
    background: lightgrey;
    border: 1px solid black
  }
</style>
</head>
<body>
<h3 align="center">
Демонстрация применения свойства text-indent
</h3>
<strong>Обычный абзац. По умолчанию text-indent: 0</strong>
<p>
текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст
</p>
<strong>Абзац, для которого указано text-indent: 20</strong>
<p style="text-indent: 20">
текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст
</p>
<strong>Абзац, для которого указано text-indent: 50</strong>
<p style="text-indent: 50">
текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст
</p>
</body>
</html>
Документ, в котором показано применение свойства text-indent
Рис. 2.13  Документ, в котором показано применение свойства text-indent.

2.6.2. Выравнивание по горизонтали. Свойство text-align.

Свойством text-align определяется выравнивание текста внутри информативной области стилевого блока. С его помощью текст может быть выравнен:

  • left — пo левому краю;
  • right — пo правому краю;
  • center — пo центру;
  • justify — пo ширине.

Пример задания:

p { color: yellow;
    text-indent: 4 em;
    text-align: justify }

2.6.3. Выравнивание по вертикали. Свойство vertical-align.

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

  • baseline — выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента. Это значение используется по умолчанию.
  • bottom — выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
  • middle — выравнивание средней точки элемента по базовой линии родителя плюс половина x-height родительского элемента.
  • sub — элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
  • super — элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
  • text-bottom — нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
  • text-top — верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
  • top — выравнивание верхнего края элемента по верху самого высокого элемента строки.

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

2.6.4. Оформление текста. Свойство text-decoration.

С помощью свойства text-decoration можно придать тексту такие визуальные характеристики, как, подчеркивание, зачеркивание и надчеркивание. Для этого достаточно использовать свойство text-decoration с одним из следующих значений:

  • underline — каждая строка текста будет подчеркнута;
  • overline — все строки текста будут отображены с чертой, расположенной над каждой их них;
  • line-through — каждая строка будет отображена перечеркнутой;
  • nоne — декоративного оформления текста производиться не будет. Это значение выставлено по умолчанию.

Пример использования (рис. 2.14)

<html>
<head>
<title>
Демонстрация применения свойства text-decoration
</title>
<style>
body { text-align: center;
       background: white }
</style>
<body>
<h3>Демонстрация применения свойства text-decoration</h3>
<hr size="20" color="lightgrey">
Обычная строка текста
<p style="text-decoration: underline">
Подчеркнутая строка текста
</p>
<p style="text-decoration: overline">
Надчеркнутая строка текста
</p>
<p style= "text-decoration: line-through">
Перечеркнутая строка текста
</p>
<hr size="20" color="lightgrey">
</body>
</html>
Документ, в котором показано применение свойства text-decoration
Рис. 2.14  Документ, в котором показано применение свойства text-decoration

2.6.5. Внутритекстовые интервалы.

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

h3 { color: blue; letter-spacing: 13px }.

Свойство letter-spacing может быть выставлено в значении normal (letter-spacing: normal), что указывает браузеру использовать стандартные интервалы текущего шрифта.

CSS-свойство word-spacing отвечает за интервалы между словами.

Размер междустрочных интервалов задается с помощью свойства line-height.

Иллюстрация интервалов во фрагменте текста
Рис. 2.15  Иллюстрация интервалов во фрагменте текста

2.6.6. Работа с регистром. Свойство text-transform.

С помощью свойства text-transform, определеного в рамках спецификации CSS2, можно осуществлять преобразование регистра букв текста. Или, другими словами, трансформировать строчные буквы в прописные, и наоборот. Для этих целей свойство text-transform может принимать следующие значения:

  • capitalize — первая буква каждого слова отображается прописной (заглавной);
  • uppercase — все буквы каждого слова отображаются прописными (заглавными);
  • lowercase — все буквы каждого слова отображаются как строчные;
  • nоne — никакого преобразования регистра не производится.

Пример использования:

h1 { color: green; letter-spacing: 5px; text-transform: uppercase }

2.7. Задание шрифта средствами CSS2.

От выбора подходящего шрифта может во многом зависеть привлекательность документа. Каждый из них имеет свой индивидуальный внешний вид. В этом разделе будет произведено описание работы со шрифтами. Подключение определенного шрифта и задание его характеристик (прямой, курсив, жирный и т.п.) является одними из наиболее часто производимых разработчиком операций. Язык каскадных таблиц стилей CSS2 предлагает для этих целей свои возможности.

2.7.1. Подключение шрифтов. Свойство font-family.

С помощью свойства font-family браузеру указывается шрифт, которым он должен отображать текстовую информацию, для которой это свойство определено (или наследуется). Например:

p { font-family: "Arial" }

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

Возможности свойства font-family таковы, что оно позволяет указывать приоритетный список названий шрифтов, каждый из которых будет пробовать подключаться в соответствии со своим приоритетом. Например, правило

body { font-family: "Heretet", "Times New Roman", "Arial" }
означает, что сначала браузер будет пробовать использовать шрифт Heretet. Если такой шрифт отсутствует в его распоряжении (его просто нет на компьютере пользователя), то будет произведена попытка использования шрифта Times New Roman и т.д.

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

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

  • Serif (например, Times New Roman);
  • Sans-serif (например, Helvetica);
  • Monospace (например, Courier New);
  • Curcive (например, Zapf-Chancery);
  • Fantasy (например, Western).

Полный список шрифтов с указанием их принадлежности к различным группам приведен ниже. Пример использования:

body { font-family : "Times New Roman", "Times", serif }

2.7.2. Указание стиля шрифта. Свойство font-style.

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

  • normal — шрифт отображается в своем обычном, прямом виде. Это значение используется по умолчанию;
  • italic — шрифт будет отображен курсивом;
  • oblique — шрифт будет отображен в наклонном виде.

2.7.3. Размер шрифта. Свойство font-size.

Значение свойства font-size может быть абсолютным или относительным.

Абсолютное значение можно задать одним из следующих ключевых слов:

xx-small, x-small, small, medium, large, x-large, xx-large
которые являются индексами в таблице размеров шрифтов, поддерживаемыой браузером.

Последовательность задана по возрастанию. Это значит, что шрифт размером small меньше шрифта размером medium. Коэффициент умножения между соседними ключевыми словами равен 1.2: если шрифт medium12pt, то шрифт large будет 14.4pt. По умолчанию браузер использует значение medium.

Замечание:

Браузер MS Internet Explorer в качестве значения по умолчанию использует значение small.

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

Ключевые слова для задания относительного размера шрифта интерпретируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть larger и smaller. Напимер, если родитель имеет размер шрифта medium, то значение larger сделает шрифт текущего элемента равным large.

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

strong { font-size : 150% }
и
strong { font-size : 1.5 em }
являются абсолютно эквивалентными.