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

К началу


 

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

30566. Функциональные ряды. Основные понятия и определения. Равномерная сходимость функциональных рядов. Признак Вейерштрасса. Свойства равномерно сходящихся рядов 31.56 KB
  Функциональная последовательность равномерная сходимость и свойства Определение: – равномерно сходящийся к fx на X если выполняется неравенство Замечание: если последовательность функции равномерно сходится к функции то она и просто сходится к ней. О равномерной сходимости функции: для того чтобы равномерно сходилась на X к fx необходимо и достаточно чтобы выполнялось неравенство Равномерно сходящиеся функциональные ряды Определение: – равномерно сходящийся на X если последовательность его частичных сумм равномерно...
30567. Основная тригонометрическая система функций. Ряды Фурье по ортогональным системам функций. Тригонометрические ряды Фурье. Признаки сходимости тригонометрических рядов Фурье. Тригонометрические ряды Фурье для четных и нечетных функций 142.57 KB
  Тригонометрический ряд 1 называется рядом Фурье для функции на отрезке а коэффициенты вычисляемые по формулам 2 3 4 называются коэффициентами Фурье. кусочномонотонна тогда ряд Фурье функции определяемый формулами 1 2 3 4 сходится почти всюду кроме точек разрыва к fx. Для четной функции Для нечетной функции Выступление Пусть функция определена на ℝ. Наименьшее из таких чисел Т называют периодом функции.
30568. Свойства функции распределения 51.52 KB
  Свойства функции распределения : Свойство 1: 0 ≤ Fx ≤ 1. Свойство2: Fx2 ≥ Fx1 если x2 x1. Свойство3: 1Fx = 0 при x ≤ ; 2 Fx = 1 при x ≥ b. Свойство4: Fx0 = Fx0 0.
30569. Сходимости почти наверное и по вероятности 352.78 KB
  Если то для любого Обобщенное неравенство Чебышёва Если то для любого Неравенство Чебышёва Если существует то для любого ЗБЧ ЗБЧ Чебышёва если имеет место сходимость ЗБЧ Маркова если т. Если существует то для любого Определение ЗБЧ. Говорят что последовательность случайных величин с конечными первыми моментами удовлетворяет закону больших чисел ЗБЧ если Законами больших чисел принято называть утверждения о том при каких условиях последовательность случайных величин удовлетворяет закону больших чисел. ЗБЧ Чебышёва.
30570. Характеристическая функция случайной величины: определение и свойства. Характеристическая функция нормального распределения 47.71 KB
  Характеристическая функция случайной величины: определение и свойства. Характеристическая функция нормального распределения. ХФ нормального распределения: Выступление Характеристическая функция случайной величины один из способов задания распределения. Характеристические функции могут быть удобнее в тех случаях когда например плотность или функция распределения имеют очень сложный вид.
30571. Теорема непрерывности. Центральная предельная теорема. Интегральная теорема Муавра-Лапласа 49.24 KB
  Центральная предельная теорема. Интегральная теорема МуавраЛапласа. Обратно если в каждой точке непрерывности функции является функцией распределения то в каждой точке t при этом есть характеристическая функция для функции распределения Интегральная теорема Муавра – Лапласа: Если вероятность p события в каждом испытании постоянна и отлична как от нуля так и от единицы то вероятность того что событие появится в n испытаниях от до раз приближенно равна определенному интегралу: где .
30573. Основные типы статистических гипотез. Общая логическая схема статистического критерия 37.33 KB
  Процедура обоснованного сопоставления высказанной гипотезы с имеющимися в нашем распоряжении выборочными данными х1 х2. Результат подобного сопоставления может быть либо отрицательным данные наблюдения противоречат высказанной гипотезе а потому от этой гипотезы следует отказаться либо неотрицательным данные наблюдения не противоречат высказанной гипотезе а потому ее можно принять в качестве одного из естественных и допустимых решений. При этом неотрицательный результат статистической проверки гипотезы не означает что высказанное...