No Image

Css два класса у одного элемента

СОДЕРЖАНИЕ
1 просмотров
11 марта 2020

Общее оформление для всех навыков готово, теперь надо «раскидать» их по тарифам.

Вспомните, как мы отделили элементы-навыки от обычных элементов. Мы добавили им класс, который говорит, что перед нами навык ( skills-item ). Можем ли мы некоторым навыкам добавить ещё один класс, который привяжет их к какому-то тарифу и отделит их от других навыков? Можем, и тогда у одного элемента будет сразу два класса.

На самом деле у HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:

Использование нескольких классов — это типовой приём, который ещё называется миксованием классов. Обычно его используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации. В примере выше размеры карточек товаров можно описать в CSS-правиле .product , а особый фон для хита продаж — в правиле .hit . В общем, удобный приём, помогает сократить дублирование кода.

Осталось придумать наши классы для тарифов. Для эконом-тарифа дополнительный класс вводить не будем, для стандартного тарифа используем класс standard , а для вип-тарифа — vip . Всё, можно дорабатывать разметку.

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут (пример 8.1).

Читайте также:  Глаз да винчи программа для iphone

Пример 8.1. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 8.1.

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.

Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8.2. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат применения классов к тегам и показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам

и получается чередование разных цветов.

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

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

Читайте также:  Создать email адрес электронной почты

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

В стилях также допускается использовать запись вида .layer1.layer2 , где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2 .

Вопросы для проверки

1. Какое имя класса написано правильно?

2. Какой цвет будет у слова «потока» в коде?

Коэффициент использования излучаемого светильниками потока , на расчетной плоскости.

При использовании следующего стиля?

3. Как задать стиль у тега

    div[ >4. Какое имя класса следует добавить к тегу

, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

Несколько классов для элемента

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

Классам вообще присуща достаточная универсальность. Один и тот же класс может быть присвоен разным элементам и, кроме этого, одному элементу можно присвоить несколько классов, благо, спецификация CSS 2.1 об этом явно указывает. Маленькая ремарка — следует помнить о том, что название класса не может начинаться с цифры или дефиса. Теперь пример:

Даже невооруженным глазом видно, что у параграфа 3 класса, отделенных друг от друга пробелами. Как таким элементом можно манипулировать?

Обратиться к такому многоклассовому параграфу можно называя один из классов

Если все эти правила будут упомянуты в таблице стилей в точно таком же порядке, то цвет текста в абзаце станет черным, поскольку: 1) действует принцип "работает последний", и, что более важно 2) у правила с одновременным обращением к элементу с помощью нескольких классов «сила воздействия» (специфичность, говоря официальным языком) выше одиночных. Все последние версии браузеров легко справляются с такой конструкцией.

Читайте также:  Microsd card adapter arduino

Ради любопытства остается понять, как ведет себя ослик под номером 6. А IE6, обрабатывая многочлен к одному элементу будет ориентироваться только на последний класс-селектор в цепочке. Поэтому, встретив запись

браузер от Microsoft раскрасит синим текст только в тех параграфах, в названии классов которых есть слово three (идет последним в цепи правила); наличие класса one не будет иметь значения.

Надеюсь, не сильно вас загрузил. Ответ на вопрос о том, как и где применять множественные классы оставляю на ваше усмотрение.

Комментировать
1 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
Adblock detector