Когда я первый раз столкнулась с фразой, содержащей слова Таблица CSS, я, честно говоря, обошла ее стороной. Настолько мне показалось это недоступным для моего понимания. Но спустя некоторое время я все же вынуждена была к ней обратиться. И каково же было мое удивление, когда я обнаружила, что ничего страшного в этих словах нет. Итак, что же такое Таблица CSS и с чем ее едят?
Так вот, Таблица CSS – это всего лишь файл, содержащий информацию о том, как будет выглядеть внешний вид Вашего сайта. Какой будет фон на той или иной странице, размер шрифта, выравнивание по ширине и тому подобные мелочи. Более того, в принципе, можно обойтись и без этой таблицы, настраивая внешний вид для каждого элемента сайта в отдельности в том месте, где он непосредственно используется. Но, во-первых, этим Вы усложните себе работу: чтобы поменять цвет шрифта на всем сайте, Вам придется пройтись по кодам нескольких десятков страниц (хотя при этом у Вас появится отличный шанс тщательно изучить всю систему изнутри), а во-вторых, на 99% уверена, что где-нибудь Вы все равно что-то пропустите и дизайн сайта будет выглядеть не слишком красиво. К тому же, пока Вы будете менять шрифты, посетители сайта будут видеть все Ваше безобразие, а это вполне возможно, подавит в них желание заглянуть к Вам на огонек еще раз. Гораздо проще поменять что-то однажды в Таблице CSS, сразу увидеть результат и спать спокойно.
Так давайте же разберемся, что конкретно и как описывается в этом файле. Для примера опять же возьмем меню этого сайта. Напоминаю его код:
Так вот, в этом меню упоминается class "m". А вот, как он описывается в Таблице CSS:
/* Main Menu */ .m {font-weight:normal;font-size:13px;} – шрифт нормальной толщины, размером 13 пикселей a.m:link {text-decoration:none; color:#800000} – если элемент, для которого устанавливается этот класс, является ссылкой, то его цвет становится красным. (80 – red, 00 – green, 00 - blue) a.m:visited {text-decoration:none; color:#800000}– если ссылка на элемент, для которого устанавливается этот класс, уже посещалась пользователем, то его цвет становится красным. (80 – red, 00 – green, 00 - blue)
a.m:hover {text-decoration:underline; color:#000000} – если на элемент, для которого устанавливается этот класс, наведен указатель мыши в текущий момент времени , то его цвет становится черным (00 – red, 00 – green, 00 - blue) и подчеркнутым.
a.ma:link {text-decoration:none; color:#800000;font-weight:bold;} a.ma:visited {text-decoration:none; color:#800000;font-weight:bold;} a.ma:hover {text-decoration:none; color:#000000;font-weight:bold;} – эти три позиции аналогичны предыдущим, срабатывают, для элемента меню, который выбран в настоящий момент. /* --------- */ Вот так достаточно просто задается форматирование меню. И уже нет необходимости задавать параметры шрифта, на каждой странице сайта, где используется меню.
Надеюсь эта информация окажется для Вас полезна, а если я что-то и забыла добавить на эту тему, спрашивайте, обязательно постараюсь ответить.