Редактор css стилей: 10 лучших CSS-редакторов — Очередной блог фрилансера


15.03.1977 Facebook Twitter LinkedIn Google+ Разное


Содержание

Обзор CSS-редакторов

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

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

Зачем мне нужен CSS-редактор?

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

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

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

Некоторые редакторы также позволяют разделят части кода в отдельные папки и фильтровать стили, что упрощает работу и делает исходный код проще и понятнее. Еще одна полезная функция, мгновенный просмотр таблицы стилей в Internet Explorer или FireFox, которую трудно найти в каких-либо стандартных HTML-редакторах.

Кроме того, с помощью CSS-редакторов можно легко анализировать ошибки в коде с использованием код-инспектора и анализировать стили используя так называемую «X-Ray»-функцию.

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

Xyle


Xyle (Mac)
Этот продвинутый редактор позволяет разработчикам редактировать веб-сайты на лету с использованием встроенных стилей. Вы можете изменять CSS-код, и изменения будут отображаться непосредственно в окне браузера. По сравнению с Web-Developer тулбаром, с Xyle у Вас есть такие полезные функции, как древовидный просмотр селекторов, подсветка синтаксиса и расширенное управление файлами.

В режиме браузера Вы можете просматривать сайты используя движок Сафари. В режиме Selection, кликнув на любой части веб-страницы, отображается исходный код HTML и CSS выбранного фрагмента.
В режиме Cascade, Xylescope отображает не только стили, которые применяются в настоящее время для выбранного элемента, но и все правила, применяемые к предкам выбранного элемента. При отладке с
помощью Xylescope можно просто выбрать «проблемный» элемент в режиме Cascade, чтобы посмотреть, какие стили действительно применяются и какие из них отменены, в том числе те, которые применяются для предков данного элемента. Xylescope отображает специфичные селекторы и указывает, какие стили имеют приоритет. Xylescope также предлагает интеграцию с текстовыми редакторами, такими, как BBEdit.

Цена: $ 19,95. Доступна trial-версия. Прекрасное решение без дополнительных функций, таких, как валидация, оптимизация, за  оптимальную цену.

Некоторые из возможностей Xyle
* Автоматическое форматирование
* Сопоставление селекторов
* Фильтр больших CSS-файлов с помощью смарт-групп
* Встроенный DTD-viewer   

Stylizer


Stylizer (Windows)
Две вещи делают Stylizer немного отличным от других: он использует интерфейс сетки (grid interface) вместо текстового редактора, и он встроен в Firefox и IE, поэтому, когда пользователь меняет CSS, он применяется сразу же в браузере. Сеточная система позволяет CSS почувствовать себя вроде «CSS on rails», поскольку она делает невозможным какие-либо ошибки в CSS. Она позволяет Stylizer делать вещи, такие же как элемент инспектор в Firebug-е.

В Stylizer значения могут быть скорректированы на лету. Чтобы изменить высоту, отступ, или background-position, пользователь может буквально щелкнуть по value, редактировать элемент в реальном времени. Цвета также же. Пользователь может щелкнуть по ним, перетащите мышью, и посмотреть цвет текста, фона или границы в браузере, в режиме реального времени, создав наподобие «Photoshop-а для веб». Stylizer Basic является бесплатным. Полная версия (Цена: $ 69,95) не сильно отличается, однако в бесплатной версии невозможно отфильтровать таблицу стилей, чтобы показывались стили только с определенным содержанием.

 

Rapid CSS Editor


Rapid CSS Editor (Win)
Этот редактор поддерживает подсветку синтаксиса, автозаполнение и код-инспектор, который гарантирует что производимый код является правильным. Вы можете использовать встроенные в CSS и HTML-справки, чтобы быстро посмотреть синтаксис и атрибуты с учетом селекторов или тегов. Палитра позволяет дизайнерам подобрать цвет и увидеть результат «вживую», используя Style Sheet Preview для Internet Explorer и Firefox. Файловый менеджер может также позаботиться о загрузке CSS-файлов через FTP. Кроме того, вы можете использовать расширенный буфер обмена, чтобы хранить несколько готовых фрагментов кода. Редактор стоит $ 29,85. Доступна trial-версия.

Некоторые из функций Rapid CSS Editor

* Подсветкой синтаксиса для CSS и HTML документов
* CSS Checker и валидатор
* CSS Code Explorer
* Код инспектор
* Автоматическое заполнение для CSS и HTML
* Style Sheet Preview с Internet Explorer или FireFox
* X-Ray для просмотра HTML
* Соответствие CSS стандартам и различным браузерам
* Интеграция с W3C HTML и CSS валидаторами
* Встроенная в CSS справка
* Форматирование CSS кода
* CSS код-компрессор
* Поиск и Замена с поддержкой регулярных выражений
* Поиск и Замена в файлах
* Multi Item буфер обмена
* Встроенный File Explorer
* Сохранение и открытие файлов непосредственно с FTP
* Проект и сайт менеджер и FTP публикация

* Полностью настраиваемый интерфейс

TopStyle


TopStyle (Win)
CSS и HTML-редактор TopStyle доступен в ее Lite-версия вместе с  HTML-редактором Homesite — впрочем, есть также более сложная полная версия для профессиональных веб-разработчиков. С TopStyle разработчики получили ряд особенностей, которые недоступны в других редакторах. Например, со встроенным HTML-tidy вы можете легко перевести HTML-теги в XHTML стиль. Таким образом, заменяются теги, такие как — на тег с соответствующими валидными CSS-правилами. Библиотека содержит подборки часто используемых фрагментов кода. Разбитие окна дает возможность напрямую сравнивать представление сайта в Internet Explorer и Mozilla. Вы можете также изменять Doctype-определение, с тем чтобы выяснить, каким образом различные DTDs влияют на верстку в разных браузерах.

Наверное, самым мощным инструментом в TopStyle является Style checker. Он позволяет не только проверить таблицы стилей и, соответственно, обеспечить правильный формат представления в различных браузерах. Он также может предсказать ошибки в популярных браузерах, которые могут появиться, несмотря на валидный CSS-код. Вы можете также проверить CSS-стили  W3C CSS Validation Service для исправления ошибок, которые не были найдены TopStyle.


Полная версия стоит $ 79,95. Предупреждение: lite-версия не может быть обновлен. Только для Windows.

Некоторые из функций TopStyle:
* HTML, xHTML и CSS правка в Единой программе: HTML атрибуты отсортированны так что вы можете быстро посмотреть, какие требуются.
* Простая навигация между документами: кликните на класс HTML-атрибута, чтоб перейти на определение этого класса во внешнюю таблицу стилей или нажмите на ссылку, чтобы открыть файл для редактирования. Вы даже можете нажать на <img> тег, чтобы открыть графический файл в вашем любимом редакторе изображений.

* Проверка элементов и атрибутов: Все классы определены в свои блоки стилей и внешние таблицы стилей, поэтому присвоение класса для HTML тега очень простая задача.
* Style Checker: проверка ваших стилей в нескольких браузерах, отметка каких-либо недействительных значений или свойств. Вы также можете передавать ваши таблицы стилей непосредственно в W3C CSS Validation Service, поэтому вы можете быстро проверить соответствие официальной спецификации CSS.
* Style Upgrade: быстрый, надежный способ заменить все не рекомендуемые (устаревшие) теги HTML — в том числе давно не используемый HTML-тег <font> — на эквивалентный CSS.
* HTML Tidy Integration: Сделать переезд на XHTML безболезненным с встроенным Tidy configuration, который преобразует HTML к XHTML одним кликом!
* Site Reports: Посмотрите стили, используемые на вашем сайте. Выясните, где вы применяете их или узнайте какие стили, определенные Вами, не используются.
* Full Screen Preview: Разделенный просмотр в Internet Explorer и Mozilla для мгновенного обзора различий. Вы даже можете изменить DOCTYPE каждой панели предварительного просмотра «на лету» чтобы увидеть, как различные DOCTYPE влияют на компоновку.
* Интеграция с W3C HTML Validation: Результаты проверки отображаются в TopStyle, с гиперссылкой номеров строк, который синхронизируется с TopStyle редактором.

CSSEdit

 


MacRabbit CSSEdit (Mac)
Аналогично XyleScope, CSSEdit предоставляет «real-time» редактирование таблиц стилей, даже тогда, когда используются динамические веб-приложения с использованием баз данных или AJAX. Вы можете редактировать и анализировать стили без хлопот о загрузке или обновлении (онлайн и оффлайн режиме). Selector Builder позволяет описывать элементы на обычном английском языке. Интеллектуальный CodeSense анализирует CSS и CSS-behavior чтобы предложить умный, контекстно-зависимый совет.

X-ray Inspector покажет вам, какие стили применяются к HTML-документу. Вы также можете проверить свою стили на соответствие стандартам W3C и использовать инструмент управления проектами (Milestones etc.) для улучшения Вашего рабочего процесса.

Существует EditCSS-плагин для Firefox, а также CSSEdit-bookmarklets. Вы можете начать редактирование стилей любого сайта одним нажатием кнопки в браузере, а также использовать CSSEdit для редактирования. Инструмент имеет красивый, интуитивно понятный интерфейс, который очень компактный также, и очень хорошо организован, с ним приятно работать. EditCSS стоит 29,95 евро ($ 47). Существует также пробные версии доступны для свободного скачивания.

Некоторые из функций CSS Edit
* Selector Builder
* Легкая организация папок и фильтров
* Изменение исходного кода с интеллектуальным CodeSense
* X-ray pages
* Live-привью
* Управление проектами
* Валидация
* Интеграция с веб-браузерами

Style Master


Style Master (Win / Mac)
С этим WYSIWIG-CSS-редактором каждый почувствует себя мастером, он обладает возможностями, которые позволяют выделяться из общей массы. Действительно, Style Master позволяет как новичкам, так и профессионалам создавать валидные и семантически правильные стили. Селекторы могут быть сгруппированы по алфавиту, категориям или текущим настройкам. Редактор имеет интегрированную палитру цветов, различные шаблоны, инструменты автоматизации и валидации. Таким образом, профессионалы могут работать легко и эффективно, а новичкам не нужно много времени для создания отличных веб-сайтов.

Совершенно удивительным является тот факт, что различные шаблоны, которые по умолчанию включены в редактор, на самом деле полезные — чего обычно не бывает в большинстве приложений для редактирования. Здесь вы можете просто взять CSS-макет и определить стили, — все селекторы уже имеются. Вы также можете использовать W3C-примеры стилей, которые определяет стили почти для всех HTML-тегов, например заголовков -.

Вы можете использовать все возможности Design Pane, аналогичной, X-Ray, чтобы создать свои стили. Редактор очень простой, интуитивный и понятный. Цена: $59,99. Не дешево, однако в конце вы получите эффективное и мощное средство для вашей повседневной работы. Style Master доступен как для Windows, так и для Mac. Существуют также пробные версии, доступные для свободного скачивания.

Некоторые из функций Style Master
* Помощь по поддержке браузеров
* Wizards
* Более 40 шаблонов
* X-Ray, который позволяет сразу увидеть структуру Ваших слоев
* Оптимизация кода
* Интеллектуальный CodeSense

 

Style Studio


Style Studio (Win)
Style Studio предоставляет мощный «CSS-Checker», который позволяет новичкам и профессионалам разрабатывать кросс-браузерные CSS-макеты. Разработчики могут использовать ряд вспомогательных инструментов, таких как «Smart linker» который связывает несколько CSS документов с несколькими HTML, XHTML/XML документами сразу и CSS Manager, который управляет и обновляет совместимый со стандартом код (tidy) и определяет ошибки CSS.

Редактор имеет IntelliSense технологию (для стилей и HTML) с быстрой справкой по CSS. Property Watch автоматически определяет CSS-свойство (или HTML-тег, если вы редактируете HTML-документ) и выводит полную информацию о нем.

Style Studio стоит $ 49,95 и доступен только для пользователей Windows.

Некоторые из возможностей Style Studio:
* Мощная настраиваемая подсветка синтаксиса с возможностью поиска/ замены / редактирования
* CSS Validator: обнаружение и исправление ошибок css.
* Мощный CSS Manager, который позволяет управлять, обновлять код и выявлять CSS-проблемы на вашем веб-сайте.
* Интеграция с более чем 35 редакторами HTML
* IntelliSense для стилей и HTML
* Property Watch и Instant-справка по ключевым словам css
* CSS-мастер
* Валидация XML-документов
* Интеллектуальный парсер, который обнаруживает неправильные свойства во время их ввода.
* Автоматическое обнаружение установленых браузеров
* Простое изменение CSS значений используя горячие клавиши Ctrl + Up / Down.
* Встроенная система поиска и замены.

CoffeeCup


CoffeeCup StyleSheet Maker (Win)
CoffeeCup StyleSheet Maker предлагает CSS-редактор, который представляет собой нечто среднее между сложным функциональным редактором и базовыми функциями для редактирования. Он похож на TopStyle, но еще явно не достиг того же уровня гибкости. Используя CoffeeCup StyleSheet Maker вы будете иметь примерно те же возможности. Цена: $ 34,00. Доступна trial-версия.

Некоторые из возможнойтей CoffeeCup:
* Встроенный CoffeeCup Website Color Schemer
* Простой CSS Font Designer, достаточно выбрать из выпадающего меню.
* Пошаговая справка при созданни стилей
* Проверка в нескольких браузерах
* 50 Style Sheet Drop Down Tags
* Class & ID Wizard для создания ваших собственных HTML-тегов.
* Создание стилей для Netscape и Internet Explorer 3.0 +

 

EngInSite CSS Editor

EngInSite CSS Editor (Win)
Если вы хотите обеспечить себе строгий и правильный CSS-код, который соответствует стандартам W3C, определенно стоит рассмотреть вариант с EngInSite. Основная задача редактора заключается в том, чтобы создавать веб-сайты в строгом соответствии стандартам, которые проходят проверку W3C. Инструмент имеет интегрированный previewer стилей, автоматизированное завершение кода, подсветку синтаксиса, объединен с W3C HTML-валидатором, имеет встроенную помощь и CSS-справку, настраиваемую и расширяемую библиотеку кода и функцию live-редактирования.

Вы можете также использовать CSS Property редактор с поддержкой динамических свойств и Selector Constructor — удобный мастер для сложных селекторов и различных инструментов кода, например, Expanding/Extract URLS, Convert Colors, Convert Code и так далее. Можно просматривать селекторы, свойства, комментарии и @-правила и добавлять / удалять HTML, такие как HTML-комментарии и CDATA секции. Цена: $ 39,95. Доступна trial-версия.

Некоторые из функций EngInSite:
* Полностью настраиваемый текстовый редактор
* Интегрированный Instant Style Sheet Preview
* Проверка синтаксиса CSS для нескольких браузеров
* Интеграция с W3C HTML валидатором
* Соответствие CSS-стандартам и различным браузерам
* Preview в различных браузерах.
* Интегрированная справочная система и встроенный в CSS-справка
* Поиск и замена с поддержкой регулярных выражений
* Визуальный редактор для различных типов данных
* Wizards для body, IE Scrollbars, списков и фона

Jellyfish CSS


Jellyfish CSS (Mac)
Будучи чрезвычайно проста и понятна, Jellyfish CSS гарантирует, что разработчики могут редактировать CSS-стили легко и быстро. Редактор имеет библиотеку кода, поддержку Code-Sense, справку по браузерам, wizards и помощь поможет вам избежать ошибок (Вам будет сообщено сразу же, если вы случайно сделали ошибку). Вы можете также использовать интегрированный Colorblender, для создания цветовой палитры. Цена: 29? ($ 47). Trial-версиz, конечно, имеется.

Некоторые из функций Jellyfish CSS:
* Code-Sense поможет вам избежать ошибок
* Поддержка Mobile Profile 1.0
* Подсветка синтаксиса
* Проверка кода во время ввода
* 3 различных типа preview
* Интегрируется с внешними программами для быстрого доступа
* Проверка стилей с W3C Validator и CSS-Tidy
* Загрузка CSS-файлов прямо из www и работа над ними
* Codesnippets
* Colourblender

Astyle


Astyle (Win)
Astyle является визуальным CSS-редактором, который предлагает именно то, что можно было бы ожидать из большинства инструментов редактирования. Нет дополнительных возможностей, однако есть все наиболее важные инструменты редактирования. Astyle не может не впечатлять нас некоторыми весьма полезными функциями и способностями. Цена: $ 20.

Некоторые из функций Astyle:
* Простой в использовании интерфейс
* Сгруппированные свойства и селекторы
* Автоматический выбор и группировка селекторов CSS
* Подсветка CSS, HTML, XML кода
* Очистка HTML документа с помощью CSS
* Поддержка Drag and Drop

CSS Editors Reviewed


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

Редакторы CSS. Обзор л.1

Style Master

Style Master v 5.0 (для Mac OS X), v 4.6 (для Window XP, Vista) 1997 — 2016 гг. Интерфейс и справка на англ. языке. Вес 8,79 Мб. Цена 59,99 долл. После окончания пробного периода программа (30 дней) продолжит работу в урезанной бесплатной версии. Работает в Windows 2000/NT/XP/Vista, Mac OS X.
Автор: Westciv
Назначение программы — создание таблиц стилей CSS. Создание листов стиля, основанных на Вашем HTML. Редактирование CSS, а также PHP, ASP.NET, Rubyи др. Поддержка CSS3 и HTML5.  Авторская справка в Интернете (англ. язык)
Скачать

TopStyle

TopStyle Pro v 5 (1999 — 2006 гг). Интерфейс и справка на англ. языке (имеется русификатор). Цена 79,95 долл. Имеется бесплатная версия программы (TopStyle Lite).  Автор: TopStyle
Назначение программы — создание таблиц стилей CSS для веб-страниц.
Поддержка CSS3 и HTML5. Вы получите доступ ко всем последним признакам и свойствам тэгов.
Предварительным просмотр HTML и CSS, в то время, как Вы создаете правила CSS.
TopStyle поддерживает браузеры IE, Chromium, Firefox и Safari.
Подробнее

Astyle CSS Editor

Astyle CSS Editor v 3.8 Beta 8.(2003 — 2008 гг). Интерфейс и справка на англ. языке. Вес 1,48 Мб. Бесплатная программа.
Работает в Microsoft Windows 98, Me, NT 4, 2000, XP.
Astyle CSS Editor является визуальным редактром таблиц стилей CSS.
Работа ведется в визуальном режиме, без написания кода.
Подробнее

LiveStyle

Программа LiveStyle предназначена для редактирования таблиц стилей  CSS  в реальном времени. Вес 44,7 Мб.
 Все изменения, вносимые в таблицу стилей, сразу же отражаются на текущей веб-странице (без обновления страницы).
LiveStyle устанавливается как расширение для браузера Google Chrome или редактора Sublime Text, и может работать с проектами любого масштаба: от маленьких одностраничных сайтов до огромных вебсайтов. И Вы можете даже работать со своим вебсайтом.
При установке LiveStyle, например, как расширение для  Google Chrome, значок программы появляется на панели инструментов браузера.
Видео-обзор
Скачать

LiveReload

LiveReload v 0.9. Вес 10,3 Мб. Работает в Mac, Windows, Linux.
Используется как расширения с браузерами Safari, Chrome, Firefox и Mobile Safari). По своим функциям и назначению LiveReload  схожа с программой LiveStyle.
Скачать

Simple CSS

Simple CSS v 2.3 (2016 г). Интерфейс на англ. языке. Вес 5,9 Мб. Бесплатная программа. Работает в  Mac OS X и Windows.
Simple CSS  («Простой CSS») — простая программа по созданию таблиц стилей формата CSS2. Позволяет быстро оформить стилями основную область страницы (область <body>), заголовки, таблицы, списки, ссылки.
Подробнее

Free CSS Toolbox

Free CSS Toolbox v 1.2 (1999 — 2008 гг). Интерфейс на англ. языке. Вес 1.4 Мб. Бесплатная программа. Автор: Blumentals
Назначение  Free CSS Toolbox — создание, редактирование и проверка кода CSS.
В программу также включен поиск, CSS Validator, CSS Formatter, Компрессор CSS. В настоящее время развитие программы прекращено, на смену пришла другая программа этого автора Rapid CSS editor.
Скачать

Rapid CSS editor

Rapid CSS editor 2020 (2004 — 2019 гг). Интерфейс на русском языке, справка — на англ. языке. Вес 24,7 Мб. Цены: Rapid CSS 2018 — 49.95 долл. , Rapid CSS Personal (для личного использования) — 39,95 долл. Работает в Windows XP, Vista, 7, 8 10. Автор: Blumentals
Назначение программы — создание таблиц стилей (CSS). Вместе с тем Rapid CSS editor может применяться и для работы с HTML-страницами.
Подробнее

ArduoCSS Editor

ArduoCSS Editor v 1.0.0. Интерфейс на англ. языке. Вес 5,3 Мб. Бесплатная программа. Автор: Arduosoft
Назначение ArduoCSS — создание таблиц стилей CSS.
Работа ведется в визуальном режиме.  Имеется предварительный просмотр. Простая в применении программа.
Подробнее

Css Magic

Css Magic v 1.8. Русская бесплатная программа.. Вес 0,6 Мб.
Назначение программы — быстрое создание и изменение каскадных таблиц стилей.
Страница программы       Скриншот
Скачать: Поиск в Интернете

CSStypeset

CSStypeset — онлайн-редактор таблиц стилей CSS. Простая программа для создания стилей оформления текста. Имеется небольшой визуальный редактор по созданию текста, в котором выбирается вид шрифта, его размер, цвет, стиль, выравнивание и пр. Справа одновременно появляется таблица стилей выбранного оформления текста.
Страница программы


Для определения лучших программ интересно узнать Ваше мнение


Редактор CSS — AdvantShop

В данной статье мы рассмотрим изменение стилей CSS сайта путем переопределения соответствующих стилей для классов элементов сайта через Редактор файла стилей.

Рассмотрим подробнее такие пункты как:

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

Определение класса

Осуществлять поиск нужных элементов проще всего с помощью встроенного редактора в браузерах Google Chrome, Mozilla Firefox и Internet Explorer, для его вызова нажмите F12 и щелкните слева внизу на иконке анализа элементов страницы. В нашем случае используется встроенный редактор от Google Chrome (рис. 1):


Рисунок 1.

Далее необходимо на появившемся окне нажать на «стрелку» (лупу) и выделить тот элемент, стиль отображения которого нам нужно изменить (рис. 2): 


Рисунок 2.

После чего смотрим по верстке, какой класс отвечает за данный элемент (рис. 3):


Рисунок 3.

Нужный нам класс подсветится в окне верстки.

Просмотреть текущие значения свойств у выбранного элемента Вы можете в окне styles справа.

В результате мы выяснили, что кнопке «Добавить» соответствует класс

.details-payment-block .btn

Применение стилей

Непосредственно в окне стилей мы можем протестировать применение нового стиля. Например, пропишем кнопке красный фон (рис. 4): 


Рисунок 4.

Далее, копируем новые стили вместе с названием класса:

.details-payment-block .btn {
background: red;
}

Переходим в панель администрирования, пункт меню «Мои сайты — Редактировать — Параметры», вкладка «CSS» и прописываем новые стили следующим образом (рис. 5):


Рисунок 5.

Перед названиями классов обязательно ставить точку.

Стили для класса прописываются в фигурных скобках.

Заметка

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

Прописываем так:

.details-payment-block .btn {
background: red !important;
}

В результате получаем (рис. 6):


Рисунок 6.

Всё готово.

Тэги: Работа с CSS, CSS,стили, стили CSS, firebug, редактор файла стилей, редактор стилей

Учебник CSS3. Статья «создание первой таблицы стилей»

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8"> <!-- указываем кодировку документа -->
	<title>Внутренняя таблица стилей</title>
<style> 
</style>
</head>
<body>
	<h2>Как хорошо, что я занимаюсь саморазвитием. </h2>
	<p>Я выучу CSS за месяц, а то и быстрее</p>
</body>
</html>

В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!— … —>, текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */. Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).


Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color: red), а для абзацев голубой (color: blue). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align: center). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Внутренняя таблица стилей</title>
<style> 
h2 {
text-align: center; /* горизонтальное выравнивание текста по центру */
color: red; /* изменяем цвет текста */
}
p {
color: blue; /* изменяем цвет текста */
}
</style>
</head>
<body>
	<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
	<p>Я выучу CSS за месяц, а то и быстрее</p>
</body>
</html>

Шаг 4: Просмотр HTML страницы в браузере

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

Рис. 2.1 Пример создания внутренней таблицы стилей в документе.

Подключение внешней таблицы стилей

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

  1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page. css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css) в той же папке, где вы создавали HTML документ.
  2. Перенесите из предыдущего примера код CSS (содержимое тега <style>) в файл, который мы создали. Обратите внимание, что сам тег <style> необходимо удалить из документа (зачем нам пустые неиспользуемые теги в документе). Файл css у Вас должен содержать следующий код:
  3. h2 {
    text-align: center;
    color: red;
    }
    p {
    color: blue;
    }
    
  4. Добавьте к вашей таблице стилей следующий CSS код для элемента <body>, который определяет видимое содержимое страницы:
  5. body { 
    margin-top: 50px; 
    border: 5px solid green;
    font-family: courier;
    }
    

    Для элемента <body> мы указали следующие новые для Вас CSS свойства:

    margin-top: 50px – это CSS свойство отвечает за внешний отступ от верхнего края элемента, его мы указали равным 50 пикселям.
    border: 5px solid green — это универсальное CSS свойство, которое позволяет установить все свойства границ элемента в одном объявлении (в нашем случае задаем сплошной тип границы (solid) равной 5 пикселям зеленого цвета.
    font-family: courier — задаем шрифт «Courier» для элемента.
  6. Нам осталось только элементом <link> определить связь между документом и внешним ресурсом (таблицами стилей). Обратите внимание, что тег <link> необходимо разместить перед закрывающим элементом </head>:
  7. <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset = "UTF-8">
    		<title>Внутренняя таблица стилей</title>
    		<link href = "page.css"  rel = "stylesheet">  <!-- подключаем нашу таблицу стилей -->
    	</head>
    	<body>
    		<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
    		<p>Я выучу CSS за месяц, а то и быстрее.</p>
    	</body>
    </html>
    
  8. Сохраните ваши файлы и проверьте результат в браузере.

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:

  • Составьте следующую HTML страницу, в которой CSS стили, отвечающие за заголовки страницы будут подключаться отдельным файлом, а все остальные используемые стили, будут содержаться во внутренней таблице стилей:

Практическое задание № 1.

Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.

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


визуальный редактор CSS стилей Для InstantCMS 2.X. 2 762 просмотра — InstantCMS Community

Всем привет,

Это первый компонент из серии (Шаблон + Лендинг + Редактор). Он позволяет кастомизицировать любой шаблон под InstantCMS 2. Поддерживает InThemer, InStyler, Конструктор Лендингов (на видео показал в конце). Можно менять как глобальные настройки, так и типовые страницы (Типы контенты: Список записей) или только конкретные страницы (включая страницы фильтров и тд).

Визуальный редактор CSS

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

Основные характеристики

  • Настройка любой страницы, любого элемента
  • Настройка страницы входа в WordPress
  • Автоматические селекторы CSS
  • 60+ свойств CSS
  • Визуальное перетаскивание
  • Визуальное редактирование полей и отступов
  • Живой редактор CSS
  • Предварительный просмотр в реальном времени
  • Управление изменениями
  • История отмены/возврата
  • Экспорт файла таблицы стилей

Инструменты дизайна

Плагин предоставляет расширенные инструменты и готовые к использованию библиотеки для удобного оформления вашего веб-сайта.

  • Инспектор гибких элементов
  • Инспектор отдельных элементов
  • Отзывчивый инструмент
  • Инструмент поиска элементов
  • Измерительный инструмент
  • Каркасный вид
  • Инструмент информации о дизайне
  • Генератор градиента (профессиональная версия)
  • Менеджер анимации (профессиональная версия)
  • Генератор анимации (профессиональная версия)

Ресурсы дизайна

Доступ ко множеству элементов дизайна одним щелчком мыши. Настройте дизайн вашего сайта в соответствии с вашими потребностями!

  • 900+ шрифтов Google (профессиональная версия)
  • 300+ фоновых узоров (профессиональная версия)
  • Фоновые стоковые изображения Unsplash (профессиональная версия)
  • Материальные и плоские цветовые палитры (версия Pro)
  • 50+ анимаций (профессиональная версия)

Свойства CSS: Текст

  • Семейство шрифтов (профессиональная версия)
  • Толщина шрифта
  • Цвет (профессиональная версия)
  • Тень текста
  • Размер шрифта
  • Высота строки
  • Стиль шрифта
  • Выравнивание текста
  • Преобразование текста
  • Межбуквенный интервал
  • Интервал между словами
  • Оформление текста
  • Отступ текста
  • Перенос слов

Свойства CSS: Фон

  • Цвет фона (профессиональная версия)
  • Фоновое изображение (профессиональная версия)
  • Фоновый клип
  • Режим наложения фона
  • Фоновое положение
  • Размер фона
  • Повтор фона
  • Фоновое приложение

Другие свойства CSS

  • Маржа
  • Прокладка
  • Граница
  • Радиус границы
  • Позиция
  • Ширина (профессиональная версия)
  • Высота (профессиональная версия)
  • Списки
  • Флексбокс
  • Анимация
  • Тень коробки
  • Переход
  • Фильтр
  • Преобразование
  • Непрозрачность
  • Дисплей
  • Курсор
  • Поплавок
  • Прозрачный
  • Видимость
  • События указателя
  • Переполнение

Совместимость с любой темой и плагином

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

Совместимость со всеми компоновщиками страниц

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

Как это работает?

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

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

Премиум-функции

Следующие свойства доступны только в платной версии;

  • Семейства шрифтов (шрифты Google)
  • Цвет шрифта
  • Цвет фона
  • Фоновое изображение
  • Ширина и высота
  • Анимации

Купите профессиональную версию сейчас, чтобы разблокировать все функции.

Документация и поддержка

Сообщество

  1. Загрузите папку «yellow-pencil-visual-theme-customizer» в каталог «/wp-content/plugins/»
  2. Активируйте плагин через меню «Плагины» в WordPress.
  3. Перейдите в Панель WordPress > Внешний вид > «Редактор YellowPencil» для настройки!

Будет ли плагин работать с моей темой?

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

Безопасно ли использовать?

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

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

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

Могу ли я настроить страницу входа в WordPress?

Да, в панели инструментов WordPress выберите «Внешний вид» > «Редактор YellowPencil». Выберите целевую страницу в качестве страницы входа в WordPress и нажмите кнопку «Настроить».

Я взглянул на бесплатную версию и визуальный редактор переднего плана, это впечатляет. У меня есть одна рекомендация, хотя без жалоб. Время от времени, когда я нажимаю на элемент, элемент выскакивает из набора, и это миссия для повторного выравнивания. это явно глюк. кроме того, поскольку я играю с редактором, он все еще великолепен. Я могу редактировать страницы продуктов woocommerce и использовать siteorigin (бэкэнд), и это потрясающее сочетание.

便利だったので有償版を購入しました。 インストールしてから使用してみたところ、何故か保存ができなかったのですが サポートに問い合わせ、レンタルサーバーのセキュリティの問題と言われ レンタルサーバーに問い合わせてセキュリティを解除してやっと使えるようになりました。 サポートは自動翻訳ツールをつかって英語で対応しましたが、とても親切でした。 利用するにあたってせっかく設定されているセキュリティを解除する必要はありますが デザインを変更する時のみ解除してふだんはセキュリティをONにしておきます。 「WAF」の設定をONにしたままだと利用できないようです。

This plugin has saved me so much headache! Amazing plugin, thank you!

There’s definitely things about this plugin that frustrate me — don’t get me wrong — but if you’re a beginner like me who works farrr better visually than with trying to understand CSS coding, this is the best I’ve tried. CSS Hero был слишком техническим, и и он, и Microthemer были слишком неинтуитивными, чтобы я мог понять, как их использовать. Моя единственная реальная претензия к этому плагину заключается в том, что документация устарела. Ребята, пожалуйста, немного оживите вашу документацию, хорошо? В нем упоминается инструмент, который даже больше не *доступен*. Последнее обновление было в 2019 году! ЭТО СЛИШКОМ ДАВНО, РЕБЯТА! Я просто хочу знать, что означает синий маркер на точке останова, но документация, очевидно, так далеко позади, что ее даже не касаются.Кроме того, я скажу, что несколько раз ломал свою мобильную версию, но это, скорее всего, мой новичок, использующий неправильные настройки для чего-то, а не ошибка плагина. В целом, я должен сказать, что рекомендую его, и это действительно разумная цена за пожизненную лицензию, особенно для тех, кто просто не может позволить себе платить за подписки направо и налево. Я также отправил пару тикетов, когда что-то пошло не так, и получил быстрые ответы — они не совсем помогли мне, но, по крайней мере, дали мне отправную точку информации для перехода к следующему этапу решения проблемы. решение.P.S. — Я использовал это с elementor. Совет для профессионалов: если вам нужна одна тема с анимацией и одна без нее, не добавляйте анимации в свои шаблоны с помощью Elementor — их невозможно удалить. Держите их неподвижно и позвольте YP анимировать вместо этого.

Базовые функции, такие как изменение цвета шрифта, требуют профессиональной версии. Это смешно, поскольку они говорят, что это бесплатный плагин.

Какой замечательный плагин, он мне очень помогает при многих правках.Большое спасибо!

Прочитать все 79 отзывов

«Визуальный редактор стилей CSS» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов
7.5.4
  • Исправлено: незначительный конфликт со старыми версиями PHP.
7.5.3
  • Исправлено: предупреждение PHP появлялось на PHP 8.
  • Исправлено: ошибка загрузки внешней таблицы стилей.
  • Улучшения: Редактор теперь может останавливать нежелательные перенаправления и обновления страниц.
  • Улучшения: синяя точка на адаптивном инструменте удалена.
7.5.2
  • Список шрифтов Google обновлен.
  • Исправлена ​​ошибка, возникавшая при попытке открыть меню предметов.
  • Исправлена ​​ошибка, возникавшая при попытке выбрать элемент из инструмента навигации, когда был активен режим курсора.
7.5.1
  • Исправлена ​​ошибка рендеринга CSS
  • Исправлена ​​ошибка, возникавшая при редактировании селектора CSS
7.5.0
7.4.9
  • Исправлена ​​ошибка, возникавшая при сбросе свойства CSS.
7.4.8
  • Улучшения для триггеров анимации.
  • Исправлена ​​ошибка, появлявшаяся в старых версиях PHP.
7.4.7
  • Исправлена ​​​​ошибка, из-за которой редактор не загружался, когда панель управления WordPress и веб-сайт используют разные протоколы.
  • Исправлена ​​ошибка, связанная с состояниями элементов
7.
4.6
  • Исправлена ​​ошибка, возникавшая при выборе элементов
  • Исправлена ​​ошибка, возникавшая при редактировании селектора CSS
  • Повышение производительности редактора
7.4,5
  • Повышение производительности редактора
7.4.4
  • Исправлено неправильное положение синей границы
  • Исправлена ​​ошибка, которая перенаправляла страницу при попытке выбрать элемент
  • Исправлена ​​​​ошибка, из-за которой редактор не загружался на серверах PHP 8
  • Исправлена ​​ошибка в свойстве background-clip
  • Исправлена ​​ошибка в адаптивном инструменте
  • Функция динамического перетаскивания была модернизирована. (больше не используется свойство transform:translate)
7.4.3
  • Исправлена ​​ошибка JavaScript, возникавшая при внесении изменений.
7.4.2
  • Исправлена ​​ошибка в адаптивном инструменте.
7.
4.1
  • Добавлена ​​возможность закрепить панель инструментов слева от экрана
  • Исправлено: косые черты в селекторе CSS исчезают после сохранения изменений, и некоторые стили не работают
  • Исправлена ​​ошибка с инструментом поиска в редакторе кода
  • Исправлена ​​ошибка, возникавшая при чтении медиазапросов в адаптивном инструменте
  • Повышение производительности инструмента навигатора
7.4.0
  • Новая функция: стилизация с условиями (стилизация элементов только для вошедших или незарегистрированных пользователей)
  • Новая функция: инструмент навигатора (вы можете легко найти все элементы на странице из навигатора)
  • Новое: Адаптивный интерфейс инструмента
  • Новая функция CSS: фоновые фильтры
  • Новая функция CSS: столбцы
  • Улучшения: автоматический алгоритм важных тегов
  • Улучшения: инструмент Каркас
  • Улучшения: свойства CSS Flex и Grid
  • Улучшения: алгоритм селектора CSS
  • Улучшения: производительность загрузки редактора
  • Обновлено: список шрифтов Google.
  • Исправлено: ошибка сохранения в WordPress версии 5.7
  • Исправлено: ошибка, из-за которой не обнаруживались новые обновления в API обновления плагинов.
  • Исправлено: пользовательские анимации не отображались на странице входа в WordPress
  • Улучшения
  • : множество мелких исправлений ошибок и улучшений для всех инструментов редактора.
7.3.3
  • Исправлено: кнопка YellowPencil не работает в редакторе блоков WordPress.
7.3.2
  • Обновление совместимости для WordPress 5.6
7.3.1
  • Новое: ярлык для сохранения изменений. [CMD/CTRL+S]
  • Исправлена ​​ошибка активации лицензии.
7.3.0
  • Усовершенствования механизма выбора CSS.
  • Обновлены устаревшие предупреждения CSS.
  • Обновлены шрифты Google.
  • Исправлено несколько мелких ошибок.
7.2.9
  • Исправлена ​​ошибка, из-за которой удалялся атрибут стиля элемента после выбора.
7.2,8
  • Повышение производительности редактора.
  • Добавлена ​​опция повтора для триггера анимации.
  • Удалено свойство счетчика итераций анимации.
  • Исправлена ​​ошибка с изменением вкладок продуктов WooCommerce в инструменте курсора.
  • Исправлена ​​ошибка с изменением форматов свойств CSS.
7.2.7
  • Textarea, Audio, Video Select исправлена ​​ошибка выбора элемента.
  • Улучшения совместимости для плагинов Oxygen Builder и King Composer.
  • Исправлена ​​ошибка, возникавшая при перечислении дочерних элементов.
  • Стили на панели просмотра изменений сгруппированы.
  • Исправлена ​​ошибка предупреждения PHP. Спасибо Jean Lorencini за помощь.
  • Добавлен параметр смягчения анимации (функция синхронизации анимации)
7.2.6
  • Исправлена ​​ошибка активации лицензии.
7.2.5
  • Панель редактора была переработана для удобства пользователей.
  • Портативный редактор CSS.
  • Новая палитра цветов.
  • Исправлена ​​ошибка пользовательской переменной CSS.
  • Исправлена ​​ошибка предварительного просмотра в реальном времени на странице входа.
  • Исправлена ​​ошибка оформления текста.
  • Исправлена ​​ошибка прилипания позиции CSS.
  • Повышение производительности для перечисления семейств шрифтов.
  • Исправлен конфликт с ace.js на некоторых серверах.
  • Исправлена ​​ошибка чтения неправильных данных свойства line-height.
7.2.4
  • Файл animation-events.js преобразован в чистый javascript из jQuery для более быстрой работы и загрузки.
  • Исправлен конфликт селектора CSS nth-child.
  • Добавлены массовые действия на страницу «управление стилями». Теперь вы можете легко управлять настройками.
  • Исправлены конфликты с PHP 7
7.2.3
  • Исправлена ​​проблема с активной точкой останова в адаптивном инструменте.
  • Исправлена ​​проблема «Точки останова не читаются».
7.2.2
  • Мы добавили параметр в свойство font-family для включения или отключения файла шрифта Google на веб-сайте.
  • Свойство перехода CSS.
  • Доступность: предоставляет подробную информацию о доступности элемента в средстве информации о проекте. Плагин вычисляет коэффициент контрастности текста по стандартам WCAG AA.
  • Новый адаптивный инструмент.
  • Файл custom.css перемещен в папку загрузки.
  • Исправлена ​​ошибка сохранения CSS.
  • Ползунок числа обновлен.
  • Шрифты Google обновлены
  • animate.css обновлен
  • API Auto Media улучшен.
  • Исправлены ошибки выбора нескольких элементов.
  • Исправлено множество ошибок, улучшен плагин.
7.2.1
  • Дополнительная безопасность: добавлен одноразовый номер (токен) для всех действий.
7.2.0
  • Исправлена ​​важная ошибка безопасности: исправлена ​​ошибка безопасности в функции просмотра посетителей…
7.
1.9
  • Исправлена ​​ошибка выбора элемента в Firefox.
7.1.8
  • Исправлено несколько важных ошибок.
7.1.7
7.1.6
  • Новое: свойство направления CSS
  • Новое: свойства сетки CSS. (выберите элемент сетки, чтобы перейти к свойствам сетки)
  • Новое: палитра цветов страницы
  • Новое: в свойство CSS position добавлен параметр Sticky
  • Новое: дочерние элементы добавлены в contextMenu
  • Улучшения свойств гибкости.
  • Улучшения интерфейса.
7.1.5
  • Усовершенствования свойства line-height.
  • Улучшения в инспекторе элементов.
  • Исправлена ​​ошибка зависания на экране загрузки.
  • Улучшения интерфейса.
7.1.4
  • Важные и неважные, столько ошибок исправлено.
  • Обновление совместимости для WordPress 5.0
  • Anymore CSS Editor не меняет порядок правил CSS при добавлении нового правила.
  • Благодаря небольшим изменениям плагин стал более полезным.
7.1.3
  • Новая функция: стоковые изображения (API Unsplash)
  • Новая функция: ресурсы страницы (показывает все изображения на странице в средстве информации о дизайне)
  • Новая функция: черновой режим
  • улучшена производительность загрузки редактора.
  • Исправлена ​​ошибка загрузки шрифта на странице входа.
  • Исправлена ​​ошибка автозаполнения в редакторе CSS.
  • Исправлена ​​ошибка PHP на странице входа.
7.1.2
  • Новая функция: поддержка настройки страницы входа в WordPress.
  • Исправлена ​​небольшая ошибка в Single Inspector.
7.1.1
  • Исправлена ​​ошибка с пустой страницей.
  • Исправлен конфликт редактора CSS.
7.1.0
  • Исправлена ​​ошибка сортировки медиазапросов.
7.0,9
  • Исправлены ошибки загрузки CSS.
  • Исправлены ошибки в генераторе градиентов.
  • Улучшена производительность редактора.
7.0.8
  • Исправлена ​​ошибка загрузки CSS по протоколу https.
  • Исправлена ​​ошибка медиа-запроса.
7.0.7
  • Новая функция: редактируемые метки элементов и поддержка комментариев CSS для селекторов CSS.
  • Новая функция: указывает, редактируются ли группы свойств, не открывая их.
  • Новая функция: всегда показывает поля и отступы при наведении курсора.
  • Новая функция: высокопроизводительный вариант для редактора.
  • Новое: расширенные настройки редактора.
  • Новое: поддержка интеграции с Gutenberg.
  • Новое: свойства background-position-x и background-position-y.
  • Новое: поддержка редактирования черновиков страниц.
  • Новое: поддержка RTL.
  • Исправлена ​​ошибка сброса выбранного элемента.
  • Исправлена ​​ошибка предварительного просмотра в реальном времени.
  • Исправлена ​​ошибка с одним инспектором.
  • Исправлена ​​ошибка сортировки смарт-медиазапросов.
  • Улучшения основных функций.
  • Улучшения динамического идентификатора и классов.
7.0.6
  • Исправлено: «страница прыгает в адаптивном инструменте».
  • Исправлена ​​ошибка полосы прокрутки редактора CSS.
  • Улучшения основных функций.
7.0.5
  • Новое: автоматическое определение динамического идентификатора и классов.
  • Исправлена ​​ошибка семейства шрифтов.
  • Улучшения основных функций.
  • Исправлена ​​ошибка ContextMenu.
  • Исправлена ​​небольшая ошибка в дереве элементов.
7.0.4
  • Исправлены ошибки ContextMenu.
  • Исправлены ошибки типа настройки.
  • Исправлено
  • ошибок WooCommerce.
  • Исправлены ошибки для младших версий PHP.
  • Исправлена ​​ошибка изменения размера элемента body.
  • Исправлена ​​ошибка выбора элемента.
7.0.3
  • Исправлены ошибки одиночной настройки и настройки шаблона.
  • Функция синхронизации отменена.
  • Улучшения основных функций.
7.0.2
7.0.1
7.0.0
  • Новая функция: родительские элементы выбранного элемента всегда видны внизу редактора.
  • Новая функция: просмотрите все изменения визуально, отключите или измените.
  • Новая функция: фиксированная правая панель, перетащите правую панель в правый угол страницы.
  • Новая функция: поддержка CSS Flexbox, настройки Flexbox будут доступны на правой панели при выборе элемента flexbox.
  • Новая функция: изменение типа динамической настройки, изменение текущего типа настройки с правой панели без обновления страницы.
  • Новая функция: измените целевую страницу в реальном времени. Измените целевую страницу, щелкнув имя страницы на правой панели.
  • Новая функция: новый инструмент поиска смарт-элементов.
  • Исправлено: проблема с выбором элементов, которые имеют события щелчка javascript.
  • Новая функция: адаптивные параметры на основе свойств CSS. Редактор покажет вам, применяется ли свойство «ширина» в другом медиа-запросе к целевому элементу.
  • Новая функция: просмотр стилей точек останова, просмотр выбранных стилей элементов, визуальная настройка стилей типов, просмотр всех примененных стилей.
  • Новая функция: настраиваемый интерфейс, размер всех инструментов можно изменять.
  • Новая функция: поддержка градиентного текста. Выберите фон и примените значение «текст» к свойству background-clip.
  • Новое: более 300 современных градиентов CSS3
  • Новое: отдельные, шаблонные, глобальные вкладки в редакторе CSS.
  • Новое: все псевдоклассы в редакторе.
  • Новое: проверка CSS в редакторе CSS
  • Новое: поддержка выбора элемента iframe по клику.
  • Новое: выделяйте элементы по классу и идентификатору, щелкните любой класс или идентификатор в инструменте «Информация о дизайне», чтобы выделить целевые элементы.
  • Новое: стили CSS доступны на странице администратора YellowPencil, вы можете увидеть примененные стили непосредственно в панели администратора.
  • Улучшения: обработка CSS и скорость чтения в 23 раза быстрее благодаря новым основным функциям.
  • Улучшения: Инспектор работает в 3 раза быстрее
  • Усовершенствования всех инструментов реорганизованы для удобства пользователей.
  • Улучшения основных функций редактора.
  • Исправлено множество ошибок.
  • Примечание: Экспортированные данные плагина в более старых версиях не будут работать в 7 и более поздних версиях.
  • Примечание. Функции изображения параллакса больше не доступны в редакторе, но элементы, к которым применена функция параллакса, по-прежнему будут работать.
  • Примечание: главная страница, страница сообщений и страницы архива не зависят от стилей шаблона страницы.
  • Примечание. Определенные селекторы в таблицах стилей темы и плагина больше недоступны в редакторе.
6.1.4
  • Новое: свойство событий указателя
  • Новое: свойство курсора
  • логических улучшений в селекторах CSS
  • Исправлены ошибки в инструменте управления анимацией
6.1.3
  • Новое: поддержка идентификаторов и классов HTML5. ‘##test’, ‘#.#test’ и тому подобное.
6.1.2
  • Внесенные вами изменения могут быть не сохранены» исправлена ​​проблема с всплывающими окнами.
6.1.1
  • Родительская функция просмотра дерева. Новое: к настройкам элемента.
6.1.0
  • Новый интеллектуальный алгоритм для автоматического важного тега.
  • Повышена скорость загрузки редактора.
  • Исправлены ошибки редактора CSS.
  • Исправлен конфликт плагина автооптимизации.
6.0.9
  • Исправлена ​​ошибка визуального редактирования отступов.
6.0.8
  • Новая функция: визуальное редактирование полей и отступов
  • Новая функция: список свойств стиля
  • Новая функция: более интеллектуальный алгоритм выбора
  • Новая функция: модель Element Box Model была новой: в раздел информации о конструкции
  • Новое: свойства CSS text-indent и word-wrap
  • Усовершенствования инструмента генератора градиентов
  • Улучшения отзывчивых точек останова
  • Улучшения ColorPicker
  • Исправлено: конфликты с плагинами CSS minify и WordPress Cache.
6.0.6
  • Усовершенствования редактора
  • Исправлены ошибки сохранения
  • Повышение производительности редактора
6.0.5
6.0.4
  • jQuery обновлен
  • Исправлена ​​ошибка перетаскивания
  • Исправлены ошибки селектора CSS
  • Исправлено: небольшая ошибка с точками останова
6.0.3
6.0.2
  • Новое: функция просмотра посетителей.
  • Исправлено: ошибки инспектора элементов
  • Исправлено: плагин не удаляет старые файлы пользовательских таблиц стилей
  • Исправлено: анимация не работает в Chrome
  • Исправлено: ошибки генератора градиента
  • Улучшения в селекторах CSS
  • Улучшения для обновления API
6.0,1
  • Новое: динамические точки останова для адаптивного инструмента
  • Новый генератор градиентного фона
  • Новое: новые шрифты Google.
  • Исправлено: ошибки генератора анимации и инструмента управления анимацией.
  • Исправлено: ошибка страницы магазина WooCommerce.
  • Улучшения адаптивного инструмента
  • Улучшения визуального выбора
  • Улучшения фоновых рисунков
6.0.0
  • Новое: кнопка редактирования для публикации страниц редактирования на панели управления WordPress.
  • Исправлено: несколько ошибок.
5.5.9
5.5.8
  • Оптимизация производительности. в 6 раз быстрее.
5.5.7
  • Свойство отображения обновлено
  • Усовершенствования интеллектуального @media AI
  • Усовершенствования важного автоматического алгоритма
  • Обновлены страницы панели администратора
  • Новое: активация плагина одним щелчком мыши с входом в Envato.
  • Исправлено: несколько ошибок.
5.5.6
  • Новое: свойство background-blend-mode
  • Новое: настройки rotateX, rotateY и rotateZ для преобразований.
  • Новое: поддержка активных, связанных, посещенных состояний.
  • Минимизация CSS в заголовке Вывод
  • Алгоритм выбора CSS Обновлен
  • Исправлено: ошибка SSL в инструменте предварительного просмотра в реальном времени.
  • Новый алгоритм: обнаружение правил CSS в определенных медиа-запросах целевого элемента и автоматическое создание ограничений с медиа-запросами.
  • Live Resizing: свойство Height заменено на min-height
  • Динамическое изменение размера: верхняя и левая границы больше не изменяются. Эта функция отключена, чтобы система работала стабильно.
  • Исправлено: мелкие ошибки
  • Исправлены ошибки анимации.
5.5.5
5.5.4
  • Исправлено: ошибка выбора элементов.
  • Исправлено: конфликт с плагином общего кэша W3.
5.5.3
  • Новый интерфейс.
  • Время обработки стиля на 1500% больше.
  • Увеличение производительности при изменении размера на 300 %.
  • Нажмите клавишу SHIFT, чтобы выбрать несколько элементов.
  • Функциональные улучшения.
5.5.2
  • Исправлено: критическая проблема с загрузкой.
  • Несколько улучшений, чтобы сделать его более функциональным.
  • Исправлено множество ошибок.
5.5.1
  • Новое: поддержка выбора нескольких элементов
  • Новое: семейства шрифтов поддерживают экспортируемую таблицу стилей.
  • Новое: поддержка статических таблиц стилей.
  • Новое: новая опция сброса выбранного элемента.
  • Новое: нажмите клавишу удаления, чтобы скрыть выбранный элемент.
  • Улучшение состояний наведения и фокуса.
  • Улучшение инструмента поиска элементов.
  • Улучшение инструмента одиночного выбора.
  • Обновлены механизмы свойств фильтра, тени блока и преобразования. Высокая производительность!
  • Улучшение инструментов отмены и повтора действий.
  • Улучшение интеллектуальных направляющих.
  • Новые сочетания клавиш: [R] Адаптивный инструмент, [M]: Инструмент измерения, [W]: Каркас, [D]: Информация о дизайне
5.
5.0
  • Исправлено: ошибка с одним инструментом выбора.
5.4.9
5.4.8
  • Исправлено: две критические ошибки.
5.4.7
5.4.6
  • Новое: поддержка прозрачных цветов. (РГБА)
  • Улучшен интерфейс загрузки редактора.
  • Новое: теперь вы можете экспортировать все правила CSS как готовые к использованию.
5.4.5
  • Улучшения для браузера Chrome.
5.4.4
  • Анимации совместимы с адаптивным инструментом.
  • Исправлена ​​критическая ошибка.
5.4.3
  • Критические улучшения ядра.
  • Улучшения производительности редактора
5.4.2
  • Исправлено: проблема с медленной загрузкой.
  • Улучшения в селекторах CSS.
5.4.1
  • Исправлены критические ошибки селектора CSS.
5.4.0
  • Визуальное изменение размера элементов
  • Улучшения в селекторах CSS.
  • Улучшения интерфейса.
  • Новое: интеллектуальные направляющие для перетаскивания и изменения размера инструментов.
  • Новое: информационный инструмент проектирования; Информация о выбранном элементе, типографике и многом другом.
  • Улучшения в редакторе CSS.
  • Улучшения в свойствах border-radius, font-family, анимации.
  • Новое: инструмент управления анимацией
5.3.5
  • Новый инструмент каркаса объекта.
  • Исправлено: мелкие ошибки.
5.3.4
  • Новый умный искусственный интеллект! (Генерация кодов CSS как человека)
  • Важные обновления производительности!
  • Улучшения ядра.
  • Исправлена ​​ошибка сохранения Woocommerce.
5.3.3
  • Исправлена ​​ошибка сохранения.
  • Новое: функции экспорта и импорта
5.3.2
  • Исправлено: важная ошибка для SSL.
  • Исправлены две незначительные ошибки.
5.3.1
  • Исправлено: ошибки на локальном хосте.
  • Исправлены мелкие ошибки.
5.3.0
  • Новое: адаптивный инструмент с изменяемым размером
  • Новое: поддержка любого мультимедийного запроса CSS
  • улучшения фоновых рисунков
  • улучшения пользовательских селекторов
  • улучшения инструмента измерения и редактора CSS
5.2.9
  • Исправлено: ошибки селектора CSS.
5.2.8
5.2.7
  • Исправлено: ошибка измерительного инструмента.
5.2.6
  • Новинка: Инструмент с одним селектором
  • Новинка: Измерительный инструмент
  • Новое: опция «записать CSS» в contextMenu.
  • Улучшения интерфейса.
  • Ярлыки обновлены.
5.2.5
  • Новое: автозаполнение для селекторов CSS в редакторе.
  • Улучшения в селекторах CSS.
5.
2.3
5.2.2
  • Новое: визуальное отображение свойства заполнения.
  • Новое: Умные заголовки для элементов.
  • Улучшения ядра плагина.
5.2.1
  • Исправлены ошибки анимации.
  • Исправлены ошибки селектора CSS.
5.2.0
  • Новое: инструмент для создания анимации.
  • Улучшения визуального редактирования.
  • Улучшения в семействе шрифтов.
  • Исправлена ​​ошибка с цветом тени блока.
  • Улучшения в ядре редактора.
  • Исправлена ​​ошибка с цветом фона.
  • Исправлена ​​ошибка «Редактор CSS не показывает коды».
  • Исправлена ​​ошибка «Потеря данных CSS».
5.1.2
  • Обновление WordPress 4.4.
  • Исправлены ошибки селектора CSS.
5.1.1
  • Новое: свойство видимости
  • Улучшения трансформируемых элементов.
  • Улучшения инструментов перетаскивания и изменения размера в реальном времени.
  • Исправлены ошибки анимации.
  • Улучшения в редакторе CSS
5.1.0
  • Новое: изменение размера живого элемента
  • Улучшения в селекторах CSS
  • Улучшения ядра.
  • Улучшения в палитре цветов
  • Улучшения для маленьких экранов.
  • Исправлены ошибки перетаскивания.
5.0.1
5.0.0
  • Усовершенствования палитры цветов
  • Улучшения производительности
  • Улучшения инструментов отмены/повтора
  • Улучшения редактора CSS
  • Усовершенствования алгоритма автоматической важной системы
  • Улучшения ползунка
  • Исправлена ​​ошибка загрузки.
  • Новая палитра цветов!
4.7.0
  • Исправлены некоторые ошибки.
  • Новое: поддержка пользовательских селекторов.
  • Документация обновлена.
4.6.3
  • Новое: автоматическое обновление API
  • Улучшения интерфейса
  • Множество улучшений ядра
  • Исправлено: ошибка «выбрать только это».
  • Исправлено: ошибка перетаскивания.
  • Исправлено: родительские настройки.
4.6.2
4.5.1
  • Исправлено: ошибки фонового изображения.
4,5
  • Новое: ячейка таблицы для свойства отображения.
  • Новое: поддержка перетаскивания.
  • Улучшение ширины, анимации и свойств отображения.
  • Исправлена ​​ошибка полноразмерного фонового изображения
  • .
  • Исправлена ​​ошибка закрытия ContextMenu.
  • Исправлена ​​ошибка редактора CSS.
  • Исправлена ​​ошибка преобразования Chrome.
  • Исправлена ​​ошибка измерения высоты инструмента.
  • Исправлена ​​ошибка значения ползунка.
  • Улучшение свойства position.
  • Исправлено
  • ошибок Jquery.
4,4
  • Улучшение инструментов отмены/возврата.
  • Новое: загрузчик фонового изображения.
  • Новое: палитра цветов.
  • Улучшение свойства text-shadow.
  • Новое: Менеджер исходного кода CSS.
4.3.5 Стабильный
  • Новое: новые ярлыки.
  • Улучшения основных функций.
4.3 Стабильный
  • Новое: функция отмены/повтора
  • Новинка: цветовые палитры материалов
  • Улучшение основных функций.
  • Новое: новые ярлыки
  • Исправлено: некоторые ошибки.
4,2
  • Исправлено: важная ошибка.
  • Улучшение производительности.
  • Улучшение для ядра.
  • Новое: Полноэкранный режим.
  • Новое: инструмент для измерения пикселей.
  • Шрифты обновлены.
4.1
4,0
  • Новое: свойство анимации CSS.
  • Новое: живой редактор CSS.
  • Новое: автоматический префикс.
  • Новое: свойство фильтра CSS.
  • Новое: CSS-свойство text-shadow.
  • Новое: свойство box-shadow.
  • Новое: свойство размера коробки.
  • Новое: преобразование свойства.
  • Новое: горячие клавиши.
  • Новое: описание некоторых опций.
  • Исправлена ​​ошибка SSL.
  • Исправлено: некоторые ошибки.
3,2
3.1
  • Усовершенствования ядра.
  • Новое: функция «экспорт кода CSS».
  • Исправлено: некоторые ошибки.
3,0
  • Усовершенствования основных функций.
  • Новое: оперативная поддержка.
  • Новое: «выбрать только это».
  • Исправлено: некоторые ошибки.
2.2.3
  • Усовершенствования ядра.
  • Новое: более 300 фоновых рисунков
  • Новое: цветовые палитры.
1.7.0
  • Улучшения совместимости с некоторыми темами.
1.2.1
  • Улучшения в селекторе CSS.
1.0.0

Как использовать визуальный редактор стилей CSS в WordPress

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

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

Сегодня я собираюсь показать, как использовать плагин редактора CSS WordPress для настройки любой страницы и темы без использования кода.

Что такое редактор CSS?

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

Визуальный редактор стилей CSS

Плагин Visual CSS Style Editor позволяет настроить любую страницу и тему без написания кода.Это редактор CSS, который отображает все элементы страницы и позволяет вам визуально манипулировать ими.

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

Плагин включает в себя более 60 свойств стилей для использования. Другие основные функции этого плагина WordPress CSS Editor включают:

  • Настройка любой страницы и любого элемента
  • Возможность настройки страницы входа в WordPress
  • Автоматические селекторы CSS
  • Визуальное перетаскивание
  • Визуальное редактирование полей и отступов
  • Live Редактор CSS
  • Предварительный просмотр в режиме реального времени
  • Управление всеми изменениями
  • История отмен и повторов
  • Экспорт файла таблицы стилей

Онлайн-редактор CSS предоставляет массу инструментов дизайна, ресурсы дизайна, свойства CSS для текста и фона и многое другое. более.По сути, плагин Visual CSS Editor дает вам все необходимое и даже больше для редактирования и оформления страниц и тем.

Примечание: Существует профессиональная версия плагина. Не стесняйтесь проверить это и посмотреть, если это то, что вам нужно. Учебное пособие ниже основано на бесплатной версии, так как оно дает вам все инструменты, необходимые для редактирования.

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

Шаг 1. Установите и активируйте подключаемый модуль

Чтобы начать редактирование страниц и тем с помощью этого конструктора CSS WordPress, вам сначала необходимо установить и активировать подключаемый модуль.

Вы можете сделать это, перейдя на страницу «Плагины» панели администратора WordPress. Просто используйте поле поиска для поиска плагина по имени. Когда он появится, установите и активируйте его прямо оттуда.

Шаг 2: Доступ к странице настроек

Теперь, когда плагин активирован на вашем сайте, пришло время перейти к основным настройкам и странице конфигурации. Для этого нажмите YellowPencil > Настройки, расположенные в левой части меню панели инструментов.

Вы видите, что это теперь появилось в качестве опции, так как вы активировали плагин.

Шаг 3. Настройка параметров

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

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

Шаг 4: Нажмите на вкладку «Настройки»

Нажмите на вкладку «Настройки», чтобы получить доступ к области, где вы будете выполнять все редактирование дизайнера CSS. Вы заметили, что здесь еще нет настроек, потому что вы только что установили плагин. Нажмите на ссылку «Начать:», чтобы начать.

Шаг 5: Выберите целевую страницу и тип настройки

Перед доступом к основному визуальному редактору CSS появится всплывающее окно. Выберите целевую страницу и тип настройки.Когда будете готовы, нажмите на кнопку «Продолжить».

Шаг 6: Начните настройку и редактирование

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

В левой части редактора вы увидите список инструментов и функций. К ним относятся такие вещи, как:

  • Element Inspector
  • CSS-редактор
  • Readive Mode
  • MESTIVE MODE
  • DARUMAME
  • Информация о дизайне
  • Animation Manager
  • UNDO / REDO Tools

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

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

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

Повторите этот процесс с любой страницей вашего сайта.

Преимущества редакторов CSS

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

Некоторые из основных функций, которые вам нужны в онлайн-редакторе CSS, включают:

  • Предварительный просмотр в реальном времени
  • Автозаполнение
  • Подсветка синтаксиса
  • Проверка
CSS

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

Часто задаваемые вопросы о других визуальных редакторах стилей CSS

Совместим ли он с любой темой и плагином?

Да, плагин Visual CSS Editor работает и хорошо интегрируется практически с любой темой и плагином.

Совместимо ли это с компоновщиками страниц?

Да, плагин позволяет настраивать страницы, созданные с помощью блочного редактора Gutenberg, компоновщика страниц Elementor и других компоновщиков страниц.

Модифицирует ли подключаемый модуль файлы темы?

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

Заключительные мысли

Наличие фантастического инструмента, такого как плагин Visual CSS Editor, позволит вам легко настраивать, проектировать и изменять файлы тем и страницы на веб-сайте WordPress.

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

Вы когда-нибудь пытались настроить веб-страницу или тему, написав собственный код CSS с нуля? Считаете ли вы, что надежный онлайн-редактор CSS делает это намного проще?

Редактор CSS | УльтраEdit

UltraEdit — это мощный текстовый и веб-редактор для разработчиков, поддерживающий редактирование CSS, HTML и многое другое. Кроме того, UltraEdit поддерживает многие другие веб-ориентированные языки : Javascript, PHP, Ruby, Perl и другие.

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

Помимо функций редактирования CSS, UltraEdit также поддерживает различные функции редактирования HTML: предварительный просмотр HTML, запуск активного файла в браузере, список тегов HTML для доступа практически к любому тегу HTML, настраиваемые шаблоны для часто используемого кода, FTP, SFTP. , поддержка FTPS и многое другое.

Мы также включаем CSS HTML Validator Std v19 БЕСПЛАТНО в наши подписки на полный доступ.

Загрузите нашу полнофункциональную пробную версию , чтобы приступить к созданию и редактированию файлов CSS. Узнайте, почему более 4 миллионов пользователей предпочитают UltraEdit в качестве любимого редактора.

Ключевые функции редактирования CSS

  • Подсветка синтаксиса — включает свертывание кода
  • Редактирование режима столбца/блока
  • FTP-клиент с настройками нескольких учетных записей и автоматическим входом в систему и сохранением (только 32-разрядная версия).
    • Включает поддержку SFTP и FTPS (только управление, управление и данные, неявное)
    • Возможность установки удаленного (на основе сервера) или локального (на основе регулярных выражений Perl) фильтра (обеспечивает возможность фильтрации для SFTP)
    • Расширенная поддержка прокси
    • Расширенная обработка SSL-сертификата
    • Установить локальный каталог по умолчанию для каждой учетной записи FTP
  • Дополнительные инструменты редактирования HTML и веб-инструменты:
  • Интегрированное сравнение файлов
  • Консоль SSH/telnet — подключитесь к своему серверу для быстрого редактирования файлов PHP
  • Поиск/Замена и Поиск/Замена в файлах
  • Поддержка проекта
  • Связать локальное хранилище файлов PHP с хранилищем файлов PHP на сервере
  • Интегрированные макросы и сценарии
  • XML Manager с проанализированным представлением дерева XML, а также возможностью перемещать, удалять и изменять узлы и переформатировать XML
  • Панель инструментов веб-поиска: выделите текст и нажмите кнопку панели инструментов веб-поиска для поиска определений функций PHP.
  • И многое другое…

YellowPencil — визуальный редактор стилей CSS от WaspThemes

Вышла версия 7.5.4! – Последнее обновление было выпущено 28 декабря 2021 г.
.

YellowPencil — это плагин для редактора стилей WordPress , который позволяет вам настраивать дизайн вашего веб-сайта в режиме реального времени.

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

Визуальный редактор CSS

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

Основные характеристики

  • Настройка любой страницы, любого элемента
  • Настройка страницы входа в WordPress
  • Автоматические селекторы CSS
  • 60+ свойств CSS
  • Визуальное перетаскивание
  • Визуальное редактирование полей и отступов
  • Живой редактор CSS
  • Предварительный просмотр в реальном времени
  • Управление изменениями
  • История отмены/возврата
  • Экспорт файла таблицы стилей

Плагин предоставляет расширенные инструменты и готовые к использованию библиотеки для удобного оформления вашего веб-сайта.

  • Инспектор гибких элементов
  • Инспектор отдельных элементов
  • Отзывчивый инструмент
  • Инструмент поиска элементов
  • Измерительный инструмент
  • Каркасный вид
  • Инструмент информации о дизайне
  • Генератор градиента
  • Менеджер анимации
  • Генератор анимации

Ресурсы дизайна

Доступ ко множеству элементов дизайна одним щелчком мыши. Настройте дизайн вашего сайта в соответствии с вашими потребностями!

  • 900+ шрифтов Google
  • 300+ фоновых узоров
  • Фон Unsplash стоковые изображения
  • Материальные и плоские цветовые палитры
  • 50+ анимаций

Свойства CSS: текст

  • Семейство шрифтов
  • Толщина шрифта
  • Цвет
  • Тень текста
  • Размер шрифта
  • Высота строки
  • Стиль шрифта
  • Выравнивание текста
  • Преобразование текста
  • Межбуквенный интервал
  • Интервал между словами
  • Оформление текста
  • Отступ текста
  • Перенос слов

Свойства CSS: Фон

  • Цвет фона
  • Фоновое изображение
  • Фоновый клип
  • Режим наложения фона
  • Фоновое положение
  • Размер фона
  • Повтор фона
  • Фоновое приложение

Другие свойства CSS

  • Маржа
  • Прокладка
  • Граница
  • Радиус границы
  • Позиция
  • Ширина
  • Высота
  • Списки
  • Флексбокс
  • Анимация
  • Тень коробки
  • Переход
  • Фильтр
  • Преобразование
  • Непрозрачность
  • Дисплей
  • Курсор
  • Поплавок
  • Прозрачный
  • Видимость
  • События указателя
  • Переполнение

Совместимость с любой темой и плагином

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

Совместимость со всеми компоновщиками страниц

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

Как это работает?

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

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

Документация и поддержка

Присоединяйтесь к сообществу Facebook для обсуждения, обратной связи и помощи.

Как использовать CSS в WordPress (редактировать, добавлять и настраивать внешний вид вашего сайта)

Хотите попробовать редактировать CSS WordPress, но не знаете, с чего начать? С помощью стилей CSS вы можете изменить внешний вид вашего сайта глобально или на определенных страницах. Добавьте цвета, разместите определенные элементы, создайте макет и в основном измените внешний вид всего в вашей теме WordPress.

Если вы хотите лучше познакомиться со средой разработки WordPress или просто лучше контролировать внешний вид своего веб-сайта, вам нужно знать, как добавить CSS в WordPress (а также как изменить то, что уже есть).

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

Готовы начать? Давай сделаем это!

Предпочитаете смотреть видеоверсию?

Что такое редактирование CSS?

CSS расшифровывается как каскадные таблицы стилей и является самым популярным веб-языком помимо HTML. Они идут рука об руку, поскольку CSS используется для стилизации HTML-элементов. HTML закладывает основу внешнего вида веб-сайта, а CSS используется для его дальнейшего оформления.

Пример кода CSS (Источник: w3schools. com)

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

При погружении в разработку WordPress вам необходимо знать языки HTML, CSS, JavaScript и PHP. Это то, во что встроена основная CMS, а также множество ее тем и плагинов.

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

Готовы придать своему сайту #WordPress индивидуальный внешний вид? 👀 Узнайте, как использовать стили CSS для редактирования цветов 🎨, изменения макета ✨ и многого другогоНажмите, чтобы твитнуть

WordPress и CSS

В WordPress CSS немного отличается. Он управляется темами, которые состоят из файлов шаблонов, тегов шаблонов и, конечно же, таблицы стилей CSS.Хотя они созданы вашей темой, все они доступны для редактирования вами.

Файлы шаблонов разбивают части вашего веб-сайта на разделы (например, header.php или archive.php), а теги шаблонов используются для вызова их и другого содержимого из вашей базы данных. Эти файлы на самом деле состоят в основном из PHP и HTML, хотя при необходимости вы можете добавить CSS.

На самом деле вам нужна таблица стилей или style.css. Чтобы изменить внешний вид вашего веб-сайта, вам нужно научиться добавлять и редактировать код в этом файле.

Как настроить тему WordPress с помощью CSS

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

Когда вы вносите эти изменения, вы должны знать одну вещь: когда ваша тема обновляется, любые изменения, которые вы внесли в стиль .css , functions.php или другие файлы шаблонов тем будут стерты. В общем, вы не должны вносить прямые изменения в свой сайт в редакторе без использования дочерней темы.

Таблица стилей похожа на «список инструкций» для вашего веб-сайта, точно определяя, как он оформлен и как обрабатывается код CSS. Здесь вы будете выполнять основную часть редактирования, но мы также покажем вам, как получить доступ к другим файлам шаблонов тем, таким как header.php и footer.php.

Есть два способа получить доступ к таблице стилей вашего веб-сайта WordPress: через панель управления WordPress или через FTP-клиент.Мы рассмотрим их обоих.

Неудобно делать это самому? Подумайте о том, чтобы нанять разработчика WordPress, который сделает этот шаг за вас.

Редактирование CSS WordPress на панели управления

Самый простой и удобный способ получить доступ к вашей таблице стилей CSS — прямо в панели инструментов WordPress. Нет необходимости устанавливать FTP-программы или редакторы кода. Вы можете напрямую редактировать любой файл с подсветкой синтаксиса и встроенной документацией по функциям.

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

После того, как вы сделали резервную копию и дочернюю тему, войдите в свой сервер. Вы можете найти редактор, зайдя в меню и нажав Внешний вид > Редактор тем .

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

Внесение прямых изменений в файлы WordPress

И вот вы в деле! Вы должны быть в таблице стилей по умолчанию, но посмотрите в меню справа, чтобы просмотреть файлы темы, если это не так.

Помимо style.css, у вас также будет доступ к файлам шаблонов, таким как functions.php, header.php и single.php. Все это влияет на поведение определенных страниц на вашем сайте.

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

Редактирование таблицы стилей style.css в теме WordPress

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

Редактировать файлы темы напрямую

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

FTP или протокол передачи файлов позволяет удаленно получать доступ к файлам веб-сайта и изменять их. Первое, что вам нужно сделать, это загрузить FileZilla или любой другой FTP-клиент.

Затем вы должны связаться с вашим хостом и запросить свои учетные данные FTP (хост, порт и имя пользователя/пароль, если применимо). Если у вашего хоста есть панель управления, вы можете найти ее, войдя в систему.

Учетные данные FTP в MyKinsta

Учетные данные пользователей Kinsta находятся на панели инструментов MyKinsta в разделе Sites > SFTP/SSH .

Получив их, запустите FTP-клиент и введите эту информацию. Если это не сработает, попробуйте поставить «sftp://» перед URL-адресом в разделе Host .

Использование FileZilla

Когда вы войдете, вы можете найти свой файл style.css, щелкнув папку wp-content , чтобы открыть его, затем папку вашей темы (например, тему T goty Twenty ), затем прокручивая, пока не увидите стиль. css.

Дважды щелкните, чтобы открыть его (или щелкните правой кнопкой мыши и выберите View/Edit ) и внесите изменения.Не забудьте сохранить и загрузить обратно на сервер.

Если вам нужно отредактировать другие файлы шаблонов, такие как home.php, single.php, archive.php, вы можете найти их в той же папке, что и style.css.

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

Для небольших дополнений, вот лучший способ добавить CSS на ваш сайт WordPress.

Как добавить пользовательский CSS в WordPress

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

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

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

Хотите узнать, как мы увеличили трафик более чем на 1000%?

Присоединяйтесь к более чем 20 000 других пользователей, которые получают нашу еженедельную рассылку с советами по WordPress, посвященными инсайдерской информации!

Подпишитесь сейчас

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

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

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

Хотя вы можете просто добавить код в style.css и положить этому конец, если вы не хотите создавать дочернюю тему, вносить серьезные изменения в существующий CSS в своей теме и, возможно, в конечном итоге стереть всю свою работу, это Лучше всего либо использовать опцию «Дополнительный CSS» в настройщике WordPress, либо установить плагин.

1. Редактирование CSS с помощью настройщика WordPress

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

В самом низу этого меню вы должны найти поле Additional CSS .

Щелкните, чтобы открыть его.Вы попадете на новый экран с полем ввода кода и несколькими инструкциями. Экран «Дополнительные CSS» включает подсветку синтаксиса, как и редактор тем, а также проверку, позволяющую узнать, неверен ли ваш код.

Дополнительный CSS в WordPress

Любой код, который вы пишете, автоматически появляется в области предварительного просмотра справа, если только он не содержит ошибок (хотя вы все равно можете опубликовать его).

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

Как видите, страница «Дополнительные CSS» во многом более мощная, чем редактор тем, и гораздо больше подходит для добавления кода, чем для работы с файлами ядра.

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

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

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

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

2. Добавление пользовательского CSS в WordPress с помощью плагинов

Есть несколько причин, по которым вы можете захотеть использовать плагин для добавления CSS в WordPress.Хотя эта функция аналогична меню «Дополнительные CSS», стили обычно сохраняются, даже если вы переключаете/обновляете темы.

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

Простой пользовательский CSS

Simple Custom CSS — самый популярный плагин для редактора CSS благодаря простоте использования, минимальному интерфейсу и легкому бэкенду. Короче говоря, это очень маленький плагин WordPress, который обладает большим потенциалом.

Плагин Simple Custom CSS WordPress

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

Простой пользовательский CSS и JS
Простой пользовательский плагин CSS и JS для WordPress

Простой пользовательский CSS и JS — хорошая альтернатива. Он также позволяет настроить таргетинг на верхний и нижний колонтитулы, внешний интерфейс или даже на серверную часть администратора.

SiteOrigin CSS
Плагин SiteOrigin CSS для WordPress

SiteOrigin CSS — это еще один вариант, который также включает в себя традиционный редактор CSS. Вы можете переключаться между ним и визуальным редактором в любое время.

WP Добавить пользовательский CSS
Плагин WP Add Custom CSS для WordPress

Если вам сложно добавить CSS на определенные страницы, WP Add Custom CSS добавит на экран редактирования настраиваемое поле CSS, а также предоставит глобальные стили.

Герой CSS

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

CSS Hero

CSS Hero — это плагин для визуального редактирования премиум-класса с некоторыми очень мощными функциями (анимация, редактирование для конкретных устройств и неразрушающее редактирование, и это лишь некоторые из них).

Где изучить CSS

Готовы самостоятельно погрузиться в CSS? Эти учебные пособия для начинающих познакомят вас с основами и научат вас синтаксису, который вам нужно знать, чтобы написать собственный функциональный код CSS.

Изучите CSS

. Это может быть сложно, но если вы не пытаетесь сделать что-то действительно сложное, CSS не так уж сложен! Простые вещи, такие как изменение цвета фона или настройка стиля шрифта, довольно просты, и в Интернете есть множество примеров.

(Рекомендуемая литература: 50+ современных шрифтов для использования на вашем сайте WordPress)

Большинство руководств по программированию, которые вы найдете в Интернете, также совершенно бесплатны. Там много информации бесплатно/за небольшие деньги.

Вот несколько примеров лучших руководств по CSS для начинающих.

  • W3Schools CSS Tutorial: здесь можно найти огромное количество информации: подробные руководства, примеры и справочные материалы для работы. Учебные пособия W3Schools максимально просты и понятны, поэтому даже если вы новичок, это отличное место для начала.
  • Codeacademy Изучите CSS: шесть бесплатных практических уроков помогут вам изучить основы CSS. Это не простое видеоруководство, а интерактивный урок, на котором вы работаете с реальным кодом. С профессиональной версией вы также получаете викторины и проекты произвольной формы для работы.
  • Изучите CSS за один час: многие люди хотят выучить новый язык программирования, но у них просто нет на это времени. Но если вы можете выделить всего один час, вы можете изучить CSS с помощью этого бесплатного курса из 20 частей.Даже если к концу вы не станете мастером, вы должны хорошо разбираться в основах.
  • Введение в базовый HTML и CSS для пользователей WordPress: Ищете что-то конкретное для WordPress? Если вы всегда боролись с написанием HTML и CSS, этот курс идеально подходит для вас. Он платный, но содержит 52 лекции и пять часов видео для обучения.
Узнайте, как использовать CSS для настройки и оптимизации вашего веб-сайта, от используемых цветов до промежутков между элементами ✨Нажмите, чтобы твитнуть

Резюме

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

Файлы темы можно редактировать либо из вашего бэкэнда, либо через FTP, чтобы изменить внешний вид вашего сайта, но этого обычно следует избегать, если вам не нужно редактировать существующий код.

Если вы просто хотите добавить свой собственный CSS, используйте страницу «Дополнительные CSS» в разделе «Внешний вид» > «Настроить » или попробуйте плагин, если вам нужно что-то более мощное.

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

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

Удачной укладки!

Рекомендуемая литература: Лучшие онлайн-курсы по веб-дизайну


Экономьте время, затраты и максимизируйте производительность сайта с:

  • Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
  • Интеграция с Cloudflare Enterprise.
  • Глобальный охват аудитории с 29 центрами обработки данных по всему миру.
  • Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Тема: Диалоговое окно редактора стилей CSS

Для корректного отображения этой страницы необходим браузер с поддержкой JavaScript.

 

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

Эффекты

: Вставьте сюда текст описания. ..

Селекторы

: Вставьте здесь текст описания…

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

Показать результаты правил стиля.

Модели

Щелкните заголовок, чтобы переключаться между методами сортировки. Список может отображаться в исходном порядке, определяемом временем добавления стиля в список, или может быть отсортирован по возрастанию или убыванию.Порядок возрастания и убывания может ускорить поиск стиля. Однако первоначальный порядок важен в том смысле, что когда есть два стиля, которые имеют одно и то же правило стиля, например. будет использоваться тот, который определен в стиле, расположенном ниже в списке. Например, есть два стиля: style1 и style2. Для стилей style1 и style2 установлены цвета #FFFFFF (белый) и #000000 (черный) соответственно. Style2 находится ниже style1 в списке. Когда и стиль1, и стиль2 назначены текстовому элементу, цвет стиля2 будет иметь преимущество, а текст текстового элемента будет черным.

Точка останова

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

Кнопка добавления

Добавить новый стиль.

Кнопка удаления

Удалить выбранный стиль.

Кнопка дублирования

Создать дубликат стиля из выбранного стиля.

Кнопка переименования

Изменить имя стиля.

Кнопка вверх

Переместить выбранный стиль вверх.

Кнопка «Вниз»

Переместить выбранный стиль вниз.

Не используется

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

Список стилей

Показать список стилей.

Кнопка OK

Нажмите OK, чтобы сохранить определенные стили.

Кнопка отмены

Отмените редактирование стилей и закройте это диалоговое окно.

Создание, редактирование и прикрепление файлов CSS для оформления вашего сайта

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

В этой статье рассказывается о создании, публикации и прикреплении файла CSS в HubSpot. Здесь вы можете узнать, как внести простые изменения в дизайн конкретной страницы. Если вы используете шаблон темы, узнайте, как изменить настройки темы.

Создать новый файл CSS

  • В своей учетной записи HubSpot перейдите к Маркетинг > Файлы и шаблоны > Инструменты дизайна .
  • Щелкните значок папки папки в верхнем левом углу, чтобы развернуть боковое меню. Затем нажмите Файл > Новый файл .
  • В диалоговом окне щелкните Таблица стилей CSS . Затем введите имя для таблицы стилей CSS и нажмите Create .

Редактировать файл CSS

Создав или открыв существующий файл CSS, внесите изменения в редакторе кода. Помимо стандартного CSS, редактор кода поддерживает переменные и макросы HubL, чтобы упростить работу с CSS.Чтобы просмотреть, как будет отображаться ваш HubL, нажмите, чтобы включить переключатель Show output в верхней части редактора. Справа откроется панель с отрендеренным предварительным просмотром.


Список стандартных селекторов CSS для шаблонов HubSpot см. в Boilerplate CSS.

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

.
  • В консоли ошибок в нижней части редактора кода.
  • В области ошибок в левой части редактора кода.
  • На полосе прокрутки в правой части редактора.

Ошибки, препятствующие публикации, будут выделены красным, а общие предупреждения — желтым. В нижней части редактора кода нажмите Показать подробности , чтобы просмотреть дополнительные сведения об ошибках в консоли ошибок, и Скрыть подробности , чтобы свернуть консоль ошибок.

В консоли ошибок будут ссылки на везде, где есть ошибки или предупреждения HubL в вашем коде или пользовательском модуле.Наведите указатель мыши на красные индикаторы ошибок в левой части редактора кода, чтобы увидеть ошибку или предупреждение в коде. Щелкнув по ошибке, вы переместите курсор на все ошибки или предупреждения в этой строке. Нажав на аннотацию полосы прокрутки, вы перейдете к этой части файла.

Вы также можете щелкнуть номер строки в редакторе кода и соответствующим образом обновить URL-адрес файла. Это позволяет вам поделиться ссылкой на свой код с другими и направить их именно туда, где вы работаете в файле.

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

Прикрепить к шаблону

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

  1. общественное_общее.css * — таблица стилей, в основном используемая приложением HubSpot, но также и для некоторых функций сайта.
  2. Заголовок HTML в настройках под Веб-сайт > Страницы — Теги ссылок добавлены в глобальный сайта.
  3. Layout.css ** — адаптивный CSS-файл по умолчанию, прикрепленный ко всем макетам шаблонов с возможностью перетаскивания.
  4. Прикрепленные таблицы стилей в настройках под Веб-сайт > Страницы — таблицы стилей прикреплены ко всему вашему сайту.
  5. Прикрепленные таблицы стилей в настройках в разделе Веб-сайт > Блог — таблицы стилей, прикрепленные к вашему блогу (переопределяют глобальные таблицы сайта).
  6. Связанные таблицы стилей *** — таблицы стилей, присоединенные к макету шаблона.
  7. Дополнительная разметка в шаблоне — теги ссылок, добавленные в определенного макета шаблона.
  8. Таблицы стилей для конкретных страниц — таблицы стилей, прикрепленные к настройкам страницы.
  9. Заголовок страницы HTML — теги ссылок добавляются в определенной страницы в настройках страницы.

* Требуется

** Требуется для макетов перетаскивания

*** Рекомендуемый метод прикрепления таблиц стилей для макетов шаблонов

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

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

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

Прикрепите или удалите таблицы стилей на определенной странице

Обратите внимание: этот параметр недоступен для шаблонов тем.Узнайте, как изменить настройки темы.

Чтобы добавить или удалить таблицу стилей для конкретной страницы из раздела настроек редактора страниц:

  • Переход к страницам веб-сайта или целевым страницам.
  • Наведите указатель мыши на свою страницу и нажмите Изменить .
  • В редакторе страниц нажмите Настройки вверху.
  • Прокрутите вниз и щелкните Дополнительные параметры .
  • В разделе Таблицы стилей страницы щелкните раскрывающееся меню Прикрепить таблицу стилей и выберите лист, который вы хотите прикрепить.Нажмите X рядом с таблицей стилей, которую вы хотите удалить.

  • Щелкните Сохранить и Опубликовать в правом верхнем углу.

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

  • На той же вкладке Настройки в редакторе страниц выберите Отключено в раскрывающемся меню рядом с включенными таблицами стилей.
  • Нажмите Сохранить и Опубликовать в правом верхнем углу.

Присоединение или удаление таблиц стилей на уровне домена (только

Marketing Hub Enterprise )

Обратите внимание: шаблоны тем должны включать аннотацию enableDomainStylesheets: true , чтобы можно было использовать таблицы стилей на уровне домена. Узнайте больше об аннотациях шаблонов.

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

  • В своей учетной записи HubSpot щелкните значок настроек настроек на главной панели навигации.
  • В боковом меню нажмите Веб-сайт > Страницы .
  • Щелкните раскрывающееся меню , чтобы выбрать домен , для которого вы хотите обновить настройки.
  • На вкладке Шаблоны прокрутите до CSS и таблицы стилей . Чтобы добавить таблицу стилей, нажмите + Добавить таблицу стилей . Нажмите X рядом с прикрепленной таблицей стилей, чтобы удалить ее.
Comments