Если фоновое изображение меньше, чем элемент Web-страницы (или сама Web- страница), для которого оно задано, Web-обозреватель будет повторять это изображение, пока не "замостит" им весь элемент. Параметры этого повторения задает атрибут стиля background-repeat:
background-repeat: no-repeat|repeat|repeat-x|repeat-y|inherit
Здесь доступны четыре значения.
- no-repeat - фоновое изображение не будет повторяться никогда; в этом случае часть фона элемента Web-страницы останется не заполненной им.
- repeat - фоновое изображение будет повторяться по горизонтали и вертикали (обычное поведение).
- repeat-x - фоновое изображение будет повторяться только по горизонтали.
- repeat-y - фоновое изображение будет повторяться только по вертикали.
С помощью атрибута стиля background-position можно указать позицию фонового изображения относительно элемента Web-страницы, для которого оно назначено:
background-position: <горизонтальная позиция> [<вертикальная позиция>] | inherit;
Горизонтальная позиция фонового изображения задается в следующем формате:
<числовое значение>|left|center|right
Числовое значение указывает местоположение фонового изображения в элементе Web-страницы по горизонтали и может быть задано с применением любой из поддерживаемых CSS единиц измерения (см. табл. 8.1). Также можно указать следующие значения:
- left - фоновое изображение прижимается к левому краю элемента Web-страницы (это обычное поведение);
- center - располагается по центру;
- right - прижимается к правому краю.
Формат задания вертикальной позиции фонового изображения таков:
<числовое значение>|top|center|bottom
Числовое значение указывает местоположение фонового изображения в элементе Web-страницы по вертикали и может быть задано с применением любой из поддерживаемых CSS единиц измерения.
Также возможны следующие значения:
- top - фоновое изображение прижимается к верхнему краю элемента Web-страницы (это обычное поведение);
- center - располагается по центру;
- bottom - прижимается к нижнему краю.
Если для какого-либо элемента Web-страницы указана только позиция фонового изображения по горизонтали, его вертикальная позиция принимается равной center.
Пример:
TABLE.bgr ( background-position: 1cm top }
Этот стиль помещает фоновое изображение на расстоянии 1 см от левого края элемента Web-страницы и прижимает его к нижнему краю данного элемента. А вот стиль, прижимающий фоновое изображение к правому краю элемента Web-страницы и располагающий его в центре данного элемента по вертикали:
TABLE.bgr ( background-position: right }
Когда мы прокручиваем содержимое Web-страницы в окне Web-обозревателя, вместе с ней прокручивается и фоновое изображение (если оно есть). Стандарт CSS предлагает забавную возможность - запрет прокрутки графического фона Web- страницы и фиксация его на месте. Фиксацией фона управляет атрибут стиля background-attachment:
background-attachment: scroll|fixed;
Значение scroll заставляет Web-обозреватель прокручивать фон вместе с содержимым Web-страницы (это поведение по умолчанию). Значение fixed фиксирует фон на месте, и он не будет прокручиваться.
НА ЗАМЕТКУ
Вероятно, имеет смысл фиксировать только графический фон, заданный для самой Web-страницы. Графический фон у отдельных элементов Web-страницы фиксировать не следует.
На этом мы пока закончим с атрибутами стиля CSS. Рассмотрим новую разновидность элементов Web-страниц, с которой еще не сталкивались. Это...
Контейнеры. Встроенные контейнеры
В самом начале данной главы мы узнали, что все рассмотренные нами атрибуты стилей можно указывать для любых элементов Web-страниц: и блочных, и встроенных. Значит, мы можем задать размер шрифта и для абзаца (блочного тега <P>), и для важного текста (встроенных тегов <STRONG> и <EM>). Это очень полезная возможность.
Но что делать, если нам понадобилось применить какой-либо стиль к произвольному фрагменту текста, не помечая его никаким тегом? Например, нам нужно выделить полужирным шрифтом фрагмент абзаца, но мы не хотим заключать его в тег
<STRONG>. Может ли CSS нам в этом помочь?
CSS не может. Зато может HTML. Он специально для таких случаев предоставляет особые элементы Web-страницы - контейнеры - и, конечно, соответствующие теги. О контейнерах сейчас и пойдет разговор.
Контейнер - элемент Web-страницы, предназначенный только для выделения ка- кого-либо ее фрагмента. Таким фрагментом может быть часть блочного элемента (абзаца, заголовка, цитаты, текста фиксированного форматирования и др.), блочный элемент или сразу несколько блочных элементов. Web-обозреватель никак не выделяет контейнер на Web-странице.
Контейнер служит двум целям. Во-первых, с его помощью мы можем привязать к определенному элементу или элементам Web-страницы нужный стиль; для этого достаточно заключить данный элемент или элементы в контейнер и привязать стиль к нему. Во-вторых, он может обеспечивать привязку поведения к элементу или элементам Web-страницы; выполняется это таким же образом, что и в случае стиля. (О поведении Web-страницы разговор пойдет в части III.)
Контейнеры бывают блочные и встроенные. Разговор о блочных контейнерах мы отложим до главы 10, в которой будем рассматривать контейнерный Web-дизайн. Поговорим о встроенных контейнерах.
Уже по определению ясно, что встроенный контейнер является частью блочного элемента Web-страницы. Так, блочным контейнером может стать фрагмент абзаца или цитаты, графическое изображение, помещенное в абзац, и др.
Встроенный контейнер создается с помощью парного тега <SPAN>. Фрагмент блочного элемента, который нужно превратить в содержимое встроенного контейнера, помещают в этот тег:
<P><SPAN>Представление</SPAN> создается с помощью стилей CSS.</P>
Здесь мы поместили во встроенный контейнер фрагмент абзаца.
Толку от нашего первого встроенного контейнера никакого. Поэтому давайте при- вяжем к нему какой-нибудь стиль (листинг 8.1).
Представление для нашего Web-сайта, часть 1
Изучив гору теории, приступим к практике. Начнем создавать представление для нашего первого Web-сайта.
Все стили, которые мы применим к Web-страницам, поместим во внешнюю таблицу стилей main.css. Создадим ее и поместим в корневой папке Web-сайта. После чего привяжем ее ко всем Web-страницам, входящим в него. Как мы помним из главы 7, это выполняется с помощью тега <LINK>.
Для главной Web-страницы index.htm этот тег будет выглядеть так:
<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">
Для всех Web-страниц, хранящихся в папке tags, он будет таким:
<LINK REL="stylesheet" HREF="../main.css" TYPE="text/css">
Внесем в HTML-код всех Web-страниц этот тег и сохраним их.
В тегах <LINK>, привязывающих таблицу стилей к Web-страницам, мы указали относительные интернет-адреса. Это позволит нам просматривать Web-страницы, открывая их в Web-обозревателе без использования Web-сервера. Так проще.
Теперь наполним нашу первую таблицу стилей нужными стилями. Но сначала определимся, что мы хотим создать. Опишем параметры шрифта и фона наших Web- страниц обычным, "человеческим" языком.
Концепция Web 2.0, о которой говорилось в главе 1, определяет специфические требования к шрифту и фону Web-страниц. Это тонкие и достаточно крупные шрифты без засечек, приглушенные цвета, обычный (неграфический) или однотонный графический фон. Остальные характеристики, как говорится, по вкусу.
Исходя из этого, для Web-страницы мы зададим такие параметры.
- Шрифт абзацев - Verdana. Если таковой отсутствует на клиентском компьютере, применим шрифт Arial.
- Шрифт заголовков - Arial. Это позволит нам дополнительно выделить заголовки, сделать их отличными от обычных абзацев.
- Размер шрифта абзацев - 12 пунктов.
- Размер шрифта заголовков первого уровня - 20 пунктов. Размер шрифта заголовков второго уровня - 18 пунктов. Размер шрифта заголовков шестого уровня - 12 пунктов. Шрифт заголовков всех уровней - обычной насыщенности.
- Размер шрифта в таблицах - 10 пунктов. Пусть таблицы также будут отличаться от обычного текста.
- Размер шрифта больших цитат - 10 пунктов. Пусть и цитаты выглядят по-другому.
- Шрифт больших цитат - курсивный.
- Размер шрифта тега адреса - 10 пунктов. Сведения об авторских правах тоже должны отличаться. К тому же их традиционно пишут мелким шрифтом.
- Шрифт тега адреса - курсивный.
- Цвет текста - #3B4043 (очень-очень темный, почти черный).
- Цвет фона - #F8F8F8 (очень-очень светлый, почти белый).
НА ЗАМЕТКУ
Для подбора цветов можно порекомендовать замечательные библиотеки цветовых тем Web-сайтов, доступных по интернет адресам http://www.tarusa.ru/~golovan и http://avy.ru. Так, автор выбрал тему "Капли дождя" из рубрики "Сине-голубые"; цвета из этой темы он и будет применять в дальнейшем.
Осталось написать CSS-код в соответствии с изложенным (листинг 8.2).
Листинг 8.2
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif }
P { font-size: 12pt }
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }
H1 { font-size: 20pt }
H2 { font-size: 18pt }
H6 { font-size: 12pt }
TABLE { font-size: 10pt }
BLOCKQUOTE P, ADDRESS { font-size: 10pt; font-style: italic }
Таблица стилей готова. Рассмотрим все созданные в ней стили один за другим.
Первым идет стиль переопределения тега <BODY>. Он задает параметры, общие для всей Web-страницы: шрифт для обычного текста (абзацев, цитат и содержимого таблиц), цвет текста и цвет фона. Все элементы Web-страницы будут использовать данные параметры, если, конечно, мы не переопределим их далее, в более конкретных тегах:
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif }
Следующим идет стиль переопределения тега <P>. Он задает размер шрифта для текста абзацев. Фактически он дополняет стиль переопределения тега <BODY>, созданный ранее:
P { font-size: 12pt }
А теперь - внимание! Мы создали три одинаковых стиля, переопределяющих теги заголовков <H1>, <H2> и <H6>:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }
Они задают параметры, общие для всех заголовков: шрифт и его "жирность" (точнее, отсутствие "жирности"). Поскольку эти стили более конкретные, чем созданный ранее стиль переопределения тега <BODY>, заданные в них параметры будут иметь больший приоритет. Следовательно, заголовки будут набраны шрифтом, который мы указали в этих стилях, а не тем, что упомянут в стиле переопределения тега <BODY>.
Далее мы создали три стиля переопределения тегов <H1>, <H2> и <H6>, задающие разные размеры шрифта для заголовков разного уровня. Эти стили дополнят те, что мы создали чуть раньше. В результате заголовки разного уровня будут набраны шрифтом разного размера:
H1 { font-size: 20pt }
H2 { font-size: 18pt }
H6 { font-size: 12pt }
Следующим идет стиль переопределения тега <TABLE>, задающий размер шрифта и дополняющий созданный ранее стиль переопределения тега <BODY>. Шрифтом данного размера будет набран текст, присутствующий во всех элементах таблицы (обычных ячейках, ячейках заголовка и заголовке таблицы):
TABLE { font-size: 10pt }
Последними мы определили два одинаковых стиля: комбинированный стиль
BLOCKQUOTE P и стиль переопределения тега <ADDRESS>:
BLOCKQUOTE P, ADDRESS { font-size: 10pt; font-style: italic }
Они задают одинаковые параметры для шрифта большой цитаты и тега адреса. Поскольку для создания большой цитаты мы использовали тег <P>, вложенный в тег <BLOCKQUOTE>, то параметры текста цитаты мы определили посредством комбинированного стиля BLOCKQUOTE P. Оба этих стиля дополняют созданный в самом начале стиль переопределения тега <BODY>.
Как видим, все довольно просто и наглядно. Стили объединяются друг с другом, переопределяя заданные в них параметры, согласно приоритету. А приоритет зависит от конкретности данного стиля, от "близости" его к тегу.
Сохраним таблицу стилей и откроем в Web-обозревателе Web-страницу index.htm. Совсем другой вид! Вот что можно сделать с Web-страницей с помощью стилей CSS! И ведь нам совсем не пришлось править ее HTML-код (если не считать внесение тега <LINK>, выполняющего привязку таблицы стилей). Разделение содержимо- го и представления, предписываемое концепцией Web 2.0, налицо!
Что бы нам еще такое сделать?.. Давайте немного разредим текст заголовков, чтобы сделать их более заметными. Для этого достаточно добавить к изначальному пространству между его символами дополнительное, равное 1 мм.
Но куда поместить соответствующий атрибут стиля? В CSS-код, создающий три одинаковых стиля переопределения тегов <H1>, <H2> и <H6>. Вот он:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }
А так он будет выглядеть после соответствующей правки:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif; letter-spacing: 1mm }
Вот и все, что нам понадобилось сделать! Сохраним таблицу стилей, выбрав кодировку UTF-8 (см. главу 1), и обновим Web-страницу index.htm, открытую в Web-обозревателе, нажав клавишу <F5>. А что, получилось стильно!
А чтобы совсем уж ошарашить будущих посетителей, давайте задействуем возможности CSS 3 и создадим для текста заголовков тень. Добавим соответствующий атрибут стиля, опять же, в CSS-код, создающий три одинаковых стиля переопределения тегов <H1>, <H2> и <H6> (листинг 8.3).
Листинг 8.3
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif; letter-spacing: 1mm; text-shadow: #CDD9DB 1px 1px }
Для тени мы задали цвет #CDD9DB (светло-синий) и совсем небольшие отступы, равные 1 мм. Такая тень будет ненавязчивой, но симпатичной.
Снова сохраним таблицу стилей и обновим Web-страницу. Посмотрим на результат. Красота...
Мы можем еще поэкспериментировать со стилями - в качестве домашнего задания. Но недолго - нас ждет еще много интересного.
Что дальше?
В этой главе мы научились оформлять текст и фон, используя особые атрибуты стиля. И начали создавать представление для своих Web-страничек.
В следующей главе нас поджидают другие атрибуты стиля - предназначенные для задания параметров абзацев и списков.
ГЛАВА 9. Параметры абзацев, списков и отображения
В предыдущей главе мы рассмотрели атрибуты стиля, предназначенные для задания параметров текста (шрифта, его размера, начертания, тени и пр.) и фона эле- ментов Web-страниц. Изучили новый элемент Web-страницы - встроенный контейнер - и выяснили, зачем он нужен. А также начали создавать представление для Web-страниц нашего первого Web-сайта и неплохо в этом преуспели.
В этой главе мы изучим атрибуты стиля, с помощью которых задают параметры абзацев. Абзацев в широком смысле этого слова - к которым относятся и заголовки, и списки, и теги адреса, и большие цитаты. В общем, блочных элементов, рассмотренных в главе 2 и предназначенных для структурирования текста.
Далее мы рассмотрим атрибуты стиля, задающие специфические параметры списков и их пунктов (параметры маркеров и нумерации).
Напоследок мы познакомимся с двумя очень специфичными атрибутами стиля, которые позволят нам задать отображение элемента Web-страницы (т. е. будет он блочным или встроенным) и сделать элемент невидимым. Эти атрибуты стиля применяются нечасто и только в совокупности с определенным поведением (см. часть III).
Параметры вывода текста
Начнем мы с атрибутов стиля, управляющих выводом текста в структурирующих текст блочных элементах. Их совсем мало. И все они применимы только к блочным элементам.
Атрибут стиля text-align задает горизонтальное выравнивание текста:
text-align: left|right|center|justify|inherit
Здесь доступны значения left (выравнивание по левому краю; обычное поведение Web-обозревателя), right (по правому краю), center (по центру) и justify (полное выравнивание).
Примеры:
P { text-align: justify } H1 { text-align: center }
Атрибут стиля text-indent задает отступ для "красной строки":
text-indent: <отступ "красной строки">
Здесь допускаются абсолютные и относительные (относительно ширины абзаца) величины отступа. По умолчанию отступ "красной строки" равен нулю. Отметим, что атрибут стиля text-indent не поддерживает значение inherit.
Пример:
P { text-indent: 5mm }
Вот теперь абзацы будут иметь "красную строку".
Параметры списков
Списки среди блочных элементов стоят особняком. В основном, из-за того, что, во-первых, содержат в себе другие блочные элементы (отдельные пункты), а во-вторых, включают маркеры и нумерацию, которые расставляет сам Web-обозреватель. Вот о маркерах и нумерации, а точнее, об атрибутах стиля, предназначенных для задания их параметров, мы сейчас и поговорим.
Атрибут стиля list-style-type задает вид маркеров или нумерации у пунктов списка:
list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit
Как видим, доступных значений у этого атрибута стиля очень много. Они обозна- чают как различные виды маркеров, так и разные способы нумерации.
- disc - маркер в виде черного кружка (обычное поведение для маркированных списков).
- circle - маркер в виде светлого кружка.
- square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от Web-обозревателя.
- decimal - нумерация арабскими цифрами (обычное поведение для нумерованных списков).
- decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
- lower-roman - нумерация маленькими римскими цифрами. upper-roman - нумерация большими римскими цифрами.
- lower-greek - нумерация маленькими греческими буквами.
- lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
- upper-alpha и upper-latin - нумерация большими латинскими буквами.
- armenian - нумерация традиционными армянскими цифрами.
- georgian - нумерация традиционными грузинскими цифрами.
- none - маркер и нумерация отсутствуют (обычное поведение для не-списков).
НА ЗАМЕТКУ