Style Master v 5.0 (для Mac OS X), v 4.6 (для Window) 1997 - 2016 гг. Интерфейс и справка на англ. языке. Вес 8,79 Мб. Цена 59,99 долл. После окончания пробного периода программа (30 дней) продолжит работу в урезанной бесплатной версии.
Работает в Windows 2000/NT/XP/Vista, Mac OS X.

Назначение программы - создание таблиц стилей CSS. Создание листов стиля, основанных на Вашем HTML. Редактирование CSS, а также PHP, ASP.NET, Rubyи др. Поддержка CSS3 и HTML5. Авторская справка в Интернете (англ. язык)
Скачать

TopStyle Pro v 5 (1999 - 2006 гг). Интерфейс и справка на англ. языке (имеется русификатор). Цена 79,95 долл. Имеется бесплатная версия программы (TopStyle Lite).
Назначение программы - создание таблиц стилей 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 предназначена для редактирования таблиц стилей CSS в реальном времени. Вес 44,7 Мб.
Все изменения, вносимые в таблицу стилей, сразу же отражаются на текущей веб-странице (без обновления страницы).
LiveStyle устанавливается как расширение для браузера Google Chrome или редактора Sublime Text , и может работать с проектами любого масштаба: от маленьких одностраничных сайтов до огромных вебсайтов. И Вы можете даже работать со своим вебсайтом.
При установке LiveStyle, например, как расширение для Google Chrome, значок программы появляется на панели инструментов браузера.
Видео-обзор
Скачать

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

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

Free CSS Toolbox

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

Rapid CSS editor

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

ArduoCSS Editor

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

Внимание! Служба технической поддержки не консультирует по работе с CSS.

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

Для редактирования стилей CSS перейдите в раздел консоли Внешний вид — Редактор CSS .

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

Справа от редактора стилей есть дополнительные настройки и возможность посмотреть и восстановить редакции стилей CSS.

В настройках в поле Динамический CSS можно включить один из видов динамического CSS: LESS или SASS (SCSS Syntax) . Используйте динамические CSS только если вы знаете, что это такое.

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

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

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

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

Для перехода к просмотру редакции нажмите на дату редакции в списке редакций.

Появится окно сравнения текущей и выбранной редакций. Старую редакцию можно восстановить нажав на кнопку «Восстановить эту редакцию».

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

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

Откроется новое окно/вкладка браузера, на которой можно посмотреть ваш сайт с внесенными изменениями. При просмотре будет отображаться надпись под админ-панелью: «Предварительный просмотр: изменения необходимо сохранить, иначе они будут утеряны.»

Просмотрено (3395) раз

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

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

• Удобство использования - насколько редактор прост для новичков, насколько интуитивно понятен, когда мы открываем его впервые.
• Мощность - критерий всех новшеств, возможностей редактирования кода, автодополнение, режимы редактирования и т.д.
• Расширяемость - поддерживает ли редактор плагины, дополнительные библиотеки.
• Эстетика - мы любим красоту в нашей работе, насколько среда приятная на вид, насколько аккуратно выглядит код в ней.
• Скорость - насколько быстро запускается редактор, насколько быстро открывает большие файлы.
• Кросс-платформенность - доступен ли редактор для нескольких операционных систем.
• Цена - самая дешевая цена, получает наивысшую отметку.

Редакторы кода предоставлены в группах, которые предназначены для конкретных типов разработчиков.

Для Гуру

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

Vim

Выпущен в 1991 году. Универсальный и мощный редактор получил множество поклонников по всему миру. Что делает его особенным среди других, это технология командной строки. Вместо простого написания кода, вы выбираете режим ввода для текста, запускаете поиск и используете еще больше указаний. Этот редактор импортирован на всех известных операционных системах. Vim также может быть расширен с помощью скриптов и плагинов. Это бесплатный софт, который уже инсталлирован на многих Linux системах.

Emacs

Разработка Emacs началась в далеких 1970-х и продолжается до сих пор. Этот редактор известен своей расширяемостью. Это один из первых редакторов, который поддерживает подсветку кода, автоматическое выравнивание кода и поддержку многих программных языков. Подобно Vim, он также кросс-платформенный и может использоваться через терминальное окно или графический интерфейс. Emacs это бесплатный и открытый ресурс.

Для профессионалов

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

Eclipse

Eclipse чаще всего используется для разработки Java приложений. Этот софт поддерживает плагины, которые делают возможной поддержку дополнительных языков программирования. Есть плагины для C/C++, Ruby, PHP и других. Eclips предлагает мощных хинтинг кода, построенный на документациях и проверке синтаксиса в реально м времени. Большие компании, например Google, предоставляют свои средства разработки для этой платформы. Вы можете легко создавать приложения для Android и App Engine. Eclipse бесплатный и открытый ресурс.

Aptana Studio

Aptana это среда разработки предназначена для тяжелых AJAX приложений. Эта среда поддерживает большинство популярных веб языков: PHP, JavaScript, HTML, CSS, Ruby, Python и другие с помощью плагинов. Также есть Git интеграция, возможность тестировать приложение на локальном сервере, и множество полезных сниппетов кода для каждого языка программирования. Подобно Eclipse, Aptana бесплатный и открытый ресурс.

Netbeans

Еще одна среда для Java, но как и Eclipse, может быть расширена для дополнительных языков: PHP, Python, C/C++ и других. Приложение запускается на Linux, Windows и OSX. Netbeans может ускорить процесс разработки десктопных приложений с помощью Drag and Drop конструктора. Негативной стороной является производительность - Netbeans может тормозить на больших проектах. Этот редактор кода бесплатный и открытый ресурс.

Dreamweaver

Dreamweaver это часть приложений Adobe Suite предназначенных для веб дизайнеров. Он поддерживает только наиболее популярные языки веб программирования - PHP, ASP.NET, JavaScript, HTML, CSS. Очень удобный для новичков, с поддержкой WISIWYG редактирования, живого просмотра, тестирование на удаленном сервере и разработка приложений с помощью jQuery mobile и Phonegap. Dreamweaver доступен на OSX и Windows. Если покупать весь пакет приложений за 399$, нет смысла ею пользоваться. Но если купить отдельно, может быть в этом что-то есть. Еще проще будет .

Visual Studio

Visual Studio это «все в одном», среда разработки для Windows. Этот редактор поддерживает большое количество языков: C/C++, C#, VB.NET и F# которые встроены в среду. Имеет мощные средства для автозавершения кода, подстрочная документация, проверка ошибок, дебаггинг, дизайн форм, создание схем баз данных и многое другое. Цена начинается с 500$, но экспресс версия программы доступна бесплатно.

Xcode

Xcode это решение от Apple для разработки OSX и iOS приложений. Поддерживает C, C++, Objective-C, Objective-C++, Java, AppleScript, Python и Ruby. С помощью Xcode, вы можете писать, проводить дебаггинг, делать тестирование приложений. Имеет конструктор интерфейсов и эмулятор мобильных устройств, для тестирования iOS приложений. Xcode использовали, как платный редактор, но сейчас они предлагают бесплатно.

Coda 2

Coda это «все в одном» редактор для веб разработчиков. Поддерживает передачу файлов через протокол FTP, навигацию по коду и файловой структуре, сайты и группы сайтов, управление MySQL и многое другое. С новым Coda 2, вы можете использовать iPad для просмотра. Стабильная цена 99$, но вы можете получить по дисконту за 75$.

Для эстетов

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

TextMate

TextMate в основном графический текстовый редактор для OSX. Поддерживает макросы, хранение кода, сниппеты, интеграцию shell, управление проектами. Text Mate 2 предположительно будет предоставлен со всем что только можно. Редактор стоит около 50$.

Sublime Text 2

Sublime это красивый кросс-платформенный редактор. Он быстрый и богат функционалом, для практически каждого языка программирования. Поддерживает несколько выделений, сворачивание кода, макросы, проекты и другое. Также возможно полноэкранное редактирование, которое выглядит превосходно на больших мониторах. Запускается на Linux, Windows и OSX. Этот редактор предоставляется с неограниченным тестовым периодом, но вам нужно купить лицензию за 59$, которая может быть использована на каждом компьютере.

Для прагматиков

Notepad++

Этот мощный и легкий редактор должен быть у каждого разработчика, который пользуется Windows. Хотя название нагадывает расширенный блокнот, это могучий инструмент. Он прост для новичков, но он также подходит для профессионалов. Notepad++ поддерживает каждый из популярных языков программирования. Поддерживает разбиение рабочей среды на два окна редактирования, FTP браузер, макросы и мощные возможности редактирования текста. Notepad++ абсолютно бесплатный. Его можно .

TextWrangler

TextWrangler это бесплатный и легкий редактор для OSX. Поддерживает все языки программирования. Предлагает мощный функционал поиска и замены, манипуляции с текстом, сравнение файлов, FTP поддержка и многое другое.

CodeLobster

CodeLobster обладает простым и мощным функционалом для веб программиста. Подходит для всех версий ОС Windows: 8, 7, Vista, XP, 2003, 2000, ME, Server. Гибкая настройка рабочей среды, всплывающие подсказки по функциям, отладка, и todo список. Этот редактор рекомендован именно для веб разработчика, он легко расширяется для работы с различными фреймверками: CakePHP, CI, Drupal, JQuery, Yii, Smarty, Symfony, WP, Facebook. Облегченный вариант редактора доступен бесплатно. С набором инструментов 40$, в полном наборе плагинов и расширений более 100$.

Лучшим из редакторов кода является…

Не смогли найти свой редактор в этом списке? Расскажите нам, какой ваш любимый редактор в комментариях ниже!

• Перевод

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

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

Макеты

CSS Layout Generator
Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.

За пределами CSS

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

LESS – Leaner CSS
Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать.css файлы.less для получения всех этих возможностей.

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

SASS - компилятор в стайлшиты. Очень удобно - форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.

Теги:

• css
• средства разработки

Добавить метки

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

1. Stylizer

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

2. Xylescope

открыто преобразует страницы с ошибками разметки, заложенными в исходной кодировке, в полноценные XHTML-документы. Авто-форматирование исходной кодировки гарантирует чёткость структуры конечной версии и её хорошую читаемость, независимо от качества начального текста.

3. Style Master

- основной инструмент построения CSS-структур, совместимых с различными платформами. Style Master гораздо больше, чем просто текстовый редактор, он поддерживает вашу рабочую среду, в том числе, следующие процессы:
- создание таблиц стилей на основе ваших HTML-кодов
- прямое CSS-редактирование сайтов на основе PHP, ASP.NET, Ruby, а также прочих динамических структур
- CSS-редактирование через ftp

4. Rapid CSS Editor

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

5. CSS Toolbox

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

6. CoffeeCup StyleSheet Maker

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

7. EngInSite CSS Editor

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

8. CSSEdit

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

9. Jellyfish-CSS

- многофункциональный редактор таблиц стилей. С полным набором опций, необходимых для построения отличных таблиц стилей.

10. snap{css}

- очень компактное приложение, подобное блокноту (notepad), позволяющее css-разработчикам легко вносить правку в их коды, пользуясь привычной средой и быстрым доступом к таким полезным функциям как "beautify " и "collapse" ("украшение" и "сворачивание").

11. Simple CSS

позволяет вам легко создавать с нуля каскадные таблицы стилей (CSS) и/или модифицировать уже готовые в привычном интерфейсе посредством наведения курсора и нажатия на клавишу мыши.

12. TopStyle

включает функциональные инструменты для конструирования веб-сайтов с учётом требований стандартов.
- Обеспечивает предварительный просмотр CSS по ходу написания кода.
- Легко генерирует выразительные цветовые схемы для вашего сайта.
- Средство проверки стилей Style Checker устанавливает синтаксическую корректность вашей CSS-кодировки применительно к различным браузерам.
- Функция Site Reports позволяет сразу обнаружить CSS-стили на вашем сайте.
- Функция Style Upgrade быстро заменяет все устаревшие HTML-коды равнозначными CSS-комбинациями.

13. tsWebEditor

- редактор документов на HTML, PHP, Perl, javascript, CSS и многих других языках программирования. Он отображает исходную кодировку в цвете (подсветка синтаксиса), подсказывает коды для выполнения функций, осуществляет автодополнение (PHP, javascript, ASP, HTML), поддерживает программную среду браузера, работу PHP-инструмента наладки и проверки корректности синтаксиса, а также справочной службы, CSS-мастера, редактора HTML-тегов, средства контроля корректности HTML-синтаксиса и лёгкого в использовании конструктора SQL-структур.

14. cssed

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