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

К началу


 

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

46558. Реструктуризация и реорганизация предприятия 20.06 KB
  Виды реструктуризации Реструктуризация зависящая от целевых установок и стратегии предприятия может быть оперативной или стратегической. Частичная реструктуризация вносит изменения лишь в один или несколько элементов предприятия. Направления реструктуризации предприятия Выбор конкретных видов реструктурирования зависит от конкретных внутренних возможностей и интересов самого предприятия а также от внешних условий характеризующих данную ситуацию.
46559. Стратегии социально – экономического развития экономики: процессы модернизации и инновационного развития 20.08 KB
  Базой успешной экономической стратегии государств и ключевым ресурсом общества становятся знания и интеллект информация и инновации человеческий и интеллектуальный потенциал формируемые главным образом через систему подготовки кадров. Инновации могут быть признаны таковыми если они прямо или косвенно становится фактором экономического роста. Прямо – когда инновации становятся торгуемыми товарами и услугами. Косвенно – когда инновации воплощены в конструкции товаров технологии их изготовления квалификации работников факторы роста – труд...
46560. Прогнозирование пожарной обстановки и ее оценка 20.13 KB
  Такая обстановка может возникнуть при ЯВ изза воздействия СИ техногенных пожарах на объектах экономики и природных пожарах в лесах и на торфяниках. В процессе прогнозирования определяют площадь и периметр возможного пожара характер пожара отдельный или сплошной пожар огненный шторм или массовый пожар вероятные направления и скорость его распространения а также вероятный характер воздействия пожара на людей и объекты в различные временные отрезки с учетом изменения метеоусловий. При этом берут самый неблагоприятный вариант: ось пожара...
46562. Анализ программы «Изобразительное искусство и художественный труд» под ред. Б.М. Неменского (1-9 класс) 20.16 KB
  План: 1 Концепция Программа и ее особенности 2 задачи 3 основа программыпринципа 4 основные виды деятти 5 учебнометодич. Программа знакомит учащихся с тремя основными видами художественной деятельности: конструктивной изобразительной декоративной деятельностью. 4 Основные виды деятельности изображение на плоскости и в объеме с натуры по памяти и по представлению; декоративная и конструктивная работа; лепка; аппликация; объемнопространственное моделирование; проектноконструктивная деятельность; художественное...
46563. Контроль и учет успеваемости учащихся на уроках изобразительного искусства. Отметка и оценка. Критерии оценки 20.21 KB
  Наряду с восприятием памятью и мышлением важную роль в деятельности человека играет воображение. Воображение это психический познавательный процесс создания новых представлений на основе имеющегося опыта то есть процесс преобразующего проецирования действительности. Воображение – это образное конструирование содержания понятия о предмете или проектирование схемы действий с ним еще до того как сложится само понятие а схема получит отчетливое верифицируемое и реализуемое в конкретном материале выражение. Будучи теснейшим образом...
46564. Методы и средства пожаротушения 20.24 KB
  Существенные перспективы повышения эффективности средств пожаротушения создают комбинированные составы вода со смачивателями инертными порошками и газами. К первичным средствам пожаротушения относятся огнетушители гидропомпы бочки ведра с водой ящики с песком кошмы маты и т. К основным средствам пожаротушения относят автоцистерны с без лафетного ствола пожарные насосы различные стационарные установки пожаротушения.
46565. Основные дидактические принципы методики обучения ИЗО в школе. Художественная педагогика и ее принципы 20.26 KB
  е всестороннее развитие и воспитание учащихся средствами пластических искусств принцип научности системности и последовательности в обучение использ знание законов композиции теории перспективы теории цветоведенья т. Воспитание как общественное и историческое явление. Воспитание – целенаправленный процесс формирования личности с помощью специально организованных педагогических воздействий в соответствии с определенным социальнопедагогическим идеалом.Воспитание как общественное явление характеризуется следующими основными чертами...
46566. Подготовка учителя к уроку изобразительного искусства. Конспект урока и способы его оформления 20.35 KB
  Вывод: подготовка учителя к уроку ИЗО позволяет: четко осознать цель стратегические и тактические задачи; целенаправленно разработать содержание и выбрать средства организационные формы работы; спрогнозировать результаты своей деятельности. В рамках учебной деятельности складываются психологические новообразования характеризующие наиболее значимые достижения в развитии младших школьников и являющиеся фундаментом обеспечивающим развитие на следующем возрастном этапе. Усвоение в ходе учебной деятельности основ теоретического сознания...