русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Группирование элементов с помощью class


Дата добавления: 2013-12-23; просмотров: 646; Нарушение авторских прав


Пример 2: Удаление подчёркивания ссылок

Пример 1b: UPPERCASE и lowercase

Пример 1a: Расстояние между буквами

Как вы помните из Урока 5, расстояние между символами можно установить свойствомletter-spacing. Это можно применить для ссылки:

a:hover { letter-spacing: 10px; font-weight:bold; color:red; }

В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:

a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!

Обычный вопрос - как удалить подчёркивание ссылок?

Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.

Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните изУрока 5, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.

a { text-decoration:none; }

Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.

a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }

Урок 7: Идентификация и группирование элементов (class и id)



Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов.

Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.

Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:

<p>Виноград для белого вина:</p> <ul> <li><a href="ri.htm">Рислинг</a></li> <li><a href="ch.htm">Шардонэ</a></li> <li><a href="pb.htm">Пино Блан</a></li> </ul> <p>Виноград для красного вина:</p> <ul> <li><a href="cs.htm">Кабернэ Совиньон</a></li> <li><a href="me.htm">Мерло</a></li> <li><a href="pn.htm">Пино Нуар</a></li> </ul>

Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.

Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.

Попробуем установить классы для предыдущего примера:

<p>Виноград для белого вина:</p> <ul> <li><a href="ri.htm" class="whitewine">Рислинг</a></li> <li><a href="ch.htm" class="whitewine">Шардонэ</a></li> <li><a href="pb.htm" class="whitewine">Пино Блан</a></li> </ul> <p>Виноград для красного вина:</p> <ul> <li><a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li> <li><a href="me.htm" class="redwine">Мерло</a></li> <li><a href="pn.htm" class="redwine">Пино Нуар</a></li> </ul>

Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.

a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }

· Показать пример

Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.



<== предыдущая лекция | следующая лекция ==>
Пример 1: Эффект при нахождении указателя над ссылкой | Идентификация элемента с помощью id


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.002 сек.