Полезное в сети

Всегда в теме

Статистика


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


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » Статьи » Образовательные » Программирование

Как работает 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;
}

В этих примерах мы использовали
и для определения очень простых вещей - цвета текста и фона.

Но оба элемента несут в себе потенциал для намного более сложных операций.
Категория: Программирование | Добавил: Wrecker (18.05.2012)
Просмотров: 945 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Заходи не жди