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

В следующем уроке мы разберём два HTML-элемента, которые широко используются в сочетании с CSS: < span> и < div>.

Урок 8: Группирование элементов (span и div)

Элементы < span> и < div> используются для структурирования документа, часто совместно с атрибутами class и id.

В этом уроке мы подробно рассмотрим, как использовать < span> и < div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.

• Группирование с помощью < span>
• Группирование с помощью < div>

Группирование с помощью < span>

Элемент < span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, < span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.

Пример - цитата из Бенджамина Франклина:

< p> Кто рано ложится и рано встаёт,
тот будет здоровым, богатым и умным< /p>

Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью < span>. Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:

< p> Кто рано ложится и рано встаёт,
тот будет < span class=" benefit" > здоровым< /span>,
< span class=" benefit" > богатым< /span>
и < span class=" benefit" > умным< /span>. < /p>

В CSS:

span.benefit { color: red; }

• Показать пример

Разумеется, вы можете также использовать id для определения стиля < span> -элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх < span> -элементов, как мы говорили в прошлом уроке.

Группирование с помощью < div>

В то время как < span> используется в элементах уровня блока, как в предыдущем примере, < div> применяется для группирования одного или более блок-элементов.

Кроме этого отличия, группирование с помощью < div> работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:

< 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>

В нашей таблице стилей мы можем использовать такое же группирование, как и раньше:

#democrats { background: blue; } #republicans { background: red; }

• Показать пример

В этих примерах мы использовали < div> и < span> для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как.... Однако это - не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике.

Резюме

В Уроках 7 и 8, вы узнали о селекторах id и class и об элементах span и div.

Теперь вы должны уметь, более или менее, группировать и идентифицировать все части документа, что уже является большим шагом в освоении CSS. В Уроке 9 мы дадим понятие Боксовой модели.

Урок 9: Боксовая модель

Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов. Боксовая модель также имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На диаграмме далее показано, как построена боксовая модель:

Боксовая модель в CSS

Эта иллюстрация может показаться слишком научной, поэтому попытаемся использовать эту модель на конкретном примере с заголовком и текстом. HTML нашего примера таков (из Всеобщей Декларации Прав Человека):

< h1> Article 1: < /h1> < p> All human beings are born free и equal in dignity и rights. They are endowed with reason и conscience и should act towards one another in a spirit of brotherhood< /p>

Добавив цвет и информацию шрифта этот пример можно представить так:

В этом примере - два элемента: < h1> и < p>. Боксовая модель этих элементов выглядит так:

Хотя это может показаться немного сложным, тем не менее, видно, что каждый HTML-элемент окружён боксом. Боксом, который можно настроить с помощью CSS.

< % '

The properties which regulate the different boxes are: padding, margin and border. The next two lessons deal with exactly these three properties:

'

'

• Lesson 10: The box model - margin & padding

'

• Lesson 11: The box model - border

'

'

When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML.

%>

Резюме

В этом уроке вы узнали о боксовой модели. В следующих трёх уроках мы подробнее остановимся на том, создавать элементы и управлять ими в боксовой модели.

Урок 10: Поля и заполнение

В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами margin и padding.

• Установим поля элемента
• Установим заполнение элемента

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа). См. также диаграмму в Уроке 9.

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента < body>. На иллюстрации показано, какие поля нам нужны.

CSS-код для этого примера выглядит так:

body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

Или вы можете написать более элегантно:

body { margin: 100px 40px 10px 70px; }

• Показать пример

Вы можете установить поля примерно таким же образом почти для любого элемента. Например, мы можем определить поля для всех параграфов < p>:

⇐ Предыдущая12345Следующая ⇒

Поделиться: