Создание сайта. Урок 3 . Таблица CSS - Про Ucoz - Программы фильмы онлайн смотреть игры все длЯ компа - Мир софта программы
Пятница, 09.12.2016
Игры проги фильмы софт Трафик для мегалайнеров не учитыва...
Меню сайта
Категории раздела
Уроки Photoshop [0]
Photoshop [0]
Кисти для Photoshop [0]
Стили для Photoshop [2]
Рабочий стол [0]
Плагины для Photoshop [3]
Остальное [0]
Софт [0]
Фильмы скачать [0]
Игры [0]
Windows 7 [4]
Статьи [0]
Заработок [1]
Про Ucoz [11]
Про DLE [0]
Вебмастерам [4]
Клипарты [0]
Мини-чат
Наш опрос
Ваш интерес
Всего ответов: 295
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Главная » Файлы » Про Ucoz

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

Надеюсь эта информация окажется для Вас полезна, а если я что-то и забыла добавить на эту тему, спрашивайте, обязательно постараюсь ответить.
Категория: Про Ucoz | Добавил: daukebak
Просмотров: 870 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Block title
Валюта
Поиск
Друзья сайта
Copyright MyCorp © 2016