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

Добавление CSS-классов к элементам

Вы можете добавить вплоть до 5 значений атрибута class почти к каждому элементу на вашем сайте. С помощью CSS-классов можно осуществлять необходимые вам изменения элементов путем добавления CSS-кода.

Подсказка: вы можете добавить необходимый вам CSS-код с помощью данной инструкции. Добавление кода доступно только для сайтов с платными подписками.

Добавление CSS-классов

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

Перейдите во вкладку Продвинутые и введите необходимое имя класса для элемента в поле раздела Имена CSS-классов :

Важно: каждый CSS-класс должен начинаться с перфикса «wl-» (без кавычек). Это необходимо, чтобы отличить ваши собственные классы от используемых нашей платформой.
Примечание: минимальная длина имени класса — 4 символа (вместе с префиксом «wl-«), максимальная длина — 25 символов.

Вы можете добавить больше CSS-классов к элементу с помощью кнопки Добавить класс :

Примечание: можно добавить максимум 20 CSS-классов к одному элементу.

Готово. Теперь вы можете использовать этот CSS-класс во время добавления собственного кода на ваш сайт. Пример:

Опубликуйте ваш сайт, чтобы изменения вступили в силу.

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

Обновлено на: 09/12/2022

Была ли эта статья полезна?

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

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

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

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, а также селекторам потомков.

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

25 ФЕВРАЛЯ 2022
CSS-класс для блоков

В настройках блоков появилась возможность задавать CSS-класс. Эта функция позволит удобнее работать с модификациями: вы задаёте класс блоку и указываете его название в html-коде.

Примеры и пошаговая инструкция, как применить новую функцию.

Градиент на текстовом блоке

Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.

Как сделать

1 шаг
Добавьте блок с большим текстом, например, AB501.

Откройте настройки блока, нажмите Добавить CSS Class Name;
Задайте название класса, например, uc-about.

Добавьте блок T123 HTML-код;
Скопируйте код ниже и вставьте его в блок T123.

 .uc-about .t-title

→ Сохраните изменения и опубликуйте страницу

Скруглённые фотографии
Some Words About Us

We are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.

Как создать класс СSS с помощью JS?

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

card.addClass('card--collection');

Этот класс мне нужно изменить. Его значение width , которое прописано в СSS.
Отслеживать
3,075 2 2 золотых знака 11 11 серебряных знаков 36 36 бронзовых знаков
задан 16 дек 2021 в 17:10
47 6 6 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если очень нужно отредактировать сами правила, то можно работать с CSSOM напрямую:

function test() < const i = [. document.styleSheets[0].cssRules].findIndex(e =>e.selectorText === ".card--collection") const myClassRule = document.styleSheets[0].cssRules[i]; myClassRule.style.width = "10.1em"; >

.card--collection

Отслеживать
ответ дан 16 дек 2021 в 18:07
4,396 23 23 золотых знака 23 23 серебряных знака 25 25 бронзовых знаков
Немного не понял, а как оно поймет к какому именно классу обратиться?
16 дек 2021 в 18:23
Это уже работа с коллекциями — я привел упрощенный пример в ответе.
16 дек 2021 в 18:41

Команда может выглядеть так:

card.setAttribute('class', 'card--collection')

Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 16 дек 2021 в 17:17

Мне нудно для класса card—collection изменить свойства. Тоесть у него в CSS прописано width:19.1em; а мне нужно принудительно ему задать width:10.1em.

16 дек 2021 в 17:20
document.querySelector(‘.card—collection’).style.width = ‘10.1em’;
16 дек 2021 в 17:45

@СергейГуртовой инлайн стили переписывают свойства классов. Вы можете задать следующим способом: card.style.width = ‘10.1em’.

16 дек 2021 в 17:45

document.querySelector(‘.card—collection’).style.width = ‘10.1em’; – Error: Cannot read properties of null (reading ‘style)

16 дек 2021 в 17:52
Быть может вы запускаете скрипт до прогрузки страницы? Я повторил код у себя, все работает
16 дек 2021 в 17:58

javascript
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Читать:

Как настроить карбюратор на хонда дио 18