Внешний лист стилей css
Попробуем поработать с HTML на более высоком профессиональном уровне. Это подразумевает, что вы уже знаете теги (тэги) html и их атрибуты и умеете пользоваться таблицей свойств листа стилей css документа html.
Для начала рассмотрим более подробно внешний лист стилей. Почему именно внешний? Да потому, что именно как раз он используется в подавляющем большинстве случаев при разработке сайта, т.к. позволяет сконцентрировать в одном месте практически полное форматирование ресурса. Если возникает необходимость дополнить или исправить форматирование того или иного элемента на сайте, то это можно сделать в течение считанных минут. При этом, объем сайта никакой роли не играет - будь то персональный сайт, состоящий из десятка страничек, то ли мегапортал, включающий несколько сот (а то и тысяч) документов.
Теоретический материал будем сразу же закреплять на конкретном примере. В качестве оного, попробуем сделать сайт, посвященный творчеству великого русского художника Ильи Ефимовича Репина. Материал возьмем из электронной энциклопедии Кирилла и Мефодия.
Не мудрствуя лукаво, возьмем стандартную компоновку для сайта, состоящую из пяти зон: шапка сайта (на всю ширину), левая колонка, средняя колонка, правая колонка, низ сайта (на всю ширину).
Для простоты дизайна, сделаем фиксированную ширину сайта, равную 760 пикселям, с таким расчетом, чтобы ресурс отображался без горизонтальной полосы прокрутки на мониторе с разрешением 800х600.
Полный фрагмент html-кода приводить здесь не буду, только основные моменты. Все желающие могут посмотреть полный вариант кода, выбрав в верхнем меню браузера "Вид - Просмотр HTML-кода".
Исходный вариант неформатированного сайта можно посмотреть по ссылке: Заготовка для сайта И.Е.Репина.
Для большей наглядности на данном этапе делаем видимыми границы таблиц.
Главная таблица сайта имеет ширину 760 пикселей и выровнена по центру.
Внутри нее находятся еще три таблицы, идущие одна за другой.
Первая таблица - верхушка сайта.
Вторая - центральная часть сайта.
Третья - нижняя часть сайта.
Для большей наглядности на данном этапе этим таблицам принудительно задана высота: 60, 200, 60 пикселей соответственно.
Надеюсь, что пока все просто и понятно.
Теперь давайте начнем форматирование будущего сайта при помощи внешнего листа стилей.
Для работы с CSS лично я пользуюсь специальной программой, входящей в комплект Macromedia HomeSite - TopStyle Lite.
Окно программы состоит из трех частей:
В верхней левой части располагается непосредственный текст (код) листа стилей.
В верхней правой - инспектор объектов, входящих в CSS. Инспектор содержит свойства всех объектов, которые могут входить в лист стилей.
В нижней части находится окно просмотра, в котором сразу отображается внешний вид того или иного объекта.
Если у вас нет подобной программы, не расстраивайтесь, вполне сойдет любой текстовый редактор, например, Блокнот. Конечно же, с ним не так удобно, но, если все написано правильно, внешний лист будет исправно работать.
Создаем пустой файл с именем style.css. Собственно само название файла может быть произвольным, но расширение обязательно должно быть css!
Начнем с форматирования одного из главных тегов - BODY.
Прежде чем начать непосредственное форматирование, нужно определиться с цветовой палитрой сайта. Постараемся работать по всем канонам "правильного сайтостроения", поэтому, будем использовать цвета только из безопасной палитры. Что это такое? Качайте мою программку SafeColor - она вам и в жизни пригодится, и через 5 минут будете знать, что означает понятие "безопасная палитра".
Еще один немаловажный момент, чтобы наш лист стилей мог работать, надо в теле тега HEAD прописать на него ссылку. Вот как это должно примерно выглядеть:
<head> <title>Сайт художника Ильи Ефимовича Репина</title> <link rel="stylesheet" href="style.css" type="text/css"> </head>
Данная ссылка предполагает, что файл style.css находится в одном каталоге с той html-страницей, на которой прописана данная ссылка. Если, например, файл листа стилей находится на один уровень выше, то ссылка должна иметь вид href="../style.css". Думаю, это понятно.
Итак, начинаем писать внешний лист стилей. Возьмем в качестве фона рисунок, размером 3х3 пикселя, состоящий из двух цветов: светло-голубовато-серого (#6699CC) и светло-голубого (#99CCFF).Назовем рисунок bg.gif и поместим его в тот же каталог, что и наш файл. В укрупненном виде он представлен ниже:
Прописываем в файле style.css следующую строку:
BODY {
background-image : url(bg.gif);
}
Эта строка сообщает, что в качестве фонового рисунка всей страницы будет выступать наше изображение bg.gif.
Вот как будет теперь выглядеть наша html-страница.
Синтаксис записи следующий:
- сначала пишется наименование тега, который будет форматироваться;
- ставится открывающая фигурная скобка;
- пишется атрибут тега;
- ставится двоеточие;
- прописывается значение атрибута;
- ставится точка с запятой;
- прописывается следующий атрибут со значением, либо ставится закрывающая фигурная скобка.
Для наглядности рекомендуется каждый новый атрибут прописывать с новой строки.
Если вы обратили внимание, то между верхушкой нашей таблицы и верхним краем окна браузера есть свободное пространство. Сейчас мы его сделаем меньше, равным, скажем, 5 пикселям.
BODY {
background-image : url(bg.gif);
margin-top: 5px;
}
Вот как будет теперь выглядеть наша html-страница.
Пока наш сайт состоит из одной страницы. Но, даже если в нем их была бы сотня, то, все равно, после внесенных поправок в файл style.css, изменения сразу произошли бы на всех страницах (естественно, при условии, что на каждой странице стоит ссылка на файл внешнего листа стилей).
На этом оставим пока "терзать" тег BODY и перейдем к оформлению наших таблиц, или другими словами, основной части сайта.
