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

К началу


 

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

43234. Інструментальне забезпечення технологічного процесу виготовлення деталі 530 KB
  Навчитись проектувати та проводити аналіз різального інструменту для забезпечення технологічного процесу виготовлення деталі Група: Курс: Студент Керівник проекту Вхідні дані: торець валу 80 матеріал валу – сталь 35 Базовий інструмент Етапи виконання роботи Назва етапу Примітки заповнюється керівником роботи за необхідністю Строк виконання Оцінка за етап 1. Аналіз множини вихідних інструментальних поверхонь спряжених з базової поверхнею деталі що обробляється....
43235. Баня на 200 мест в городе Тамбов 421 KB
  Обоснование размещения на участке проектируемого здания Назначение здания особенности функционально-технологического процесса основные группы помещений зоны Конструктивная схема здания Приемы и средства архитектурной композиции и художественной выразительности здания
43236. Разработка привода скребкового транспортёра с одной цепью 1.85 MB
  Выбор твердости термической обработки и материала колес Для изготовления колёс выбираем сталь 45 термообработка – улучшение до 192240НВ МПа МПа. Для изготовления шестерен выбираем сталь 40Х термообработка азотирование до 5559HRC твёрдость сердцевины зуба 2630HRC МПа МПа. Для колёс: МПа. Для шестерен: МПа.
43237. Лекции по общим разделам динамики материальной точки и механической системы 9.1 MB
  Дифференциальные уравнения движения материальной точки. Первая и вторая задача динамики. Алгоритмы их решения. Основной закон динамики относительного движения. Понятие о центре масс механической системы. Инерционные параметры твердого тела и механической системы. Дифференциальные уравнения движения механической системы в декартовой системе координат. Теорема о движении центра масс механической системы. Понятие о количестве движения материальной точки и механической системы...
43238. Дробильно-сортировочное предприятие 2.85 MB
  Передняя ходовая тележка состоит из собственной рамы, прицепного устройства, предназначенного для соединения с тягачом, рессор, оси с установленными на ней пневмоколесами. Соединение тележки с рамой агрегата осуществляется с помощью приваренной к раме цапфы, которую вставляют в центральное отверстие опорного основания тележки и крепят ригелем. Конструкция цапфы и ригеля позволяет транспортировать агрегат седельным тягачом. Задняя тележка прикреплена к раме агрегата с помощью подвесок.
43239. Определение нутриентного состава пищевых продуктов 540.5 KB
  В связи с этим в последние годы, к сожалению, безопасность человека в наибольшей степени определяется чистотой и доброкачественностью пищевых продуктов, алкогольных и безалкогольных напитков, так как многие вредные загрязнители обладают канцерогенными, мутагенными, тератогенными и иммуноугнетающими действиями.
43240. Разработка технологического процесса крышки подшипника 600.5 KB
  Служебное назначение детали и основные технические требования Конструкторский контроль чертежа детали. Анализ технических условий детали Анализ технологичности конструкции детали
43241. Расчет и проектирование сварной металлоконструкции мостового крана 228.5 KB
  В настоящее время крановые конструкции изготавливаются в форме балочных систем, хотя раньше применяли фермы (было распространено в промышленности). Проектирование фермы начинается с выбора её рациональной системы. Система фермы зависит от назначения, основных требований к эксплуатации и общей компоновки конструкции. Часто рациональная система определяется на основе опытного проектирования, сравнения нескольких вариантов и выбора оптимального решения. В данной работе я произвожу расчет и проектирование конструкции мостового крана.
43242. Проектирование и исследование механизма качающегося контейнера 693 KB
  Курсовое проектирование имеет большое значение в развитии навыков самостоятельной творческой работы студентов, так как прививает им навыки научно-исследовательской работы, рационализации, изобретательства, пользования справочной литературой, ГОСТами, нормами, таблицами и номограммами, а также навыки производства расчетов и составления расчетно-пояснительных записок к проектам, их графического исполнения на чертежных листах с соблюдением всех положений, регламентируемых стандартом.