12786

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

Практическая работа

Информатика, кибернетика и программирование

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

Русский

2013-05-03

15.12 KB

2 чел.

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

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

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

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

Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. 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;

}

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

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

Идентификация элемента с помощью id

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

Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id:

<h1>Глава 1</h1>

...

<h2>Глава 1.1</h2>

...

<h2>Глава 1.2</h2>

...

<h1>Глава 2</h1>

...

<h2>Глава 2.1</h2>

...

<h3>Глава 2.1.2</h3>

...

Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:

<h1 id="c1">Глава 1</h1>

...

<h2 id="c1-1">Глава 1.1</h2>

...

<h2 id="c1-2">Глава 1.2</h2>

...

<h1 id="c2">Глава 2</h1>

...

<h2 id="c2-1">Глава 2.1</h2>

...

<h3 id="c2-1-2">Глава 2.1.2</h3>

...

Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:

#c1-2 {

color: red;

}

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

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

Задание: теперь попробуйте самостоятельно отредактировать «Задание», по следующему принципу: для первых трех предложений списка присвойте class (с любым названием) со следующими атрибутами: цвет текста, цвет фона, текст перечеркнут.Для оставшихся предложений присвойте атрибут id. Для каждого id назначьте следующие свойства: измените размер шрифта, сделайте его курсивом, поменяйте цвет текста.

Резюме

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

К началу


 

А также другие работы, которые могут Вас заинтересовать

2686. Волны в упругих средах 957.5 KB
  Волны в упругих средах  Волновые процессы Предположим, что точка, совершающая колебание находится в среде, все частицы которой связаны между собой. Тогда энергия ее колебания может передаваться окружаю - щим точкам, вызывая их колебание. Явлени...
2687. Электроизмерительные приборы 217 KB
  Цель работы: Изучить физические принципы действия и основные характеристики электроизмерительных приборов. На основе электромеханического стрелочного прибора М-93 собрать и исследовать миллиамперметр постоянного тока и вольтметры для измерения...
2688. Коллекторские свойства горных пород 2.73 MB
  коллекторские Свойства горных пород Типы пород–коллекторов Коллектором называется горная порода (пласт, массив), обладающая способностью к аккумуляции и фильтрации воды, нефти и газа. Под горной породой понимается естественный твердый минера...
2689. Разработка годовой производственной программы строительной организации 89.89 KB
  Курсовой проект по дисциплине Экономика предприятия включает в себя разработку годовой производственной программы строительной организации, формирование и распределение прибыли, составление календарного плана строительства, расчёт налогов...
2690. 20-ти річчя Незалежності України 7.34 MB
  Відкрита виховна година на тему: 20-ти річчя Незалежності України 24 серпня 2011 року український народ відзначив 20 - річчя Незалежності. Протягом початку  XX  століття незалежність проголошувалась п’ять разів, і ті...
2691. Український ярмарок 33.5 KB
  Український ярмарок Мета: Виявити та узагальнити ознаки осені в природі, сприяти розвиткові творчих здібностей учнів; виховувати любов і повагу до природи. Формувати уміння розкрити красу пори року. Виховувати любов до рідної природи, бажання оберіг...
2692. Що таке щастя 53.5 KB
  Тема: Що таке щастя? Мета: спонукати учнів на самовиховання, сформувати негативне ставлення до примітивного розуміння щастя, заснованого на матеріальних цінностях, виховувати в учнів високі моральні якості. Форма роботи: дискусія Обладнання: чисті а...
2693. Психолого-педагогічна характеристика 10-А класу 46 KB
  Школа має всі необхідні умови для проходження педагогічної практики. Існують добре обладнані кабінети географії та біології, бібліотека укомплектована підручниками і додатковою літературою. Є комп’ютерний клас з демонстраційною дошкою що дає мо...
2694. Виховний iдеал національної системи виховання 101 KB
  Поняття національне виховання. Його сутність та особливості. Національне виховання як невід'ємний чинник цілісного формування особистості. Основні напрямки розвитку національного виховання. Збереження традицій національного виховання у сучасному світі.