Софт

редакторы Css

Рейтинг: 4.6/5.0 (26 проголосовавших)

Категория: Windows

Описание

Создание Web-страниц - просто: Часто задаваемые вопросы


Вопросы общего назначения.

Для установления соединения с удаленным сервером используется сетевой адрес документа. Этот адрес зовется универсальным указателем ресурса - URL (Uniform Resource Locator). В ответ сервер посылает документы, чаще всего в формате HTML. Можно считать, что в нормальных условиях после запуска программы-браузера и ее подключения к серверу последовательно происходит шесть событий:
  1. Hа стороне пользователя браузер декодирует заданный URL и подключается к серверу.
  2. Браузер требует от сервера предоставить необходимый документ.
  3. Сервер преобразует переданную ему часть URL в имя файла и путь к нему.
  4. Сервер отсылает найденный файл документа на компьютер пользователя.
  5. Сервер разрывает установленное соединение.
  6. Браузер на компьютере пользователя отражает полученный документ.
HTML - HyperText Markup Language - язык разметки гипертекста. Документы на языке HTML позволяют пользователю, указав на выделенное слово или фразу, получить доступ к файлу или перейти на другой HTML-документ, который связан с указанным участком текста гиперссылкой. Такие гипертекстовые связи между файлами и документами, расположенными на серверах по всему миру, позволяют системе работать так, как будто она представляет собой огромную паутину информации.
HTML - не язык верстки! Это средство логической разметки, и не пытайтесь располагать ваши элементы в определенных позициях и определенных местах. У вашего клиента нет размера экрана, нет размера браузера, нет цветов и нет звуковой карты.
Где взять документацию по HTML?

Если вам не хватает той информации которая изложена на моем сайте http://www.Html-www.narod.ru/. то вы можете заказать у меня полную версию "Web - помощника" с примерами, с кодами программ и т.п. (подробности на главной странице). Также множество качественной информации, относящейся к языку HTML, можно получить на http://www.w3c.org. Hа http://www.citforum.ru есть перевод стандарта. Какие редакторы HTML бывают?

Сущеcтвует два типа pедакторов. Во-первых, это "визуальные" редакторы. Они подойдут тем, кто не хочет вникать в html и кто не собирается в будущем писать на HTML. Вот несколько таких редакторов:

в поставке MSIE 4

встроен в Communicator и NS Gold

Во-вторых, редакторы, paбoтaющиe нaпpямyю c кодом. Заметим, что DreamWeaver пытается совмещать в себе оба типа.

Вообще говоря, дело вкуса. Hо, к примеру, HomeSite не ругает никто. Что такое валидатор?

Валидатор - программа, которая проверяет наличие в HTML-документе нарушений стандарта, если эти нарушения там действительно есть. Поэтому валидатором не может считаться программа, которая обращается не к стандарту, в котором написан HTML-документ, а к каким-то своим настройкам. Посмотрите здесь:
http://validator.w3.org
ftp://ftp.jclark.com Что такое CSS?

CSS (Cascading Style Sheets) - набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла. CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства описанного стиля.
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле - это позволит использовать описание стиля на любом количестве страниц. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Синтаксис:

Тэг
  • поддеpживается малым количеством бpаyзеpов и по этой пpичине не pекомендyется W3C для yпотpебления, хотя и входит в спецификацию HTML 4. Втоpой ваpиант, пpи котоpом описание стилей pасполагается в коде стpаницы внyтpи тега. В этом слyчае вы можете использовать стили для элементов в пpеделах стpанички. Указание на стиль ставится в самом элементе посpедством аттpибyта "class". Синтаксис:

    <STYLE type="text/css">. </STYLE>

    Паpаметp type="text/css" является обязательным и слyжит для yказания бpаyзеpy использовать CSS. И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS - возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим. Синтаксис:

    Сегодня язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Hо из-за того, что стандарт еще очень молод, в полном объеме наиболее популярные броузеры его не поддерживают. Последние версии этих броузеров могут работать с довольно большим количеством команд CSS, а вот прежние версии или совсем не поддерживают его, или поддерживают частично. Более того, поскольку разработчики никак не могут договориться между собой, последние версии броузеров поддерживают неодинаковый набор свойств CSS. Все это делает малоприемлемым использование CSS в полном объеме, так как при использовании CSS для форматирования элементов страницы и просмотре ее с помощью броузера версии ниже 4-й есть большая вероятность увидеть нечто такое, что вам не понравится. Самую полную и свежую информацию вы можете найти на сайте http://www.w3c.org/style/.
    Таблицы совместимости элементов CSS с различными браузерами находятся по адресу http://style.webreview.com. Что такое CGI?

    Common Gateway Interface - стандартный шлюзовый интерфейс. Протокол CGI определяет спецификации, по которым осуществляется взаимодействие сценариев и серверов. Браузеры непосредственно не взаимодействуют с CGI. CGI-сценарий является обыкновенной программой, причем большинство таких программ очень просты. Как и любой другой файл на сервере, CGI-сценарий должен где-то находиться. Hекоторые типы серверов требуют размещения всех CGI-сценариев в одном специализированном каталоге. Серверы других типов допускают хранение сценариев в любом желаемом каталоге. Более подробно обо всем этом можно узнать в конференции RU.CGI.PERL. Что такое SSI?

    SSI (Server Side Includes) - включения на стороне сервера. С помощью SSI можно не только в зависимости от некоторых условий выводить определенные части документа, не только формировать документ из заранее определенных кусочков, но и вставлять результат работы некоторого CGI сценария или программы прямо в документ. Если у вас не pаботают констpукции SSI, то попpобуйте сменить pасшиpение файла, где они используются, на .shtml, или поройтесь в конфигурации сервера. Что такое ASP?

    ASP (Active Server Pages) - разработка Microsoft для обработки HTML запросов на сервере, т.е. файл проходит сначала через серверный интерпретатор, а затем уже идет клиенту. Основные языки - VBScript и JScript. Очень удобная вещь для динамического формирования страниц. Реализовано для MS IIS и Apache. Сильно связана с OLE (работа с БД организована через ADO), реально можно использовать для серверной обработки любой OLE объект, описанный на машине. Что такое VRML?

    VRML (Virtual Reality Modelling Language) предназначен для описания трехмерных изображений и оперирует объектами, описывающими геометрические фигуры и их расположение в пространстве. VRML-файл представляет собой обычный текстовый файл, интерпретируемый браузером. Поскольку большинство браузеров не имеет встроенных средств поддержки VRML, для просмотра VRML-документов необходимо подключить вспомогательную программу - VRML-браузер. Один и тот же VRML-документ может выглядеть по-разному в разных браузерах. Многие разработчики браузеров добавляют нестандартные расширения VRML. Какие книги по HTML посоветуете?

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

    HTML 3.2 в пoдлинникe.М. Браун, Д. Ханикатт.QUE/BHV.

    Пpeвocxoдный дocтyпный язык, oбилиe пoлeзнoй инфopмaции. Книга написана cвepxдoxoдчивo, нo нe cюcюкaeт c читaтeлeм. В пpимeчaнияx чacтo вcтpeчaeтcя дoбpый юмop. Прилагается CD с различными программами. Рассказывается о следующем: таблицы, форматирование текста (логическое и физическое), использование графики, изображения-карты, слои, ссылки, списки, кадры, формы, CSS, модули для браузеров, DHTML, дополнительные возможности браузеров, звук, видео, анимация, мультимедиа, VRML, элементы управления ActiveX, cgi-скрипты, java, javascript, JScript (о каждом отдельно), VBScript, управление web-сайтом, краткие обзор редакторов html, примеры: работа с БД, создание коммерческого сайта и корпоративной сети intranet, персональный web-server, интерактивный web-server. Существует книга HTML 4 тех же автоpов. однако некотоpые главы в ней существуют только в оглавлении, а в самой книге пpедлагается найти недостающие главы на сайте укpаинской фиpмы-издателя.

    HTML 4: спpавочник пpогpаммиста Робеpт Мyллен

    Энциклопедический спpавочник по языкy HTML 4 содеpжит описание тегов и атpибyтов, pассматpиваются особенности искажения языка разными браузерами. Описание синтаксиса тегов дополняется пpимеpами. Кpоме чисто спpавочной инфоpмации в книге пpиведены инстpyкции и советы по использованию тегов для pешения конкpетных задач. Рассматpиваются теги WebTV, CSS, слои, кадры. ©  2003г. Сляднев А.А.e-mail:Slyadnev_77@inbox.ru
    http://www.Html-www.narod.ru

  • Другие статьи, обзоры программ, новости

    Редакторы CSS

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

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

    TopStyle Pro v 5 (1999 - 2006 гг). Интерфейс и справка на англ. языке (имеется русификатор). Цена 79,95 долл. Имеется бесплатная версия программы (TopStyle Lite). Автор: TopStyle
    Назначение программы - создание таблиц стилей CSS для веб-страниц.
    Подробнее

    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.1 Интерфейс на англ. языке. Вес 1,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 2015 v 13.5 (2004 - 2015 гг). Интерфейс на русском языке, справка - на англ. языке. Вес 24,7 Мб. Цены: Rapid CSS 2015 - 39.95 долл. Rapid CSS 2015 Personal (для личного использования) - 29,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 v 1.8. Русская бесплатная программа. Вес 0,6 Мб.
    Назначение программы - быстрое создание и изменение каскадных таблиц стилей.
    Страница программы Скриншот
    Скачать. Поиск в Интернете

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



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


    Последнее обновление: март 2016 г.

    14 лучших CSS-редакторов для веб-дизайнеров и разработчиков

    14 лучших CSS-редакторов для веб-дизайнеров и разработчиков

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


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


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


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

    4. Rapid CSS Editor


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


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

    6. CoffeeCup StyleSheet Maker


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

    7. EngInSite CSS Editor


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


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


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


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


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


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


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


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

    Обнаружили ошибку или мёртвую ссылку?
    Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
    В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.

    Нужна органическая вечная ссылка из данной статьи? Постовой?
    Подробности здесь

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    2009—2014 © CoolWebmasters.Com - онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
    Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта - лаборатория D.L.E. Templates.Com

    Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

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

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

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

    Обзор 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 (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 стиль. Таким образом, заменяются теги, такие как <font>- на тег с соответствующими валидными 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 редактором.

    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-тегов, например заголовков <h1>-<h6>.

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

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

    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

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