 |
Главная |
Порядок выполнения работы. Раздел 1. Группирование элементов с помощью class
 2015-12-15 |
 493 |
 Обсуждений (0) |
из
5.00
|
Раздел 1. Группирование элементов с помощью class
Обычно используется, когда нужно будет применить особый стиль к определённому элементу или конкретной группе элементов.
Задание 10.1
Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:
Default10_1.htm:
<html>
<head>
<title>Лабораторная №5</title>
</head>
<body>
<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>
</body>
</html>
Предположим, необходимо, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.
Для достижения этой цели разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.
Задание 10.2
Измените содержание выше созданного файла, сохраните под новым именем и просмотрите в браузере
Default10_2.htm:
<html>
<head>
<title> Лабораторная №5</title>
<style type="text/css">
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
</style>
</head>
<body>
<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>
</body>
</html>
Раздел 2. Идентификация элемента с помощью id
Помимо группирования элементов может возникнуть необходимость идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.
Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используется атрибут class. Рассмотрим пример использования id:
Задание 10.3
Default10_3.htm:
<html>
<head>
<title> Лабораторная №5</title>
</head>
<body>
<h1>Глава 1</h1>
...
<h2>Глава 1.1</h2>
...
<h2>Глава 1.2</h2>
...
<h1>Глава 2</h1>
...
<h2>Глава 2.1</h2>
...
<h3>Глава 2.1.2</h3>
</body>
</html>
Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе. Предположим заголовок, chapter 1.2, должен быть красным. Это делается в соответствии с CSS. Аналогично можно задать параметры и для остальных заголовков. Сделайте это самостоятельно.
Задание 10.4
Измените содержание выше созданного файла, сохраните под новым именем и просмотрите в браузере
Default10_4.htm:
<html>
<head>
<title> Лабораторная №5</title>
<style type="text/css">
#c1-2 {
color: red;
}
</style>
</head>
<body>
<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>
</body>
</html>
Раздел 3. Группирование с помощью <span>
Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.
Пример - цитата из Бенджамина Франклина:
Задание 10.5
Default10_5.htm:
<html>
<head>
<title> Лабораторная №5</title>
</head>
<body>
<p>Кто рано ложится и рано встаёт,
тот будет здоровым, богатым и умным</p>
</body>
</html>
Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью <span>. Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:
Задание 10.6
Измените содержание выше созданного файла, сохраните под новым именем и просмотрите в браузере
Default10_6.htm:
<html>
<head>
<title> Лабораторная №5</title>
<style type="text/css">
span.benefit {
color:red;
}
</style>
</head>
<body>
<p>Кто рано ложится и рано встаёт,
тот будет <span class="benefit">здоровым</span>,
<span class="benefit">богатым</span>
и <span class="benefit">умным</span>.</p>
</body>
</html>
Можно также использовать id для определения стиля <span>-элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх <span>-элементов.
Раздел 4. Группирование с помощью <div>
В то время как <span> используется в элементах уровня блока, как в предыдущем примере, <div> применяется для группирования одного или более блок-элементов.
Кроме этого отличия, группирование с помощью <div> работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:
Задание 10.7
Default10_7.htm:
<html>
<head>
<title> Лабораторная №5</title>
<style type="text/css">
#democrats {
background:blue;
}
#republicans {
background:red;
}
</style>
</head>
<body>
<div id="democrats">
<ul>
<li>Франклин Д. Рузвелт</li>
<li>Гарри Трумэн</li>
<li>Джон Ф. Кеннеди</li>
<li>Линдон Б. Джонсон</li>
<li>Джимми Картер</li>
<li>Билл Клинтон</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Дуайт Д. Эйзенхауэр</li>
<li>Ричард Никсон</li>
<li>Джэралд Форд</li>
<li>Роналд Рейган</li>
<li>Джордж Буш</li>
<li>Джордж У. Буш</li>
</ul>
</div>
</body>
</html>
Контрольные вопросы:
1. Как идентифицировать элементы блока?
2. Как задать группировку элементов блока?
Лабораторная работа№11
Боксовая модель
Цель работы:получить навыки создания боксовой модели.
Задачи:
научиться создавать боксовые модели;
научиться правильно позиционировать элементы в боксовой модели;
научиться создавать слои в CSS и оперировать ими.
| 2015-12-15 |
493 |
Обсуждений (0) |
из
5.00
|
Обсуждение в статье: Порядок выполнения работы. Раздел 1. Группирование элементов с помощью class |
|
Обсуждений еще не было, будьте первым... ↓↓↓ |
Почему 1285321 студент выбрали МегаОбучалку...
Система поиска информации
Мобильная версия сайта
Удобная навигация
Нет шокирующей рекламы