11 Кращі редактори CSS - переглянуті

1. Стилізатор

Сумісність: WindowsПримітна функція: Код Grid, Розмір ручки, Bullseye, розфарбування двома клацаннями

Stylizer - це абсолютно унікальний редактор CSS, на якому зосереджено увагу редагування CSS в реальному часі. Ви можете просто ввести веб-адресу в свій вбудований браузер, який підтримує визначення стилю Firefox 3.5 і IE7, і всі відповідні правила CSS завантажуватимуться для редагування за допомогою знайомого інтерфейсу "точка-та".

Редактор поставляється з Код Grid функція, яка робить редагування CSS більш зручним, оскільки ви можете переглянути результат відразу після зміни значення. Також з його діагностикою Булсай Ви можете переглядати пов'язані елементи в певній частині сайту та редагувати його за допомогою точок і кліків. Інші функції, такі як Розміри розміру дозволяє візуально налаштувати позицію елемента CSS, а також Двічі клацання Розмальовка ви отримали вибір кольорів Photoshop, щоб вибрати будь-який колір для, скажімо, вашого шрифту сайту. Ах, я згадав, що всі ці зміни зроблені в режимі реального часу, відразу ж видимий результат?

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

Стилізатор поставляється з версією Basic і Ultimate. Незважаючи на те, що версія Basic повністю безкоштовна, версія Ultimate доступна вам протягом 14 днів після встановлення, після чого вона пропонує $ 85, щоб ви могли продовжувати використовувати її розширені функції, такі як Bullseye.

2. TopStyle

Сумісність: WindowsПримітна функція: Стиль інспектор, Стиль Sweeper, CSS Tidy

Редактор CSS TopStyle починає дивувати вас своїм першим налаштуванням часу, коли ви можете вибрати визначення стилю, яке відображає лише властивості та значення, які підтримуються Firefox, Internet Explorer, Safari або навіть iPhone OS 2.0, що практично корисно для крос-платформних програм веб-дизайнер.

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

Ще один хороший матеріал TopStyle це показує сумісність веб-переглядача під інспектором стилю, який ви можете бачити, або властивість CSS повністю підтримується певною версією веб-браузера, як Internet Explorer 7, або ж вона дуже страшна.

Редактор поставляється як пробна версія з обмеженою функцією, і ви можете розблокувати його повний потенціал на $ 79,95.

3. Стиль майстра

Сумісність: Windows, Mac OS XПримітна функція: Шаблон таблиці стилів

Стверджуючи себе майстром, Style Master досить добре створив середовище редагування CSS для будь-якого рівня знань. Програмне забезпечення не тільки забезпечує редактор WYSIWYG, який згладжує робочий процес для початківців CSS, але також надає вам доступ до дуже детальної інформації про кожне властивість CSS для експерта. Ви можете переглядати та вибирати властивості CSS за категорією або за алфавітом.

Можливо, найбільш унікальним моментом є сам редактор містить майже 20 корисних шаблонів таблиць стилів, з яких ви можете почати, і не дивно, що майстер стилю має дуже чисті, добре організовані та професійні правила CSS, визначені в його вбудованому шаблоні..

Ви можете насолоджуватися повнофункціональним програмним забезпеченням протягом 30 днів і сплачувати або $ 59.99 або $ 29.99 за ліцензію на освіту, щоб знову відкрити весь свій потенціал знову.

4. Xyle Scope

Сумісність: МакПримітна функція: Режим вибору, розумна група, інтеграція текстового редактора

Xyle Scope - це обов'язковий безкоштовний редактор CSS для Mac, тому що це справді професійний редактор CSS, який дозволяє переглядати веб-сайт, одночасно налаштовуючи його CSS безпосередньо в редакторі.

Браузер Xyle поставляється з нормальним режимом браузера та режимом вибору, який працює дуже схоже, як плагін Firefox, Firebug, який забезпечує перегляд та редагування джерела CSS, за винятком того, що редактор дозволяє зберігати змінені значення CSS у їхньому початковому місці.

Використання "Smart Group"Ви можете відфільтрувати всі правила, що впливають на те, як відображаються посилання, або на тих, хто відповідає за макет, ви навіть можете звузити результат за допомогою вбудованої функції пошуку, не більше методу спроб і помилок!

Xyle Scope також пропонують інтеграцію з зовнішніми текстовими редакторами, такими як BBEdit, для більш зручної та енергозберігаючої роботи з кодуванням. Просто внесіть зміни, і текстовий редактор або Xyle Scope оновлює всі зміни автоматично.

5. Rapid CSS

Сумісність: WindowsПримітна функція: Синтаксичний підсвічування, завершення кодування, форматування CSS

Rapid CSS - це шлях до більш комфортного, зручного та складного редагування CSS. Він має власний повністю настроюваний текстовий редактор з корисними функціями, такими як підсвічування синтаксису, завершення коду та вбудований CSS-довідник для безболісного досвіду кодування.

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

Редактор поставляється з 30-денним оцінювальним періодом з 30 способами, ви можете перейти на повну версію $ 29,85.

6. Студія стилю

Сумісність: WindowsПримітна функція: Майстер CSS, IntelliStyle

Основною красою Style Studio є її функція майстра CSS, яка надає вам негайний ефект CSS з кількома пунктами та кліками.

Наприклад, можна вибрати майстра шрифтів, потім вибрати сімейство шрифтів і встановити для нього розмір шрифту, а потім стиль шрифту, вагу, варіант… і бум! Правила вставляються в таблицю стилів як повністю перевірений код CSS.

Функція майстра також включає кольори, межі, текст, позиціонування, класифікацію і, нарешті, правила фільтрації, практично все, що можна подумати про CSS. Ці майстри досить корисні, оскільки вам не потрібно повторно вводити текст для досягнення певного складного ефекту CSS. Ще однією благородною особливістю є IntelliStyle, яка функціонує як завершення коду для вибору певних властивостей CSS для Вашого дизайну.

Недоліком цього редактора буде його застаріла підтримка визначення стилю веб-переглядача, оскільки вона підтримує лише IE6 і, ну, ні Firefox.

Вам надається 30 днів, щоб насолодитися програмним забезпеченням і $ 49.99, щоб придбати його.

7. CSSEdit

Сумісність: МакПримітна функція: Рентгенівський інспектор, Visual Editor, Selector Builder

Дизайн красивих, інноваційних і швидко завантажуваних веб-сайтів з красивою, інноваційною і швидкою програмою, це CSSEdit by MacRabbit. З функцій, таких як Selector Builder до розумного середовища джерела, CSSEdit розроблений для будь-якого рівня знань.

З полірованим редактором, подібним до цього, ви очікуєте, що зміни у вашій таблиці стилів CSS з'являться в режимі реального часу, без стомлюючої дії завантаження. Рентгенівський інспектор також створюється як функція для діагностики CSS-коду з конкретної частини сайту.

Інноваційна частина CSSEdit ймовірно, його Селектор Builder що дозволяє описати свій стиль CSS з простою англійською мовою, не дуже цікавий для експерта, але корисний для початківця.

Демо-версія обмежує збереження файлу з менш ніж 2500 символами, а ви можете заплатити $ 39,95, щоб стерти всі обмеження.

8. EngInSite CSS Editor

Сумісність: WindowsПримітна функція: Інструмент вимірювання в режимі попереднього перегляду

Якщо ви серйозний дизайнер, що піклується про правильну специфікацію CSS, правильне розташування CSS або таблицю стилів CSS має бути повністю перевірено, тоді редактор CSI EngInSite може бути вашим улюбленим редактором.

У цьому редакторі можна додати селектор класу, ідентифікатора та елемента за допомогою вбудованого інспектора, а також можна перетворити колір на значення Hex або RGB, що є дуже рідкісним для редактора CSS. Результат можна побачити на панелі попереднього перегляду за допомогою інструментів вимірювання, щоб переконатися, що кожен елемент дизайну знаходиться в правильному положенні.

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

9. Створювач таблиць стилів

Сумісність: WindowsПримітна функція: Теги CSS

Maker стилів - це ще один стандартний редактор CSS, який пропонує чисту поверхню кодування з панеллю File Explorer, а також деякі корисні інструменти CSS, які допомагають налаштувати шрифт, колір, маржу, межу тощо.

Порівняно з кількома редакторами CSS Rapid CSS або Студія стилю, Менеджер має менше функцій, але дуже чистий інтерфейс, і це добре для деяких початківців, які не хочуть ускладнювати справу, або CSS-ніндзя, який хоче, щоб все було мінімальним і зручним.

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

Це коштує 34 долара, щоб володіти цим редактором, або ви можете придбати його разом з іншим програмним забезпеченням CoffeeCup як пакетну покупку.

10. Arduo CSS

Сумісність: WindowsПримітна функція: Вузол, CSSTidy

Arduo CSS є новоствореним редактором CSS, який прагне порадувати вас своїм інтуїтивним і простим у використанні інтерфейсом. Завдяки чистому інтерфейсу та підсвічуванню синтаксису ви гарантовано створюєте та редагуєте CSS-файл без особливих труднощів і переривань. Також ви можете скористатися функцією 'Node' для визначення правил CSS по точкам і клікам.

Для тих, хто вважає, що ваша таблиця стилів занадто важка, інструмент CSSTidy з редактора допоможе вам оптимізувати таблицю стилів і знищити весь непотрібний код.

Редактор вільно доступний на офіційному сайті.

11. Простий CSS

Сумісність: Windows, Mac OS XПримітна функція: Імпорт файлу CSS, інтерфейс Point-and-click, база даних додаткових шрифтів

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

Хоча ви можете імпортувати майже всі файли CSS у редактор, ви можете переглядати лише 1 правило CSS одночасно за допомогою клацання, а іноді ваш імпорт може спричинити помилку через його обмеження, як @ не підтримує @rules. Крім того, сам редактор не є таким гнучким, як ви можете вибрати лише "Auto" або "Inherit" для z-index властивості, але не дають безпосередньо значення властивості.

Тим не менш, це безкоштовно і дуже зручно для дизайнера, який потребує швидкого виправлення.

Бонус: більше редакторів та інструментів

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

Firebug

Найпопулярніший і найпотужніший інструмент веб-розробки, який перевіряє HTML, змінює стиль CSS і бачить зміни в реальному часі, доступний як плагін для веб-браузера Firefox.

Використання CSS

Розширення для Firebug, яке дозволяє сканувати кілька сторінок вашого сайту, щоб побачити, які правила CSS фактично використовуються на вашому сайті.

Веб-розробник

Розширення Firefox для вас, щоб зробити багато цікавих речей, наприклад, перегляд джерел CSS або вимкнення певної таблиці стилів CSS для використання при розробці чи розробці.

Блокнот++

Безкоштовний редактор вихідних кодів і заміна блокнота, яка підтримує кілька мов, включаючи CSS. Містить функції, такі як функція завершення, щоб допомогти створити свій дизайн CSS.

Кода

Розширений текстовий редактор із вбудованим редактором CSS, який надає вам два режими редагування CSS для більш гнучкого дизайнерського досвіду, здатного побачити результат миттєво після внесення змін.

IDE NetBeans

Інтегрована середовище розробки з відкритим вихідним кодом та професійне середовище з найповнішою посиланням у форматі CSS.

Студія Aptana

Повна середовище веб-розробки, що поєднує потужні інструменти для створення HTML, CSS і JavaScript, наразі підтримує до HTML5 і CSS3.

WebStorm

IDE JetBrain, що реалізує відповідне автозаповнення для всього, включаючи CSS, також можна отримувати сповіщення про проблеми CSS.