В предыдущем уроке мы для каждого элемента применяли не более одного класса. В CSS можно применять несколько классов к одному элементу, для этого имена классов нужно разделять пробелом, например, как в примере 1.
абзац
Почему удобно применять несколько классов к одному элементу? Рассмотрим HTML код 2 примера.
Во-первых, порядок перечисления имен классов не имеет значения. Во-вторых, мы можем писать любое количество классов для элемента.
Вернемся к примерам 2 и 3. Запустив данный код, вы увидите, что первый абзац красного цвета и у него полужирное начертание, второй абзац только с полужирным начертанием, а третий, просто красный. То есть в первом абзаце, где мы написали два класса: bold и color_red , мы комбинировали красный цвет и полужирное начертание.
Используем два класса
Общее оформление для всех преимуществ готово, теперь надо «раскидать» их по тарифам.
Вспомните, как мы отделили элементы-преимущества от обычных элементов. Мы добавили им класс, который говорит, что перед нами преимущество ( advantages-item ). Можем ли мы некоторым преимуществам добавить ещё один класс, который привяжет их к какому-то тарифу и отделит их от других преимуществ? Можем, и тогда у одного элемента будет сразу два класса.
На самом деле у HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:
Использование нескольких классов — это типовой приём, который ещё называется миксованием классов. Обычно его используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации. В примере выше размеры карточек товаров можно описать в CSS-правиле .product , а особый фон для хита продаж — в правиле .hit . В общем, удобный приём, помогает сократить дублирование кода.
Осталось придумать наши классы для тарифов. Для эконом-тарифа дополнительный класс вводить не будем, для стандартного тарифа используем класс standard , а для вип-тарифа — vip . Всё, можно дорабатывать разметку.
Перейти к заданию
index.html Сплит-режим
style.css Сплит-режим
Магазин товаров для дома
Gloevk
Разнообразные товары для дома с доставкой по всей планете
Что поможет вам создать домашний уют?
Что выделяет нас среди конкурентов?
Атрибут class
Атрибут class задает один или несколько классов для элемента (под элементом имеется ввиду тег).
Это делается для того, чтобы затем обратиться через CSS к группе элементов, у которых задан одинаковый класс, и применить для него определенные свойства (к примеру, сменить цвет текста, размер шрифта и так далее).
Существует также атрибут id, который подобно атрибуту class позволяет выбирать элементы на HTML странице.
Разница между атрибутом class и атрибутом id в том, что class выбирает группу элементов (даже если он дан одному элементу — его в последствии можно дать и другому), а id выбирает уникальный элемент (больше элемента с таким id не должно быть на странице сайта, иначе будет конфликт).
Как понять, что давать элементу — класс или id? Класс дается тем элементам, которые повторяются на страницах сайта (чтобы по несколько раз не писать один и тот же CSS код). Даже если у вас сейчас данный элемент один, но вы чувствуете, что похожие элементы могут появится в дальнейшем — давайте этому элементу класс. Если же вы уверены, что такой элемент уникальный — то давайте ему id. Хотя в настоящее время есть тенденция к тому, чтобы всем элементам давать класс, а id оставить для JavaScript, но она не является общепринятой.
Элементу можно задать несколько классов, в этом случае их следует перечислять через пробел.
Названия классов должны быть набраны английскими буквами, цифрами, без пробелов (пробел отделяет классы друг от друга, вместо него можно использовать подчеркивание или дефис). Классы не должны начинаться с цифры (в HTML5 уже можно, но не будет работать в старых браузерах).
Имена классам следует давать на английском языке (а не на русском, просто английскими буквами!). Имена должны быть осмысленными, отражать суть класса.
Пример
Давайте всем абзацам с классом test зададим красный цвет текста:
Абзац с классом test.
Контрольный абзац без класса.
.test < color: red; >
Пример . Несколько классов для элемента
А здесь давайте первому абзацу зададим несколько классов — test1 и test2 (запишем их через пробел). Класс test1 задает красный цвет тексту, а класс test2 задает размер шрифта в 20px . Второму абзацу дан только класс test1 (этот абзац станет красным), а третьему абзацу — класс test2 (этот абзац будет иметь размер шрифта в 20px). Первый абзац, у которого два класса, будет иметь одновременно и красный цвет и размер шрифта в 20px :
Абзац с двумя классами test1 и test2.
Абзац с классом test1.
Абзац с классом test2.
Контрольный абзац без классов.
.test1 < color: red; >.test2 < font-size: 20px; >
Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Тег.Имя класса < свойство1: значение; свойство2: значение; . >
Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class=»Имя класса» (пример 8.1).
Пример 8.1. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Классы
Для искусственного освещения помещения применяются люминесцентные лампы. Они отличаются высокой световой отдачей, продолжительным сроком службы, малой яркостью светящейся поверхности, близким к естественному спектральным составом излучаемого света, что обеспечивает хорошую цветопередачу.
Результат данного примера показан на рис. 8.1.
Рис. 8.1. Вид текста, оформленного с помощью стилевых классов
Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.
Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса < свойство1: значение; свойство2: значение; . >
При такой записи класс можно применять к любому тегу (пример 8.2).
Пример 8.2. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Классы
Согласно , шумовой характеристикой рабочих мест при постоянном шуме являются уровни звуковых давлений в децибелах в октавных полосах. Совокупность таких уровней называется , номер которого численно равен уровню звукового давления в октавной полосе со среднегеометрической частотой 1000 Гц.
Результат применения классов к тегам и показан на рис. 8.2.
Рис. 8.2. Вид тегов, оформленных с помощью классов
Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».
Пример 8.3. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Камни
Название
Цвет
Твердость по Моосу
Алмаз
Белый
10
Рубин
Красный
9
Аметист
Голубой
7
Изумруд
Зеленый
8
Сапфир
Голубой
9
Рис. 8.3. Результат применения классов
Одновременное использование разных классов
К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
В примере 8.4 показано использование разных классов для создания облака тегов.
Пример 8.4. Сочетание разных классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Облако тегов
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент
Результат данного примера показан на рис. 8.4.
Рис. 8.4. Облако тегов
В стилях также допускается использовать запись вида .layer1.layer2 , где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2 .
Вопросы для проверки
1. Какое имя класса написано правильно?
2layer1
1layer
Яndex
pink-floyd
28_days_later
2. Какой цвет будет у слова «потока» в коде?
При использовании следующего стиля?
Зелёный.
Синий.
Жёлтый.
Оранжевый.
Чёрный.
div[iddqd]
div.iddqd
iddqd.div
div#iddqd
div=iddqd
4. Какое имя класса следует добавить к тегу , чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?
