Ucoz - таблица стилей 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 4 5 Категория: Ucoz \| Добавил: lol (15.10.2013)
Просмотров: 3448 \| Комментарии: 1 \| Теги: css, Ucoz - таблица, стилей, Ucoz - таблица стилей CSS \| Рейтинг: 5.0/1