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

К началу


 

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

7315. Керування пам’яттю в ОС. Простий безперервний розподіл і розподіл з перекриттям. Розподіл пам’яті статичними й динамічними розділами 121.5 KB
  Тема: Керування памяттю в ОС. Простий безперервний розподіл і розподіл з перекриттям. Розподіл памяті статичними й динамічними розділами План Основна память. Вимоги до адрес, використовуваних у програмах...
7316. Процесуальні строки і витрати 40.16 KB
  Процесуальні строки і витрати ПЛАН: Вступ. Поняття процесуальних строків та їх значення у кримінальному процесі. Класифікація строків у кримінальному процесі. Порядок обчислення процесуальних строків. Поняття і види процесуальних в...
7317. Розв’язування систем лінійних алгебраїчних рівнянь над скінченними полями 184.63 KB
  Ю.Д. Жданова. Лекції з ВГПМ. М2 ТЧ обчислювальні алгоритми. Лекція № 7 10 Тема: Розв’язування систем лінійних алгебраїчних рівнянь над скінченними полями План лекції: Алгоритм знаходження всіх цілочислових розв’язків лінійного а...
7318. Організаційні та правові основи захисту населення під час воєнних дій. Правила поводження населення в конкретних НС 63.5 KB
  Тема: Організаційні та правові основи захисту населення під час воєнних дій. Правила поводження населення в конкретних НС. План: Основні положення міжнародного права з питань захисту людей. Правила поводження населення в конкретних НС. Ве...
7319. Взаємовідносини у колективі 97.5 KB
  Взаємовідносини у колективі План Прийняття групового рішення. Соціально - психологічний клімат колективу. Одним із показників успішної діяльності керівника організації (фірми, колективу) є рівень сформованості соціально-психологічно...
7320. Основи психокорекції. Курс лекцій 264.5 KB
  Психокорекційна практика як основна форма діяльності практичного психолога Поняття про психологічну корекцію. Мета і завдання психокорекції. Принципи психокорекційної роботи: принцип єдності діагностики і кор...
7321. Тістечка. Напівфабрикати для приготування тістечок 45.5 KB
  Тістечка. Напівфабрикати для приготування тістечок. Класифікація тістечок. Особливості технології приготування тістечок. Основні органолептичні показники. Санітарні правила при приготуванні та реалізації. Умови та термін зберігання...
7322. Робочий час і час відпочинку 205 KB
  Як відомо, ні рабовласницький, ні феодальний устрої не мали законодавчого обмеження робочого часу, оскільки носій робочої сили був разом з іншими знаряддями виробництва об'єктом власності.
7323. Керування пам’яттю в ОС. Сегментна, сторінкова й сегментно-сторінкова організація пам’яті 1.12 MB
  Сегментація памяті дає змогу зображати логічний адресний простір як сукупність незалежних блоків змінної довжини, які називають сегментами. Кожний сегмент звичайно містить дані одного призначення, наприклад в одному може бути стек, в іншому - програмний код і т. д.