Создание сайта. Урок 3 . Таблица CSS

Когда я первый раз столкнулась с фразой, содержащей слова Таблица CSS, я, честно говоря, обошла ее стороной. Настолько мне показалось это недоступным для моего понимания. Но спустя некоторое время я все же вынуждена была к ней обратиться. И каково же было мое удивление, когда я обнаружила, что ничего страшного в этих словах нет. Итак, что же такое Таблица CSS и с чем ее едят?

Так вот, Таблица CSS – это всего лишь файл, содержащий информацию о том, как будет выглядеть внешний вид Вашего сайта. Какой будет фон на той или иной странице, размер шрифта, выравнивание по ширине и тому подобные мелочи. Более того, в принципе, можно обойтись и без этой таблицы, настраивая внешний вид для каждого элемента сайта в отдельности в том месте, где он непосредственно используется. Но, во-первых, этим Вы усложните себе работу: чтобы поменять цвет шрифта на всем сайте, Вам придется пройтись по кодам нескольких десятков страниц (хотя при этом у Вас появится отличный шанс тщательно изучить всю систему изнутри), а во-вторых, на 99% уверена, что где-нибудь Вы все равно что-то пропустите и дизайн сайта будет выглядеть не слишком красиво. К тому же, пока Вы будете менять шрифты, посетители сайта будут видеть все Ваше безобразие, а это вполне возможно, подавит в них желание заглянуть к Вам на огонек еще раз. Гораздо проще поменять что-то однажды в Таблице CSS, сразу увидеть результат и спать спокойно.

Так давайте же разберемся, что конкретно и как описывается в этом файле. Для примера опять же возьмем меню этого сайта. Напоминаю его код:

<ul class=»uz»>    
<li class=»m»><a class=»m» href=»http://мой сайт/»>Главная страница</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/3″>Работа</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/7″>Обучение</a></li>
    <ul style=»list-style-image: url(/marker.jpg)»>
        <li><a class=»m» href=»http://мой сайт/publ/8″ >Изучение иностранных языков</a></li>
        <li><a class=»catNameActive» href=»http://мой сайт/publ/20″ >Создание сайта</a></li>
        <li><a class=»m» href=»http://мой сайт/publ/24″ >Другое</a></li>
    </ul><li class=»m»><a class=»m» href=»http://мой сайт/publ/9″>Дети</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/13″>Домашний очаг</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/16″>Здоровье и красота</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/load/»>Библиотека</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/forum/»>Форум</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/index/0-3″>Обратная связь</a></li>
</ul>

Так вот, в этом меню упоминается 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;} – эти три позиции аналогичны предыдущим, срабатывают, для элемента меню, который выбран в настоящий момент.
/* ——— */
Вот так достаточно просто задается форматирование меню. И уже нет необходимости задавать параметры шрифта, на каждой странице сайта, где используется меню.

Надеюсь эта информация окажется для Вас полезна, а если я что-то и забыла добавить на эту тему, спрашивайте, обязательно постараюсь ответить.

Другие материалы по теме:
Создание сайта. Введение
Создание сайта. Урок 1.
Создание сайта.Урок2. Создание списков.
Создание сайта. Урок 3 . Таблица CSS
Создание сайта. Урок 4. Информеры.
Создание сайта.Урок 5.Раскрутка форума и привлечение активных пользователей
Создание сайта. Урок 6.Как увеличить посещаемость сайта
Создание сайта. Урок 7.Как увеличить посещаемость сайта или бесплатная регистрация в каталогах сайтов
Создание сайта.Урок 8.Как увеличить посещаемость сайта с помощью форумов других сайтов?
Создание сайта.Урок9.Как увеличить посещаемость сайта с помощью статей?