Как создать класс в css

Результат применения классов к тегам и показан на рис. 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. Какое имя класса написано правильно?

1. 2layer1
2. 1layer
3. Яndex
4. pink-floyd
5. 28_days_later

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

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

1. Зелёный.
2. Синий.
3. Жёлтый.
4. Оранжевый.
5. Чёрный.

1. div[iddqd]
2. div.iddqd
3. iddqd.div
4. div#iddqd
5. div=iddqd

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

Классы в CSS

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.

Что ж, конспект мы снова раскрасили, но какой ценой. Давайте признаем, что добавлять внутрь абзацев дополнительные теги и раскрашивать текст с их помощью, не самое лучшее решение. Ну, а какое решение хорошее?

Такое решение есть и оно называется «классы»!

Вспомните шаг, когда мы пытались стилизовать абзацы с помощью внешних стилей, но все они получились одинакового цвета.

Нужно было сделать следующее: добавить абзацам разные классы, а в CSS использовать селекторы не по тегу, а по классам.

Класс — это всего лишь один из атрибутов HTML-тегов, например:

В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса , например:

.important < color: red; >— выберет все теги с классом "important" .help < color: green; >— выберет все теги с классом "help"

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

Имя класса может содержать в себе латинские символы, цифры, символ дефиса — и подчёркивания _ и начинаться оно должно с латинского символа.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Конспект курса

Парные теги.

Одиночные теги.

Атрибуты тегов.

Инлайновые (встроенные) стили.

Внешние стили.

Стилизация по классам.

body < font-family: "Tahoma", serif; >h1 < color: #999999; >strong < color: green; >em < color: red; >.learned-ok < color: green; >.learning-in-progress < color: orange; >.not-learned < color: red; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить
Задачи Выполнено

Переделываем всё c нормальными классами:

1. Для начала удалите из HTML-кода все strong и em , чтобы внутри p остался только текст .
2. Первым четырём абзацам добавьте класс learned-ok .
3. Пятому абзацу добавьте класс learning-in-progress .
4. Шестому абзацу добавьте класс not-learned .

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

• Наша группа в ВК
• Наша страница в Twitter
• Наш канал в Telegram

Практикум

• Курсы для новичков
• Подписка
• Для команд и компаний
• Учебник по PHP

Профессии

• Фронтенд-разработчик
• JavaScript-разработчик
• Фулстек-разработчик

• HTML и CSS.
  Профессиональная вёрстка сайтов
• HTML и CSS.
  Адаптивная вёрстка и автоматизация
• JavaScript.
  Профессиональная разработка веб-интерфейсов
• JavaScript.
  Архитектура клиентских приложений
• React.
  Разработка сложных клиентских приложений
• Node.js.
  Профессиональная разработка REST API
• Node.js и Nest.js.
  Микросервисная архитектура
• TypeScript. Теория типов
• Алгоритмы и структуры данных
• Паттерны проектирования
• Webpack
• Vue.js 3. Разработка клиентских приложений
• Git и GitHub
• Анимация для фронтендеров

• Учебник по Git
• Справочник по HTML
• Истории успеха

Информация

• Об Академии
• О центре карьеры

Часть 1. Селекторы CSS. Теги, классы, ID, группы

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

1. Селекторы тегов.
2. Селекторы классов.
3. Селекторы ID.
4. Селекторы групп.

1. Селекторы тегов

Если вам необходимо изменить внешний вид содержимого, которое находится в каком-либо теге, используйте CSS селекторы тегов. Допустим, вам нужно изменить шрифт и цвет всех тегов , которые имеются на веб-странице. Для этого вам понадобится создать стиль, где селектором будет h3 (обратите внимание: в CSS угловые скобки <> тега не записываются, а используется только его имя):

Написав один такой стиль, вы измените шрифт сразу для всех тегов на странице, сколько бы их ни было. Согласитесь, что это очень быстро и удобно. Аналогично можно создавать стили для других тегов, заменяя название селектора на нужное вам ( p , h1 , h2 , h3 и т. д.).

2. Селекторы классов

Классы CSS – это отличный инструмент, который расширяет возможности создания стилей в разы. Для лучшего понимания мы будем рассматривать всё на примерах.

Итак, чуть выше мы применили стиль для всех тегов на веб-странице – текст имеет шрифт Geneva и оранжевый цвет. Но что делать, если вам понадобилось изменить цвет одного из тегов на зеленый? На помощь приходят селекторы классов. Всё что вам необходимо сделать, это создать стиль, где селектор – придуманное вами имя класса. Мы назовем класс greentext и запишем правило:

.greentext

Но это еще не всё. Теперь, чтобы изменить цвет для одного из тегов на странице, нужно отредактировать HTML-документ, применив класс greentext к необходимому нам тегу. Записывается это так:

Созданный класс можно применять к любым элементам веб-страницы. Вы можете придавать стиль не только целым заголовкам и абзацам, но и отдельным фрагментам страницы, например, словам (используя рассмотренный нами в первой и второй главе тег и присваивая ему класс).

Запомните несколько правил написания классов:

• в CSS перед названием селектора класса обязательно ставится точка (но при присвоении класса в HTML-документе эта точка не нужна);
• в названии классов можно использовать только буквы латинского алфавита, дефис, символ подчеркивания, цифры;
• название класса всегда должно начинаться с буквы (правильные варианты названий: .intro , .img-border , .nav_menu_01 ; неправильные: .2color , .-link , ._divider );
• названия классов CSS чувствительны к регистру, поэтому классы вроде .review и .Review будут восприниматься как два отдельных.

3. Селекторы ID

Идентификатор определяет уникальное название элемента. Записывается он почти так же, как и класс, только в CSS вместо точки ставится символ решетки # :

#footer

В HTML-документе идентификатор присваивается с помощью атрибута id :

Возможно, у вас возник вопрос: в чем разница между идентификатором и классом? Существует несколько отличий:

• ID – это уникальное название элемента на веб-странице, которое должно встречаться на ней только один раз (например, шапка сайта и подвал: id=»header» и id=»footer» ), в то время как класс может присваиваться нескольким элементам с целью отличать их от остальных;
• идентификаторы удобны для JavaScript-разработчиков, поскольку позволяют получить быстрый доступ к элементу DOM из скриптов (во многом именно поэтому необходимо, чтобы ID встречался на странице лишь один раз);
• каждое правило CSS имеет свой так называемый вес (от веса зависит, какое из правил получит более высокий приоритет при выполнении). Идентификатор имеет больший вес, чем класс, поэтому, если элементу присвоен и ID, и класс, предпочтение отдается ID. Пример:

#text < color: yellow; >.content

4. Селекторы групп

Мы подошли к четвертому типу селекторов CSS – групповые селекторы. Представьте ситуацию, что вам необходимо сделать шрифт жирным для нескольких элементов веб-страницы – p , h1 , h2 , h3 . Можно было бы записать этот стиль отдельно для каждого элемента:

p < font-weight: bold; >h1 < font-weight: bold; >h2 < font-weight: bold; >h3

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

p, h1, h2, h3

Конечно, в перечислении могут участвовать не только селекторы тегов, но и классы, и идентификаторы.

А если по какой-то причине вам необходимо создать стиль абсолютно для всех элементов веб-страницы, можно воспользоваться универсальным селектором CSS, для обозначения которого используется символ звездочки * :

Выводы

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

Для изменения стиля содержимого тегов используйте селекторы тегов.

Если вам нужен более гибкий инструмент, который позволит создать стиль для одного конкретного элемента либо определенной группы элементов, используйте классы CSS.

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

Чтобы применить одинаковый стиль сразу к нескольким элементам веб-страницы, используйте групповой селектор. Если нужно стилизовать абсолютно все элементы страницы, можно задействовать универсальный селектор.

Вторая часть третьей главы посвящена псевдоклассам и псевдоэлементам CSS, а также селекторам потомков.