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, вы можете специфицировать свойства конкретных элементов.

К началу


 

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

41408. Документ Delta Vision 225 KB
  Он представляет собой достаточно подробное описание на естественном языке поэтому основным участникам проекта легко с ним работать. Разработка документаконцепции и работа с ним являясь центром приложения действий многих участников заказчиков пользователей представителей руководства проекта и маркетинга могут играть заметную роль в успехе или неудаче программного проекта. При создании первой версии документа это не так уж сложно так как практически все пункты в перечне будут новыми для данного проекта или по крайней мере должны...
41409. Промышленные технологии проектирования ИС 152.5 KB
  По степени использования типовых проектных решений различают следующие методы проектирования: оригинального индивидуального проектирования когда проектные решения разрабатываются с нуля в соответствии с требованиями к ЭИС; типового проектирования предполагающего конфигурацию ЭИС из готовых типовых проектных решений программных модулей. Итеративному подходу присуща внутренняя гибкость позволяющая включать в бизнесцели новые требования или тактические изменения. Хотя ни один отдельно взятый процесс не способен удовлетворить...
41410. ТИПОВОЕ ПРОЕКТИРОВАНИЕ ИС 250.5 KB
  В качестве примеров широко распространенных функциональных ППП можно назвать: 1С Предприятие автоматизация бухгалтерского учета расчета заработной платы складского учета Фолио Склад автоматизация складских операций Project Expert бизнеспланирование ИНЭК финансовый анализ и др. Таким образом вместе с программным продуктом пользователи приобретают базу знаний knowhow об эффективных методах организации и управления бизнеспроцессами которые можно адаптировать в соответствии со спецификой конкретного экономического...
41411. Рецепция «вечных» образов в современной литературе. Своеобразие трактированния образов Каина та Авеля в притче Х.Л. Борхеса «Каин и Авель» 26.86 KB
  Своеобразие трактированния образов Каина та Авеля в притче Х. Борхеса Каин и Авель. Борхеса притча писателя Каин и Авель.Своеобразие трактированния образов Каина та Авеля в притче Х.
41412. Объектно-ориентированный анализ и проектирование 80 KB
  Введение в объектно-ориентированный анализ и проектирование. Объектно-ориентированный анализ и проектирование Основная идея объектно-ориентированного анализа и проектирования objectoriented nlysis nd design состоит в рассмотрении предметной области и логического решения задачи с точки зрения объектов понятий или сущностей как показано на рис. В процессе объектно-ориентированного анализа основное внимание уделяется определению и описанию объектов или понятий в терминах предметной области.
41413. Проведення гідрологічних і метрологічних спостережень і гідрометричних робіт. Вимірювання витрат води гідрометричною вертушкою 384 KB
  Мета практики: польова учбова гідрометрична практика має за мету закріплення студентами теоретичних знань по гідрометрії та гідрології і набуття ними практичних навичок...
41414. Учет кредитов банка, займов и процентов за пользование заемными средствами 63.78 KB
  По договору займа одна сторона (заимодавец) передает в собственность другой стороне (заемщику) деньги или другие вещи, определенные родовыми признаками, а заемщик обязуется возвратить заимодавцу такую же сумму денег (сумму займа) или равное количество других таких вещей того же рода и качества.
41415. Учет прочих доходов и расходов. Методы учета заготовления и приобретения материалов 25.11 KB
  Для учета прочих доходов и расходов предназначен счет 91 Прочие доходы и расходы.По кредиту счета 91 Прочие доходы и расходы в течение отчетного периода находят отражение:· поступления, связанные с предоставлением за плату во временное пользование (временное владение и пользование)
41416. Понятие о забалансовых счетах и особенности отражения операций на этих счетах. Учёт расчётов с бюджетом по НДС 20.4 KB
  В отдельных случаях организации при осуществлении хозяйственной деятельности используют не принадлежащие им средства, находящиеся у них во временном пользовании, распоряжении или на ответственном хранении.