Полезное в сети
Всегда в теме
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Свежий софт
| Wrecker |  |
| Kaspersky Internet Security 2015 | |
| Wrecker |  |
| Virtual DJ | |
| Wrecker |  |
| SoundForge 11 | |
| Wrecker |  |
| Alcohol 120 | |
| Wrecker |  |
| Norton Internet Security 2014 | |
| Iron |  |
| Loaris Trojan Remover | |
Рекомендуем
| Главная » Статьи » Образовательные » Программирование |
Как работает CSS?(часть 3 Идентификация и группирование элементов (class и id)
| Идентификация и группирование элементов (class и id) Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов. Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке. Группирование элементов с помощью class Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким: Виноград для белого вина: <ul> <li><a href="ri.htm">Рислинг</a></li> <li><a href="ch.htm">Шардонэ</a></li> <li><a href="pb.htm">Пино Блан</a></li> </ul> Виноград для красного вина: <ul> • Кабернэ Совиньон <li><a href="me.htm">Мерло</a></li> <li><a href="pn.htm">Пино Нуар</a></li> </ul> Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими. Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class. Попробуем установить классы для предыдущего примера: Виноград для белого вина: <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> Виноград для красного вина: <ul> • Кабернэ Совиньон <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; } Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа. Идентификация элемента с помощью id Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id. Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id: Глава 1 ... Глава 1.1 ... Глава 1.2 ... Глава 2 ... Глава 2.1 ... Глава 2.1.2 ... Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе: Глава 1 ... Глава 1.1 ... Глава 1.2 ... Глава 2 ... Глава 2.1 ... Глава 2.1.2 ... Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS: #c1-2 { color: red; } Как показано в предыдущем примере, вы можете определять свойства конкретного элемента с помощью #id в таблице стилей документа. Группирование элементов (span и div) Элементы и используются для структурирования документа, часто совместно с атрибутами class и id. В этом уроке мы подробно рассмотрим, как использовать и , поскольку эти элементы HTML имеют важнейшее значение в CSS. Группирование с помощью <span> Элемент можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, может использоваться для визуальных эффектов применимо к отдельным блокам текста. Пример - цитата из Бенджамина Франклина: Кто рано ложится и рано встаёт, тот будет здоровым, богатым и умным Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью . Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей: Кто рано ложится и рано встаёт, тот будет <span class="benefit">здоровым</span>, <span class="benefit">богатым</span> и умным. В CSS: span.benefit { color:red; } Разумеется, вы можете также использовать id для определения стиля -элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх -элементов, как мы говорили в прошлом уроке. Группирование с помощью <div> В то время как используется в элементах уровня блока, как в предыдущем примере, применяется для группирования одного или более блок-элементов. Кроме этого отличия, группирование с помощью работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности: <div id="democrats"> <ul> • Франклин Д. Рузвелт • Гарри Трумэн • Джон Ф. Кеннеди • Линдон Б. Джонсон • Джимми Картер • Билл Клинтон </ul> </div> <div id="republicans"> <ul> <li>Дуайт Д. Эйзенхауэр</li> • Ричард Никсон <li>Джэралд Форд</li> <li>Роналд Рейган</li> <li>Джордж Буш</li> <li>Джордж У. Буш</li> </ul> </div> В нашей таблице стилей мы можем использовать такое же группирование, как и раньше: #democrats { background:blue; } #republicans { background:red; } В этих примерах мы использовали и для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций. | |
| Просмотров: 1217 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
