Глава 7. Оформление с помощью CSS

Глава 7. Оформление с помощью CSS

Вы могли заметить, что на нашей учебной странице history.html текст, при увеличении размеров окна, расползается и стремится занять всю возможную ширину. То же самое с последней строкой на странице requisit.html. Если даже на наших мелких текстах заметен этот эффект, то на реальной, содержательной странице он проявит себя ещё сильнее. Такие страницы не очень удобно читать, и на них трудно будет «наводить красоту», когда мы, наконец, решим это сделать.

Для управления границами всего содержимого страницы используем тэг <div> (он создаст на странице блочный элемент, позволяющий задавать произвольную ширину своему содержимому). Этот тэг надо поместить в начало всего видимого содержимого страницы (сразу за мета-тэгами и перед картинкой-логотипом). Если теперь вы откроете страницу с тэгом <div> в начале, то увидите, что она осталась точно такой же, как и была. Чудес не бывает. Нужно долго и нудно расписывать параметры этого самого контейнера, в который мы вложили содержимое страницы, напечатав в начале коротенькое слово <div>. А заодно уж и параметры всего документа.

Ладно, не переживайте так сильно, кое-какие параметры уже заданы в файле dn.css (вы наверное, давно на него коситесь, гадая, каким образом с его помощью преображается наш прайс-лист); остаётся лишь «привязать» его к каждой странице с помощью html-элемента link (link по английски как раз и означает «привязать»), вписав в неё код:

Этот код следует поместить перед тэгом <div>, и всё вместе вставить, куда положено:

ex09 Файлы примеров: css1 (css1)

Мы всё чаще стали использовать слово элемент. Это такая абстрактная единица, придуманная для управления содержимым html-страниц. Но на практике можно считать, что, к примеру, элемент a - это фрагмент html-кода, начинающийся с тэга <a ...> (внутри которого ещё могут быть записаны какие-то атрибуты) и заканчивающийся тэгом </a> (включая весь текст между этими начальным и конечным тэгами). У некоторых элементов (как, например, у элемента link) не бывает конечных тэгов. Принято говорить, что у элементов бывают атрибуты, но мы иногда можем сказать, что атрибут есть у тэга (как, например, в главе о помещении на страницу картинок). Это не совсем правильно, однако слова «элемент» и «тэг» можно считать до некоторой степени синонимами. До тех пор, пока их смешение не приводит к ошибкам.

Шрифт

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

мы, в частности, написали: «font-family: Arial». В этом месте вы можете написать название другого шрифта. Если в названии шрифта больше одного слова, его надо заключать в кавычки: "Times new roman". Можно и в одинарные: 'Times new roman'. Посмотреть, какие вообще бывают шрифты, можно в «Панели управления» (например, через папку «Мой компьютер») в разделе «Шрифты».

Вот некоторые названия, любое из которых вы можете попробовать вписать вместо Arial и посмотреть, что получится: Gorgia, 'Comic sans MS', 'Courier', 'Courier new', 'Microsoft sans serif', Tahoma, Verdana.

Фон наших страниц тоже изменился. Цвет фона изменился не случайным образом, а с определённым умыслом. Эта книга не о дизайне; но такова уж традиция, что каждый начинающий хатэмээльщик считает себя ну... не то чтобы сразу хорошим веб-дизайнером, но имеющим право на выражения своего вкуса. Послушайтесь совета доброго автора книги: каждый раз, когда захотите действовать по меркам своего вкуса, делите эти мерки (силу своего вкусового ощущения) на число «пи». Я уже знаю, что как только вы получите возможность менять фон страницы и цвет шрифта, вы будете менять их. Так вот: уменьшайте интенсивность понравившихся вам красок в три раза! Пусть лучше у вас получится для начала что-то серенькое, бледное и незаметное, чем кричащее всеми цветами радуги чудо пост-модерна. Получить же хороший, не режущий глаз и при этом действительно оригинальный дизайн можно только при помощи специалистов.

Структура документа

Интересно, что шрифт мы назначили некоему элементу body, а где он, этот элемент на наших страницах? Дело в том, что по правилам он (или какой-то другой элемент, его заменяющий) должен быть в любом html-документе всегда. Если его не будет, интернет-обозреватель просто не сможет отобразить страницу. У нас его нет. Но страницы отображаются! Чудес не бывает: все разумные интернет-обозреватели сами «дорисовывают» на некорректных страницах тэги body, html и другие, которые мы забыли написать в html-коде страницы.

Чтобы посмотреть, как обозреватели это делают, откройте любую страницу, созданную по предложенным в книге инструкциям, в обозревателе и через меню «Файл» - «Сохранить как» сохраните её, например, в папку «Мои документы». Интернет Эксплорер так сохранит наш файл index.html:

Мало того, что он «дорисовал» тэги <BODY> - </BODY> и <HTML> - </HTML>, он ещё и заключил мета-информацию в тэги <HEAD> - </HEAD>, а также добавил закрывающие тэги к последнему абзацу (</P>) и ко всему нашему основному разделу (</DIV>). К другим абзацам IE почему-то закрывающие тэги добавлять не стал (хотя они обязательно должны быть). К тому же IE зачем-то написал все тэги заглавными буквами и убрал часть кавычек в значениях атрибутов. То есть обошёлся с нашей страницей довольно грубо.

Гораздо корректнее сохраняет страницы обозреватель Mozilla Firefox (можно скачать дистрибутив с http://www.mozilla.ru), посмотрите на этот код внимательно - так должна выглядеть «правильная» (за исключением ссылок, конечно) html-страница:

Если у вас установлен локальный веб-сервер IIS, вы можете открыть эту же страницу через http-протокол (то есть набрав в обозревателе сетевое имя своего компьютера) - тогда ссылки при сохранении файла будут отображаться так же, как в исходном коде страницы. Может быть. В зависимости от метода сохранения файла: полный (с картинками) или «Только html-страница».

Мы не случайно взяли слово «правильная» (страница) в кавычки: наши страницы вроде бы «неправильные», но ведь отображаются точно так же. Мы просто заставляем программы-обозреватели выполнять часть нашей работы - дописывать недостающие тэги. Это, однако, возможно лишь до некоторого предела: при усложнении страницы легко может возникнуть двусмысленная ситуация, когда обозреватель не поймёт, что вы имели в виду (как именно должны быть вложены друг в друга элементы). В дальнейшем, чтобы не гадать, поймёт ли обозреватель нашу «усечённую» структуру документа, мы будем всё-таки стараться писать html-код «правильно», включая даже первую строку - определение типа документа:

Интересно, что программа-обозреватель может отображать содержимое документа по-разному, в зависимости от расширения: документы с «известным» операционной системе расширениями (html) обозреватель будет пытаться выдать на экран с html-оформлением; документы с известным расширением txt будет выводить без оформления, с текстом всех невидимых меток html; документы с неизвестными расширениями и вовсе без расширений - попробуйте открыть через обозреватель сами. Для обозревателей Gecko есть разница, как открывать файлы с разными расширениями, - с http-сервера или локально. Если с сервера, то обозреватели Gecko будут анализировать настройки сервера по выдаче файлов разных типов (расширений) и действовать в зависимости от этих настроек. Интернет Эксплореру всё равно, какие настройки имеет сервер.

ex10 Файлы примеров: ext (ext)

Если вы хотите более глубоко изучать HTML, лучше использовать обозреватель Firefox: с помощью «Панели JavaScript» в нём можно, например, отлавливать ошибки CSS-оформления страницы. Его расширение «Инспектор DOM» позволяет изучать структуру ваших страниц с точки зрения JavaScript и находить удобные решения в программировании. Да и вообще, как мы видели, он обращается с содержимым страниц более корректно, чем IE. Маленькие буквы в написании тэгов и заключённые в кавычки значения атрибутов - не прихоть. Это - перспектива, генеральная линия развития HTML, движение к более чёткой структурированности (http://www.w3.org/TR/xhtml1).

Да, и обязательно (если вы ещё не сделали этого) установите программу Bred (дистрибутив есть на сайте http://www.astonshell.com/rus), потому что с открывающими и закрывающими тэгами HTML работать без синтаксической подсветки будет довольно сложно. Вы можете выбрать любой другой текстовый редактор (поищите в Интернете по словам «редактор с синтаксической подсветкой»), главное, чтобы при редактировании ваших html-страниц редактор помогал вам отличать тэги HTML от остального текста:

Некоторые особенности CSS

CSS - каскадные (почему-то) таблицы стилей (Cascading Style Sheets). Не будем ломать голову над этим названием, мы уже видели CSS в действии, и нам достаточно знания (или даже одного подозрения), что это очень мощная технология оформления html-страниц, чтобы взяться за её изучение.

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

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

После применения оформления CSS на наших страницах мы можем видеть, что шрифт, например, везде стал Arial: и в элементах абзаца (p), и в гиперссылках (a), и в таблицах (table) - в прайс-листах. Мы изменили также фон body - сделали его серым, и весь текст страниц (в каком бы элементе этот текст ни находился) видим теперь на сером фоне. За исключением ячеек таблиц (td), которым мы задали другой цвет:

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

Откройте страничку history.html, и увидите, что у абзаца появился отступ (хотя мы задали его не абзацу, а body), а весь текст (кроме ссылок) окрасился в другой цвет.

Конкретные записи в таблицах CSS вида «text-indent:1em;» некоторые исследователи называют «объявлениями» (от англ. CSS declaration), некоторые - «правилами». Мы будем называть правилами.

Правило «line-height:1.4em» для body задаёт расстояние между строчками в любом фрагменте текста на странице, в котором больше одной строки. Единица «em» - высота буквы. Наше правило задаёт расстояние между строк в 1.4 раза больше, чем высота букв. Так удобнее читать.

Чтобы увидеть глазами блок div, добавьте в его css текст (через точку с запятой) background: #ffffcc:

Background, как вы уже догадались, - это фон. ffffcc - цвет, # - указывает на то, что цвет представлен в числовом выражении. Какое же это число, когда там буквы, - скажете вы. - Шестнадцатеричное, - отвечу я. Оно может быть представлено как цифрами, так и частью букв: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. То есть буква f фактически представляет «цифру» 15. А, например, буква b - «цифру» 11.

Цвет

Цвет в CSS (и в HTML) представлен в модели RGB - Red, Green, Blue (Красный, Жёлтый, Синий). Цифры в правиле CSS #ffffcc обозначают яркость каждого цвета: первые две - красного, вторые - зелёного и последние две - синего. Чем больше цифра, тем ярче цвет. Максимум яркости для всех трёх - ffffff - белый цвет. Минимум - 000000 - чёрный. Можно обозначать некоторые привычные цвета и просто словами: green, red, black, white... По подбору цветов можно найти уйму рекомендаций и в Интернете, и в книгах, поэтому мы ограничимся здесь парой достаточно очевидных замечаний общего характера: 1) сохраните к себе на компьютер из Интернета несколько страниц, которые вам нравятся, и старайтесь подражать их цветовой гамме; 2) сохраните несколько страниц, которые вам не понравились, и старайтесь избегать не нравящихся вам цветовых композиций; 3) просите почаще других людей оценивать результаты вашей работы, потому что в подборе цветов легко впасть во «вкусовщину», то есть потерять объективные ориентиры и чувство меры.

Почему в эксперименте с цветом шрифта - добавлением кода

к оформлению элемента body - гиперссылки не изменили свой цвет? Потому что вложенные в body (или в другие части документа) элементы воспринимают оформление от «родителя» (именно так называют элемент, в который вложен данный элемент) только если у них нет собственного css-оформления. Мы не назначали никакого оформления ссылкам, но у некоторых объектов HTML некоторые свойства задаются по умолчанию самими обозревателями (в соответствии с рекомендациями W3C - http://www.w3.org/TR). Ссылки - очень важные элементы HTML, к ним проявлено повышенное внимание и по умолчанию задаются цвета для двух состояний: синий - для обычного состояния, и мрачный красно-фиолетовый - для ссылок, которые вы уже посетили (visited). И ещё ссылки по умолчанию всегда выглядят подчёркнутыми. Но это можно изменить: если задать css-оформление для какого-либо элемента в явном виде, оно будет иметь приоритет перед оформлением по умолчанию.

Оформление ссылок

Можно добавить в конец файла dn.css, например, такой код:

Откройте страницу index.html в обозревателе и посмотрите, что получилось (если страница уже открыта, нужно нажать клавишу F5 - «обновить»).

Во-первых, мы убрали у всех ссылок подчёркивание: text-decoration:none. Затем сделали их полужирными: font-weight:600 (300 - нормальная толщина шрифта, 600 - полужирный шрифт, остальные значения теоретически должны обеспечивать плавную градацию между «толстым» и «тонким», но на практике этого пока нет). Цвет обычной, непосещённой ссылки задали тёмно-синим, с небольшой добавкой зелёного.

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

В третьей строке: цвет ссылки, на которую наведён курсор мыши (hover), задан «того же направления», что и у обычной ссылки, но более светлого оттенка. И добавлено подчёркивание.

Обратите внимание на последовательность строк: если вы поставите visited ниже hover, то цвет у hover (у ссылок, над которыми появляется курсор) меняться не будет.

Н-да, чего-то не хватает... шрифт надо взять более широкий - например, Verdana или Microsoft sans serif:

Попробуйте и то и другое и посмотрите, что получится.

ex11 Файлы примеров: css2 (css2)

Обратите внимание на файл pricelist.html: не очень удачно, что ссылки в навигационной панели выглядят так же, как и все остальные. Нам надо, чтобы навигационная панель отличалась от всего остального текста страницы, даже если этот текст будет состоять только из ссылок. Обычное дело. И обычно все его решают так (можете увидеть почти на любом сайте): пишут не <a href="index.html">, а <a class="nav" href="index.html">, то есть назначают ссылкам в навигационной панели определённый «класс», которому потом в таблице стилей можно будет задать особое оформление. При таком подходе выражение class="nav" нам придётся употребить столько раз, сколько в панели ссылок (то есть пять). Можно немного упростить код, использовав class="nav" только один раз - для элемента, в который ссылки непосредственно вложены (то есть для <p>):

Затем надо будет создать правило CSS, говорящее: «в абзаце класса nav ссылки должны быть такими-то». Это возможно, надо просто написать через точку «абзац nav» - p.nav, через пробел обозначение ссылки (a) и далее по тексту:

В вашем текстовом редакторе с синтаксической подсветкой этот фрагмент будет выглядеть примерно так:

После преобразования css-правил для ссылок таким образом (и записи во все файлы <p class="nav"> перед навигационными ссылками) все прочие ссылки (например, в файле pricelist.html) приобретут первозданный сине-подчёркнутый вид. Ну и пусть - они ведь просто текст, и так оно выглядит привычнее для простого текста.

ex12 Файлы примеров: css3 (css3)

Ширина содержимого. Поля

Вернёмся к началу главы, к тому моменту, когда мы вставили в начале всего видимого текста каждой страницы тэг <div>. Вы уже догадались, что ширину элементу div в файле dn.css мы задали правилом width:40em. Можете смело экспериментировать, задавая другие значения. Правило margin:1em 1em 1em 3em; задаёт отступы раздела div от границ родительского элемента (в нашем случае - body). Последовательность отступов такая: верхний, правый, нижний, левый. Элементам p, как видите, мы задали нижний отступ в 0.3em, то есть после каждого абзаца на страницах будет небольшой отступ.

Ячейкам таблицы (td) мы задали значения для ещё одного важного свойства - padding. Это - отступы текста от границ элемента, внутри которого находится текст. Если у этого свойства (так же, как и у margin) записано только два значения, первое относится к верху и низу, второе - к левой и правой сторонам. Получается, что этим правилом мы задали отступы текста от верхних и нижних границ ячеек 1 pixel, а от правой и левой границ - 3 pixel'a. А для ячеек таблицы класса head1 отступы заданы другие.

Раз уж мы заговорили о расстояниях между элементами, устраним заодно информационно-композиционный недостаток - отсутствие заголовков на страницах. У нас есть на каждой странице «шапка» - логотип и панель навигации. А как называется страница («Прайс» или «История»), в самом тексте не указано. Тем более что мы и в элементе title так и оставили одно и то же название для всех страниц. Это надо исправить. Добавить заголовки в тексте и уточнить заодно title (например, в адресах его сделать «Торговая группа Omnia mea. Адреса», в прайс-листе - «Торговая группа Omnia mea. Прайс-лист» и т. д.). Н-да. И для поисковых систем будет очень приятно (а для нас - полезно: страница переместится выше в списке поиска) обнаружить повтор ключевых слов из мета-тэгов в самом тексте страниц.

Заголовок сделаем по-простому, используя специальный тэг HTML (который любят поисковые роботы): после панели навигации каждой страницы (после её закрывающего тэга </p>!) запишем <h1>, затем заголовок, и затем </h1>. В свете последних веяний начало файла address.html будет выглядеть примерно так:

Если вам покажется, что заголовок h1 слишком велик, добавьте в конец файла dn.css правило для h1, определяющее подходящий для вас размер, например:

Полное описание всех предполагаемых возможностей CSS (спецификация) находится по адресу: http://www.w3.org/TR/REC-CSS2/cover.html, русский перевод есть, например, на http://loc.stack.ru/projects/CSS2/cover.html. Чтобы вам далеко за этой спецификацией не ходить, мы скопировали её (русский перевод) на компакт диск, в каталог omne (файл css2.chm - вся спецификация CSS2 в html-формате, упакованная в один файл справки Windows), а также на omne/css2.chm. В этой же папке есть и спецификация HTML4.0: файл html40.chm.

Масштабирование

У людей бывает разное зрение и разные предпочтения в работе с экранными документами: некоторые любят шрифт покрупнее, другие наоборот - хотят видеть на экране как можно больше информации сразу. У вас самих, наверняка, иногда возникало желание увеличить или уменьшить масштаб при просмотре той или иной страницы в Интернете. Это обычно делается в обозревателях через меню «Вид» - «Размер шрифта» («View» - «Text size»), а в обозревателях Gecko и Opera можно ещё и клавишами Ctrl+ (Ctrl-).

Мы задали в своём стилевом файле dn.css размер шрифта для наших страниц в абсолютном измерении - в пикселах (12px). К сожалению, популярный Интернет Эксплорер в этом случае не может масштабировать шрифт: какой бы размер в меню мы ни выбирали, шрифт на экране не меняется. Поэтому лучше задать его в относительных единицах, примерно такой же размер, как у нас сейчас, получится, если мы запишем для body правило по размеру шрифта в виде font-size:.8em (то же самое, что 0.8em, и то же самое, что 80%), то есть «уменьшить шрифт на 20% от стандартного». Что такое в этом случае «стандартный», не совсем ясно, но это и не важно: мы ведь добились, чего хотели, и шрифт теперь можно масштабировать во всех обозревателях.

ex13 Файлы примеров: css4 (css4)