Стиль класс: Стили и классы

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

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

Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.

1. Порядок следования
2. Специфичность
3. Важность

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

Порядок следования

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

Специфичность

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

Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.

Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.

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

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

Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:

1. Тысячи: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута style (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
2. Сотни: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.
3. Десятки: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
4. Единицы: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.

Примечание: Универсальный селектор (*), комбинаторы (+, >, ~, ») и псевдокласс отрицания (:not) не влияют на специфичность.

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

Селектор	Тысячи	Сотни	Десятки	Единицы	Специфичность
h2	0	0	0	1	0001
h2 + p::first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
Без селектора, с правилом внутри атрибута style элемента.	1	0	0	0	1000

Прежде чем мы продолжим, давайте посмотрим на пример в действии.

Так что здесь происходит? Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.

• Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
• Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
• Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.

Примечание: Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, миллион соединённых селекторов класса не способны переписать правила одного селектора id.

Более правильный способ вычисления специфичности состоит в индивидуальной оценке уровней специфичности, начиная с наивысшего и продвигаясь к самому нижнему, когда это необходимо. Только когда оценки уровня специфичности совпадают, следует вычислять следующий нижний уровень; в противном случае, вы можете пренебречь селекторами с меньшим уровнем специфичности, поскольку они никогда не смогут преодолеть уровни более высокой специфичности.

!important

Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — !important. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.

Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.

Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

1. Вы увидите, что применены значения color (en-US) и padding третьего правила, но background-color — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
2. Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
3. Оба элемента имеют class с названием better, но у второго также есть id с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
4. 2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления !important во втором правиле — размещение которого после border: none означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.

Примечание: Единственный способ переопределить объявление !important – это включить другое объявление !important в правило с такой же специфичностью позже или в правило с более высокой специфичностью.

Полезно знать о существовании !important, чтобы вы понимали, что это такое, когда встретите в чужом коде. Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости. !important меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.

Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.

Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.

Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:

1. Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).
2. Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).
3. Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками).
4. Важные объявления в авторских таблицах стилей.
5. Важные объявления в пользовательских таблицах стилей.

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

Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Test your skills: the Cascade.

Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.

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

Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.

• Обзор: Building blocks
• Далее

1. Каскад и наследование
2. Селекторы CSS
   • Селекторы типа, класса и ID
   • Селекторы атрибута
   • Псевдоклассы и псевдоэлементы
   • Комбинаторы
3. Модель коробки (The box model)
4. Фон и границы
5. Обработка разных направлений текста
6. Переполнение содержимого
7. Значения и единицы измерения
8. Изменение размеров в CSS
9. Элементы изображений, форм и медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация вашей CSS

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Полное руководство, 4-е издание)

HTML и XHTML: Полное руководство, 4-е издание Классы CSS2 позволяют создавать на уровне документа или во внешней таблице стилей несколько разных стилей для одних и тех же элементов, каждый из которых отличается именем класса. Чтобы применить класс стиля, назовите его как значение атрибута класса в соответствующем теге. 8.3.1. Регулярные занятия В технической статье вы можете захотеть определить один стиль абзаца для реферат, другой для уравнений и третий для центрированных цитаты. Ни один из тегов абзаца не может иметь явный контекст в документе, чтобы вы могли отличить его от других. Скорее, вы можете определить каждый как отдельный класс стиля: <стиль> Сначала обратите внимание на то, что определение класса — это просто вопрос добавления имени класса, разделенного точкой, в качестве суффикса к тегу имя в качестве селектора в правиле стиля. В отличие от XHTML-совместимого селектор, который является именем стандартного тега и должен быть в в нижнем регистре, имя класса может быть любой последовательностью букв, цифр, и дефисы, но должны начинаться с буквы.[53] Осторожно, регистр имеет значение, так что эта абстракция не то же самое, что Абстрактный. А классы, как и селекторы, могут быть включены с другими селекторами, разделенными запятыми, как в третьем пример. Единственным ограничением на классы является то, что они не могут быть вложенный: p.equation.centered не допускается, для пример. [53]Из-за его поддержка таблиц стилей JavaScript, Netscape не может обрабатывать class имена, которые совпадают с ключевыми словами JavaScript. Класс «abstract», например, генерирует ошибку в Нетскейп. Соответственно, первое правило в примере создает класс стили абзаца с именем «абстрактный», текст которого будет курсивом и с отступом от левого и правого полей на полсантиметра. Точно так же второй абзац style-class «уравнение» указывает браузеру центрировать текст и чтобы использовать шрифт Symbol для отображения текста. Последнее правило стиля создает стиль с текстом по центру и полями в полсантиметра, применение этого стиля ко всем заголовкам первого уровня, а также создание класс тега с именем в центре этого стиля. Чтобы использовать определенный класс тега, вы добавляете атрибут class к тегу, как в этом примере, как отображается в Internet Explorer на рис. 8-2: Это абстрактный абзац. Видите, как сдвинуты поля? Абзац с уравнением следует а = б + 1 Текст этого абзаца должен располагаться по центру. Рис. 8-2. Используйте классы, чтобы различать разные стили для одного и того же тега Для каждого абзаца значение класса атрибут — это имя класса, который будет использоваться для этого тега. 8.3.2. Общие классы Вы также может определять класс, не связывая его с конкретным тегом, и применяйте этот класс выборочно через свои документы для различных целей. тегов. Например: .italic {стиль шрифта: курсив} создает общий класс с именем курсив. Чтобы использовать его, просто включите его имя в атрибут класса. Так, например, используйте или для создания курсивного абзаца или заголовок. Общие классы очень удобны и позволяют легко применять определенный стиль для широкого круга тегов. Netscape Navigator и Internet Explorer поддерживает общие классы CSS2. 8.3.3. ID Classes Почти весь HTML теги принимают атрибут id, который назначает идентификатор элемента, уникального в документе. Этот идентификатор может быть целью URL-адреса, используемого автоматизированным документом инструменты обработки, а также может использоваться для указания правила стиля для элемент. Чтобы создать класс стиля, который можно применять с id, используйте тот же синтаксис, что и для классы стилей, за исключением символа # перед имя класса вместо точки. Этот стиль создает такие классы: <стиль> В вашем документе вы можете использовать , чтобы создать синий заголовок, или добавить id=yellow почти для любого тега, чтобы сделать его желтым. Ты можно смешивать и сочетать как класс, так и id атрибуты, дающие вам ограниченную возможность применить два независимых правила стиля к одному элементу. Использование классов, определенных таким образом, имеет существенный недостаток: значение атрибута id должно быть уникальным в пределах документа. Вы не можете легально повторно использовать class, хотя браузер может позволить вам обойтись без него. По этой причине мы настоятельно не рекомендуем создавать и использовать эти виды занятий. Придерживайтесь традиционного стиля занятий, чтобы создавать правильные, надежные документы. 8.3.4. Псевдоклассы В дополнение к обычным классам стилей, стандарт CSS2 определяет псевдоклассы, которые позволяют вам определять стиль отображения для определенного тега указывает . Псевдоклассы похожи на обычные классы с двумя примечательными отличия: они присоединяются к имени тега вместо двоеточия периода, и у них есть предопределенные имена, а не произвольные, которые вы может их дать. Существует семь псевдоклассов, три из которых явно связанный с тегом . 8.3.4.1. Псевдоклассы гиперссылок популярный Браузеры, совместимые с CSS2, различают три специальных состояния для гиперссылок, созданных Тег : не посещаемый, посещаемый и посетил. Браузер может изменить внешний вид тега содержимого, чтобы указать его состояние, например, с подчеркиванием или цветом. С помощью псевдоклассов вы можете контролировать, как эти состояния получаются. отображается путем определения стилей для a:link (не посещено), a:active (посещено) и а: посетил. Псевдокласс :link управляет внешним видом ссылки, которые не выбраны пользователем и еще не были посетил. Псевдокласс :active определяет появление ссылок, которые в данный момент выбраны пользователем и находятся обрабатывается браузером. : посетил псевдокласс определяет те ссылки, которые уже были посещены Пользователь. Чтобы полностью определить все три состояния <а> тег, вы можете написать: a:ссылка {цвет: синий} а: активный {цвет: красный; вес шрифта: полужирный} a: посетили {цвет: зеленый} Непосещенные ссылки будут показаны синим цветом. Когда пользователь выбирает ссылку, браузер изменит цвет текста на красный и сделает его полужирным. Один раз посетили, ссылка вернется к обычному зеленому тексту. 8.3.4.2. Псевдоклассы взаимодействия CSS2 стоять определяет два новых псевдокласса, которые вместе с :active, относятся к действиям пользователя и советуют интерактивный агент, такой как браузер, как отображать затронутые элемент, когда пользователь взаимодействует с элементом. Другими словами, эти два псевдокласса являются динамическими: hover и фокус. Например, когда вы перетаскиваете мышью гиперссылку в документ, браузер может изменить значок указателя мыши. Парящая банка ассоциироваться со стилем, который действует только тогда, когда нажата мышь. над элементом. Например, если вы добавите :hover псевдокласса к нашему примерному списку правила оформления гиперссылок: a:hover {цвет: желтый} текст, связанный с непросмотренными ссылками, будет отображаться синим цветом, становиться желтым, когда вы указываете на него мышью, становится красным, пока вы посетите его и станьте зеленым после того, как закончите посещение. Точно так же псевдокласс :focus позволяет изменить стиль для элемента, когда он становится объектом внимания. Ан элемент может быть в фокусе, когда вы переходите к нему, щелкаете по нему или, в зависимости от браузера переместите на него курсор. Независимо от того, как фокус попал на элемент, правила стиля, связанные с Псевдокласс фокуса применяется только тогда, когда элемент имеет фокус. 8.3.4.3. Вложенные и языковые псевдоклассы Новый CSS2: первый ребенок псевдокласс позволяет указать, как элемент может отображаться, когда он является первым дочерним элементом содержащего элемента. Например, следующее правило выбирает только те абзацы, которые являются первыми дитя дивизии; промежуточных элементов быть не может. Тогда и только тогда текстовое содержимое абзаца будет отображаться в курсив: div > p:first-child {font-style: italic} Соответственно, первый абзац в следующем фрагменте HTML будет отображаться курсивом в браузере, совместимом с CSS2, поскольку это первый дочерний элемент своего подразделения. И наоборот, второй абзац идет после заголовка уровня 2, который является первым дочерним элементом второго разделение. Итак, этот второй абзац в примере отображается в обычный текст, потому что это не первый дочерний элемент его подразделения: <дел> Я могу быть выделен курсивом. <дел> Новый раздел Я в простом тексте, потому что мой абзац является вторым потомком раздела. Наконец, стандарт CSS2 определяет новый псевдокласс, который позволяет выберите элемент на основе его языка. Например, вы можете включить атрибут lang=fr в тег , чтобы указать браузеру, что раздел содержит текст на французском языке. Браузер может специально относиться к тексту. Или вы можете навязать определенный стиль с помощью псевдокласс :lang. Например: div:lang(it) {font-family: Roman} говорит, что текст в разделах документа, содержащих итальянский язык должен использовать семейство латинских шрифтов. Уместно, не Вы думаете? Обратите внимание, что вы указываете язык в скобках сразу после ключевого слова lang. Используйте тот же двухбуквенный код стандарта ISO для псевдокласса :lang, как и для атрибута lang. Раздел 3.6.1.2, «Атрибут lang» 8.3.4.4. Браузерная поддержка псевдоклассов Ни один из популярных браузеров не поддерживает :lang, :first-child или :focus псевдоклассов пока нет. Все популярные браузеры поддерживают :link, :активный и :посещенный псевдоклассы для тега гиперссылки (). Несмотря на то, что :active также может использоваться для других элементы, ни один из браузеров пока не поддерживает приложения, выходящие за рамки тег <а>. :наведите псевдокласс отлично подходит для специальных эффектов на ссылки и другие элементов, но поддерживает его только Internet Explorer и только для гиперссылки. 8.3.5. Смешивание классов Вы можете смешивать псевдоклассы с обычными классами, добавляя имя псевдокласса на имя класса селектора. Например, Вот несколько правил, определяющих простые, нормальные и причудливые якоря: a. plain:link, a.plain:active, a.plain:visited {цвет: синий} a: ссылка {цвет: синий} a: посетил {цвет: зеленый} a: активный {цвет: красный} a.fancy: ссылка {стиль шрифта: курсив} a.fancy:посетил {стиль шрифта: обычный} a.fancy:active {начертание шрифта: полужирный; размер шрифта: 150%} Простая версия всегда синий, независимо от состояния ссылки. Нормальные ссылки начинаются становятся синими, становятся красными при активности и становятся зелеными при посещении. Причудливая ссылка наследует цветовую схему обычный тег , но добавляет курсивный текст для непросмотренные ссылки, преобразуются обратно в обычный текст после посещения, и на самом деле увеличивается на 50 процентов в размере и становится жирным, когда активен. Слово предупреждения об этом последнем свойстве причудливый класс: указание изменения размера шрифта для переходное свойство отображения приведет к повторному отображению в браузере активность, когда пользователь нажимает на ссылку. Учитывая, что некоторые браузеры работать на медленных машинах, это повторное отображение может раздражать ваших читателей. Учитывая также, что реализация такого рода изменения отображения является чем-то боли, маловероятно, что большинство браузеров будут поддерживать радикальные изменения внешнего вида в теге псевдоклассы. 8.3.6. Наследование класса Классы наследуют свойства стиля их общий базовый тег. Например, все свойства равнины Тег применяется к специально определенному класс абзаца, за исключением случаев, когда класс переопределяет конкретный свойство. Классы не могут наследовать от других классов, только от неклассифицированных версию тега, который они представляют. В общем, поэтому следует поместите как можно больше общих стилей в правило для базовой версии тегировать и создавать классы только для тех свойств, которые уникальны для этот класс. Это делает обслуживание и совместное использование ваших классов стиля проще, особенно для больших коллекций документов. 8.2. Синтаксис стиля 8.4. Свойства стиля Copyright © 2002 O’Reilly & Associates. Все права защищены.

Диспетчер стилей | Webflow University

В этом видео используется старый интерфейс. Скоро будет обновленная версия!

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

В этом уроке вы узнаете: 

1. Как получить доступ к Диспетчеру стилей
2. Анатомия Менеджера стилей
3. Как переименовать классы
4. Как выполнить поиск в Диспетчере стилей
5. Как просмотреть стили
90 190 Как удалить неиспользуемые классы с сайта

Как получить доступ к Диспетчеру стилей

Доступ к Диспетчеру стилей, расположенному на правой панели, можно получить, щелкнув значок Менеджера стилей или нажав G на клавиатуре.

Структура диспетчера стилей

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

Теги

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

Классы

Все классы отображаются синим цветом под тегами в порядке их создания. Узнайте больше о классах.

Комбинированные классы

Все комбинированные классы отображаются синим цветом и вложены в каждый класс со значком «плюс» слева от них. Узнайте больше о комбо-классах.

Вложенные теги

Все вложенные теги отображаются розовым цветом и вложены в каждый класс со значком «стрелка» слева от них. Узнайте больше о вложенных тегах.

Список затронутых элементов

Щелкните значок «список» справа от класса или тега, чтобы просмотреть список элементов и символов, затронутых классом или тегом, упорядоченный по:

• Элементы, затронутые на текущей странице 
• Элементы, затронутые на других страницах 
• Затронутые символы (например, символ содержит элементы, использующие этот класс или тег)

Щелкните элемент в списке, чтобы выбрать элемент на текущей странице . Щелкните имя страницы, чтобы перейти на эту страницу и отобразить список затронутых элементов на этой странице.

Редактировать ключ

Чтобы переименовать класс или комбинированный класс:

1. Нажмите « ключ » значок
2. Переименуйте класс или комбинированный класс
3. Нажмите значок « галочка » (или нажмите Введите ), чтобы сохранить новое имя
4. Нажмите « x 9020 Значок 7 », чтобы отменить изменения

Если класс не применяется к элементу на вашем сайте, появляется значок «Корзина». Щелкните значок «Корзина», чтобы немедленно удалить неиспользуемый класс.

Очистка

Чтобы просмотреть и удалить любые классы, не связанные с элементами страницы:

1. Нажмите Очистить в правом верхнем углу Диспетчера стилей
2. Нажмите Удалить , чтобы подтвердить удаление класса
3. Нажмите Отмена , чтобы остановить очистку класса Как переименовать классы

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

   Чтобы переименовать класс или комбинированный класс в Диспетчере стилей:

   1. Щелкните значок « гаечный ключ » рядом с названием класса
   2. Переименуйте класс
   3. Нажмите Введите , чтобы сохранить изменения

   Вы также можете переименовывать классы прямо на панели «Стиль». Узнайте больше о классах.

   Поиск в Диспетчере стилей

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

   Давайте рассмотрим примеры каждого из них: 

   • Имена классов или тегов могут включать: кнопку, ссылку, раздел и т. д.
   • Значения могут включать : 44px, красный, #FFFFFF
   Примечание. классы и теги.

   Для поиска в Диспетчере стилей:

   1. Откройте Диспетчер стилей
   2. Введите критерий поиска в строке поиска (например, «ссылка» или «44px» и т. д.)
   3. Нажмите « х значок , чтобы очистить панель поиска и восстановить видимость всех классов и тегов на вашем сайте
   Примечание: Результаты поиска включают только стили, примененные к элементам на главной контрольной точке вашего сайта.

   Предварительный просмотр стилей

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

   Для предварительного просмотра стилей:

   1. Откройте Диспетчер стилей
   2. Наведите на имя класса или имя тега, стили которого вы хотите просмотреть
   Примечание: CSS предварительный просмотр отображает только стили, примененные к элементам на вашем главная точка останова сайта.

   Как удалить неиспользуемые классы с сайта

   Если вы удалите класс из элемента (удалив его из поля «Селектор» на панели «Стиль»), это не приведет к удалению класса из Диспетчера стилей или с вашего сайта. Это потому, что класс можно повторно использовать в любое время для стилизации других элементов.

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

   Давайте рассмотрим, как вы можете:

   • Удалить отдельные классы в Диспетчере стилей
   • Удалить все неиспользуемые классы в Диспетчере стилей

   Удалить отдельные классы в Диспетчере стилей

   Вы можете удалить отдельный класс со своего сайта если класс нигде не используется на вашем сайте. Неиспользуемые классы в Диспетчере стилей не отображают значок «список» рядом с их именем.

   Чтобы удалить отдельный неиспользуемый класс:

   1. Откройте Диспетчер стилей
   2. Щелкните значок « ключ » рядом с классом
   3. Щелкните значок « корзина » немедленно удалить неиспользуемый класс из вашего весь сайт

   Удалить все неиспользуемые классы в Диспетчере стилей

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