Руслан Курепин
http://kurepin.ru
Файлы этого выпуска: /step/148/
——
Ну вот. Появился у нас
работающий сайт. Теперь можно вернуться на несколько уроков назад и
продолжить работу над сайтом в том порядке, в котором надо было ее вести.
Если помните, я чуть форсировал визуализацию, чтобы вы не умерли от
удовольствия.
Теперь мы чуток откатимся назад и пройдем еще один
подготовительный этап — создание таблицы стилей (CSS).
Для чего нам
эти стили и почему надо этим заниматься на начальной стадии создания
проекта? Да потому, что на начальной стадии проекта надо планировать
буквально все: базу, классы, стили, директории, почтовые адреса, журналы
операций и все такое прочее.
Мы не будем заниматься доскональным
изучением CSS, мы просто создадим костяк таблицы стилей, чтобы правильно к
ней обращаться.
Что же такое CSS? Это набор правил отображения в
браузере, устанавливаемых для любого стандартного html-объекта: шрифта,
слоя, элемента таблицы или формы и так далее.
Была б моя воля — я
бы запретил использование браузеров, не умеющих правильно отображать
правила CSS. Очень уж много возможностей у CSS по сравнению со
стандартными возможностями форматирования языка html.
Я не буду
рассказывать о синтаксисе и правилах создания CSS, об этом и так очень
много написано: любой поисковик выдаст вам тонну статей и учебников по
CSS. Сегодня мы остановимся на другом, на планировании.
Когда мы
создаем текстовый дизайн, то весь арсенал наших визуальных инструментов
составляют: размеры, цвета и отступы. И вот тут CSS равных нет. Чтобы
иметь возможность менять оформление дизайна полностью или частично нам
надо грамотно заложить в html-код употребление разных классов CSS. Причем,
эти классы распланировать и описать надо тоже нам.
Посмотрим, как
это делается.
Давайте попробуем перечислить все основные элементы,
выделяющиеся на html-странице.
Прежде всего, это ЗАГОЛОВКИ.
Заголовки могут быть основные (на всю страницу), могут быть заголовками,
разделов, меню, таблиц и так далее.
Далее, у нас выделяется
выделенный текст. Он может у нас тоже выделяться в разных ситуация
и по-разному.
Далее — основной текст. Он может изменяться в
зависимости от выполняемых функций: основной текст, меню, сноска,
комментарий и так далее.
А таблицы? Таблицы же тоже могут иметь
разного цвета и размера ячейки, столбцы, рамки и отступы... я уж молчу про
элементы форм (form)...
Что же делать? Кажется, что всего учесть
нельзя, что проще описывать прямо на месте тот или иной элемент
кода.
Ничего подбного!
Теория CSS гласит, что каждый элемент
наследует свои свойства от прародителя, изменяя только то, что было явно
изменено. Т.е. CSS — это такое же ООП, как и наш PHP-код. Так давайте этим
пользоваться в меру наших потребностей.
Предлагаю разбить первый
уровень классов на:
1. Базовый текст
2. Таблицы
3.
Формы
И для каждого описать свойства текста, фона и прочего, чего
нам захочется.
В свою очередь, текст можно подразделить
на:
1. Заголовок (title)
2. Основной (normal)
3. Важный
(urgent)
4. Яркий (ошибка)
5. Мелкий (small)
6. Очень мелкий
(tiny)
Если этих шести нам не хватит — добавим уже
потом.
Вот из этих двух списков и составим нашу
CSS.
Предлагаю создать базовый набор названий, а со свойствами
каждый из вас сможет поиграть самостоятельно, выбрав наиболее подходящие
для себя.
Предлагаю вот такой вариант для начала.