Styles.Css

body {background: #fff url('images/gradbg.jpg') top left repeat-x; color: #000; margin: 0;

padding:0; border: 0; font-family: Verdana, Arial, sans-serif; font-size: 1em;}

div {width: 800px; margin: 0 auto;}

#bggraphic {background: url('images/pen.png') top left no-repeat; height: 278px;

width: 362px; position: absolute; left: 50%; z-index: -100;}

h1 {text-align: center; text-transform: uppercase; font-size: 1.5em; margin-bottom: 30px;

background: url('images/headbg.png') top left repeat; padding: 10px 0;}

#references cite {margin: 1em 0 0 3em; text-indent: -3em; display: block;

font-style: normal; padding-right: 3px;}

.website {border-right: 5px solid blue;}

.book {border-right: 5px solid red;}

.article {border-right: 5px solid green;}

#footer {font-size: 0.5em; border-top: 1px solid #000; margin-top: 20px;}

#footer a {color: #000; text-decoration: none;}

#footer a:hover{text-decoration: underline;}

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

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

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

Затем обратим наше внимание на фоновые изображения, использованные на странице (они применяются с помощью объявлений background: url). На этой странице имеется три различных фоновых элемента. Первый является градиентом, который располагается по верху страницы, создавая плавное изменение цвета. Затем используется полупрозрачное изображение ручки pen.png, чтобы создать достаточный контраст с текстом над ним и соединить с градиентом (полупрозрачные изображения PNG не работают в Internet Explorer 6 или более старых версиях, но они работают почти во всех современных браузерах; см. на странице http://code.google.com/p/ie7-js/ решение этой проблемы для IE6, которое исправляет также некоторые проблемы поддержки CSS в IE6). В конце используется еще одно полупрозрачное изображение PNG для фона заголовка страницы. Оно создает для заголовка небольшой дополнительный контраст, аккуратно выделяя его.

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

Рис. 4.2.  Законченный пример с примененными стилевыми оформлениями

Заключение

Нет ничего особенно таинственного в отношении XHTML, CSS и JavaScript. Они являются просто эволюцией Web. Если вы уже знакомы в какой-то степени с HTML, то ничего "забывать" не потребуется. Все, что вы знаете, по-прежнему применимо, необходимо только делать некоторые вещи другим образом (и быть немного более внимательным при разметке).

Кроме получения удовлетворения от хорошо сделанной работы, разработка в соответствии со стандартами Web имеет просто смысл. Контраргументы против разработки в соответствии со стандартами состоят в том, что это требует много времени и больших усилий, чтобы заставить компоновку работать для разных браузеров. Противоположным аргументом могло бы быть, как заставить компоновку не на основе стандартов работать на различных устройствах и с будущими версиями браузеров. Как можно быть уверенным, что спотыкающаяся разметка будет вообще выводиться в Firefox 5.0 и IE 10.0? Это невозможно, если не следовать некоторым правилам.