... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Практический пример применения стилей. Навигационное меню. (стр.1)

 

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов


Навигационное меню

Ну и последнее, что мы можем улучшить в нашем документе при помощи CSS, - это навигационное меню сайта. До сих пор оно было реализовано не лучшим образом:

<А href="#">
<FONT face="Arial color="blue" size="2"><В>Поселения</B></FONT></A> <BR>
<А href="#">
<FONT face="Arial color="blue" size="2"><В>Организации</B></FONT></A> <BR>
<А href="#">
<FONT face="Arial color="blue" size="2"><В>Научные материалы</B></FONT></A> <BR>
<А href="#">
<FONT face="Arial color="blue" size="2"><В>Творчество</B></FONT></A> <BR>
<А href="#">
<FONT face="Arial color="blue" size="2"><В>Об Украине</B></FONT></A> <BR>
<А href="#">
<FONT face="Arial color="blue" size="2"><В>Гостевая книга</B></FONT></A> <BR>
<А href="#">
<FONT face="Arial color="blue" size="2"><В>Мецинаты</B></FONT></A> <BR>
<А href="#">
<FONT face="Arial color="blue" size="2"><В>Ссылки</B></FONT></A> 

Первое, что пришлось сделать, - это использовать элемент font, чтобы установить для текста меню гарнитуру Arial, синий цвет и размер 2. Кроме этого, в конце каждого пункта мы вставляли спецсимвол неразрывного пробела (&nbsp;), чтобы появился отступ справа. Чтобы сделать шрифт жирным, пришлось добавлять еще и элемент B. Таким образом, пришлось довольно сложно реализовывать очень простое оформление. Давайте попробуем сделать то же самое с помощью CSS. Гарнитура Arial уже задана для всех текстовых блоков на странице, для элементов А в том числе.

Для начала удалим все лишнее из HTML-кода, и получим такой фрагмент:


<TD id="menu" width="127">
<А href="#">Пoceлeния</A><BR>
<А href="#">Организации</A><BR>
<А href="#">Hayчные мaтepиaлы</A><BR>
<А href="#">Творчество</A><BR>
<А href="#">Hoвости</A><BR>
<А href="#">Об Украине</A><BR>
<А href="#">Гостевая</A><BR>
<А href="#">Меценаты</A><BR>
<А href="#">Ссылки</A>
</TD>

Чтобы написать правило для ссылок блока #menu, можно использовать, например, селектор по классу. Можно определить специальный класс и записать правило для этого класса. Тогда в коде каждой ссылки меню нужно будет указать имя этого класса при помощи атрибута class. Код фрагмента будет выглядеть так:

<TD id="menu" width="127">
<A class="menu" href="#">Поселения</А><ВR>
<A class="menu" href="#">Организации</А><ВR>
<A class="menu" href="#">Научные материалы</А><ВR>
<A class="menu" href="#">Творчество</А><ВR>
<A class="menu" href="#">Hobocти</А><ВR>
<A class="menu" href="#">0б Украине</А><ВR>
<A class="menu" href="#">Гостевая</А><ВR>
<A class="menu" href="#">Меценаты</А><ВR>
<A class="menu" href="#">Ссылки</А><ВR>
</TD>

А соответствующее CSS-правило будет иметь такой вид: А. menu {}.

 

Страница: - 1 - | - 2 - | - 3 -

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены