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

К началу


 

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

84089. Монархическая форма правления её признаки и виды 22.49 KB
  Форма правления представляет собой структуру высших органов государственной власти порядок их образование и распределение компетенции между ними. Форма государственного правления дает возможность уяснить: как создаются высшие органы государства и какого их строение; как строятся взаимоотношения между высшими и другими государственными органами; как строятся взаимоотношения между верховной государственной властью и населением страны; в какой мере организация высших органов rocва позволяет обеспечивать права и свободы гражданина. По...
84090. Республиканская форма правления признаки и виды 22.12 KB
  Установлена республиканская форма правления. Эта республиканская форма правления отличается от монархии которой присуще наследование статуса главы государства. Если рассматривать форму правления с чисто формальных позиций то можно сказать что она не оказывает определяющего влияния на характер государственного строя.
84091. Смешанные формы правления в современном мире 24.83 KB
  Так было во время и после буржуазных революций в Европе и Америке: молодая прогрессивная буржуазия возглавлявшая широкие слои населения добилась ограничения власти монарха ликвидации абсолютизма установления дуалистической или парламентарной монархии а иногда и республики например в США. В ходе этого исторического развития были и своеобразные зигзаги: республика при фашизме во главе с фюрером дуче каудильо мало чем по существу отличалась от монархии хотя юридически форма была иной а республики в социалистических странах странах...
84092. Форма правления: понятие и виды 16.75 KB
  Форма правления представляет собой структуру высших органов государственной власти порядок их образование и распределение компетенции между ними. Форма государственного правления дает возможность уяснить: как создаются высшие органы государства и какого их строение; как строятся взаимоотношения между высшими и другими государственными органами; как строятся взаимоотношения между верховной государственной властью и населением страны; в какой мере организация высших органов государства позволяет обеспечивать права и свободы...
84093. Унитарное государство признаки и виды 20.55 KB
  Унитарное государство характеризуется следующими признаками: унитарное устройство предполагает единые общие для всей страны высшие исполнительные представительные и судебные органы которые осуществляют верховное руководство соответствующими органами; на территории унитарного государства действует одна конституция единая система законодательства одно гражданство; составные части унитарного государства области департаменты округа провинции графства государственным суверенитетом не обладают; унитарное государство на территории...
84094. Федерация: понятие и признаки, виды 23.76 KB
  Существуют следующие формы государственного устройства: 1 Унитарное государство 2 Федеративное государство 3 Конфедеративное на данный момент не существует в природе 4 Региональное государство Федеративное государство представляет собой добровольное объединение ранее самостоятельных государственных образований в одно союзное государство государство состоящее из государств членов или государственных образований субъектов федерации. На данный момент в мире насчитывается 24ре федерации. Федерации бывают: а Договорные и...
84095. Форма государственного устройства: понятие и виды 21.73 KB
  Территория федерации состоит из территорий ее отдельных субъектов: штатов кантов земель республик и т. Субъекты федерации имеют право принятия собственной конституции имеют свои высшие исполнительные законодательные и судебные органы 4. В большинстве федерации существует союзное гражданство и гражданство федеральных единиц. При федеральном государственном устройстве в парламенте имеется палата представляющая интересы членов федерации.
84096. Демократический режим и его признакии 22.3 KB
  В демократическом государстве существует взаимная ответственность государства и личности.Предоставление широкой свободы личности предприятиям и организациям в сфере экономической деятельности которая при демократическом политическом режиме составляет основу материального благосостояния граждан.Реальная гарантированность прав и свобод личности и реальная возможность реализовать данные права и свободы.Наличие эффективной и квалифицированной судебной защиты прав и свобод личности от произвола и беззакония со стороны кого бы то ни было.
84097. Антидемократические государственно-правовые режимы 25.92 KB
  Основными чертами тоталитарного политического режима являются следующие: государство стремится к глобальному господству над всеми сферами общественной жизни к всеохватывающей власти; общество полностью отчуждено от политической власти но оно не осознает этого ибо в политическом сознании формируется представление о единстве слиянии власти и народа; господствует монопольный контроль над экономикой средствами массовой информации культурой религией и т. фактически устраняется плюрализм; происходит централизация государственной...