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

К началу


 

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

56011. Шкідливі та корисні звички 664.49 KB
  Кожен із нас мріє прожити щасливе життя, мати міцне здоров’я, багато друзів, знаходити взаєморозуміння між членами родини і нашого суспільства, досягти успіху в роботі, навчанні. Але, на жаль, наші сподівання не завжди справджуються.
56012. Кохання та одруження 62.5 KB
  The topic of our lesson today is Love and Marriage. Let’s start our lesson from the small episode about a person who had all kinds of love in her life: people love, mother’s love, the love of the nation and who was a beloved woman.
56013. Запорізька Січ 70.5 KB
  Мета: зясувати становище Запорізької Січі у складі Гетьманщини ознайомити із життям та діяльністю І.Сірка та економічним розвитком Запорізької Січі ІІ половини XVII ст. Мета нашого уроку:зясувати становище Запорізької Січі у складі Гетьманщини ознайомитись з життям та діяльністю Івана Сірка та економічним розвитком Запорізької Січі цього періоду. Ми наближаємося до Запорізької Січі.
56015. Запорізька Січ у другій половині ХVІІ ст 42.5 KB
  Мета: Показати статус Запорізької Січі в нових історичних умовах ; підкреслити що на к. Опис Січі з висоти пташиного польоту карта схема.Якою була доля Січі після Андрусівського перемиряробота з картою. Чи брали ви участь у національно-визвольній війні?
56016. Сім кольорів щастя. Виховна година в 4 класі 124.5 KB
  Бо у світі багато чого позначено числом сім: сім днів у тижні сім раз відміряй а раз відріж каже народна мудрість; є сім смертних гріхів які посилаються людині щоб вона їх переборола; а ще є сім чудес світу; а ще від щастя людина буває на сьомому небі; і книга за сімома печатями є і мабуть ще багато чогось іншого позначається числом сім. А ще мені здається є сім кольорів щастя. Ви можете заперечити мені що мовляв щастя не має кольору.
56017. Симфонія перемоги 88.5 KB
  Перше завдання: обрати вірне твердження. музична форма що складається з теми та її модифікованих повторень Перевірка виконаного завдання. правильна відповідь оцінюється учнями Друге завдання: з поданих слів скласти схему за якою пишеться увертюра...
56018. Главный садовод Украины 58.5 KB
  Цель: познакомить учащихся с жизнью известного помолога, знаменитого ученого-селекционера Украины В.Л. Симиренко; воспитывать гордость за соотечественника, любовь к своей стране, стремление трудиться во имя процветания своей Родины.