Редактирование таблиц стилей в TopStyle Lite <p > В предыдущем подразделе было сказано, что в зависимости от контекста выполняемой операции приложение TopStyle Lite может быть открыто в одном из двух форматов: <ul> <li> расширенном — для редактирования CSS-файла;</li> <li> сокращенном — для создания или редактирования параметров атрибута STYLE конкретного элемента страницы.</li> </ul> <p > Кроме того, TopStyle Lite может быть открыт из окна HomeSite для создания нового CSS-файла (в этом случае также используется расширенный формат). Для этого достаточно щелкнуть на кнопке Style Editor, расположенную на панели инструментов главного окна HomeSite (рис. 4.43). <p><div id="headermainwrap"></div><br> <style> .u { width:100%; max-width: 1070px; background-color: white; } </style> <font style="font-size:10pt; font-family:Arial"> <center> <div class="u">  <script>window.yaContextCb=window.yaContextCb||[]</script> <script src="https://yandex.ru/ads/system/context.js" async></script>  <div id="yandex_rtb_R-A-428995-1"></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-428995-1", "renderTo": "yandex_rtb_R-A-428995-1" }) }) </script> <hr size=1> <script type="text/javascript">  </script>  <hr size=1> </div> </center> <div id="mainwrap"> <div id="mainwrapleft"> <iframe id="miFrame" src="../8/8.htm" frameborder=0 marginwidth=0 marginheight=0></iframe> </div></div> <div id="mainwrapright"> <div id="content"> <h1>Редактирование таблиц стилей в TopStyle Lite <p > В предыдущем подразделе было сказано, что в зависимости от контекста выполняемой операции приложение TopStyle Lite может быть открыто в одном из двух форматов: <ul> <li> расширенном — для редактирования CSS-файла;</li> <li> сокращенном — для создания или редактирования параметров атрибута STYLE конкретного элемента страницы.</li> </ul> <br>  <div id="yandex_rtb_R-A-428995-3"></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-428995-3", "renderTo": "yandex_rtb_R-A-428995-3" }) }) </script> <br> <p > Кроме того, TopStyle Lite может быть открыт из окна HomeSite для создания нового CSS-файла (в этом случае также используется расширенный формат). Для этого достаточно щелкнуть на кнопке Style Editor, расположенную на панели инструментов главного окна HomeSite (рис. 4.43). <p><img src="43.gif"><p> Рис. 4.43. Кнопка Style Editor позволяет открыть TopStyle Lite для создания нового CSS-файла <p > При вызове TopStyle Lite для редактирования CSS-файла окно приложения выглядит, как показано на рис, 4.44. <p><img src="44.gif"><p> Рис. 4.44. Расширенный формат окна TopStyle Lite <p > В расширенном формате окно содержит следующие основные элементь: управления: <ul> <li> строку меню; разделы меню являются достаточно стандартными для всех Windows-приложений; основные команды из всех разделов мснк вынесены на панель инструментов в виде соответствующих кнопок;</li> <li> панель инструментов; вынесенные на нее кнопки имеют следующее предназначение: <ul> <li>New File (Создать файл) — создание нового CSS-файла; поскольку TopStyle Lite не использует многодокументный интерфейс, то перел созданием нового файла следует сохранить редактируемый (правда. TopStyle Lite об этом напомнит);</li> <li> Open File (Открыть файл) — загрузка существующего CSS-файла;</li> <li> Save File (Сохранить файл) — запись CSS-файла на диск в указанный каталог;</li> <li> New Selector (Создать селектор) — создание нового стиля; в данном случае разработчики TopStyle Lite под селектором понимают имя стиля; подробнее процедура создания стиля будет описана ниже;</li> <li> Word wrap (Перенос строки) — включение режима форматирования строк по ширине окна;</li> <li> Style Inspector (Инспектор стилей) — открытие подокна Style Inspector, которое содержит инструменты редактирования и просмотра параметров стилей; подокно расположено в правой части окна TopStyle Lite;</li> <li> Preview (Предварительный просмотр) — открытие подокна Preview, которое обеспечивает просмотр результата применения стилей к элементам страницы; в качестве интерпретатора стилей используется броузер, который на вашем компьютере имеет статус используемого по умолчанию;</li> <li> Order TopStyle Pro (Порядок получения TopStyle Pro) — открытие в онлайновом режиме Web-страницы с информацией о том, как получить профессиональную версию TopStyle;</li> <li> Help Content (Содержание справки) — вызов справочной системы.</li> </ul> </li> </ul> <p> Теперь рассмотрим подробнее интерфейс основного и дополнительных окон приложения.</h1> <p> Содержимое CSS-файла отображается в основном окне — окне редактирования. При этом для повышения наглядности используется цветовая подсветка элементов таблицы стиля. Технология редактирования файла такая же, как и в любом текстовом редакторе: вы можете вводить информацию с клавиатуры, удалять фрагменты текста, использовать буфер обмена и т. д. Кроме того, в TopStyle Lite имеется возможность отмены внесенных изменений (функция Undo).</p> <p> В окне просмотра отображается текст, оформленный в соответствии с имеющимися в файле стилями. При этом используется следующее правило:</p> <ul> <li> для представления стиля класса выводится строка Class <имя стиля>; </li> <li> для представления стиля конкретного элемента страницы выводится строка ID <имя стиля>; </li> <li> для представления стиля переопределенного тега выводится строка Element <имя тега>.</li> </ul> <p> Например, в окне просмотра, приведенном на рис. 4.44, показаны три стиля (два стиля класса и один стиль элемента), с помощью которых была сформирована страница, приводившаяся на<center><a href="Index0.htm"><b>Содержание раздела</b></a> <br><br> <hr size=1 color=green> <br> <center>  <div id="yandex_rtb_R-A-428995-2"></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-428995-2", "renderTo": "yandex_rtb_R-A-428995-2" }) }) </script> <br> <script async type="text/javascript" src="//bakteso.ru/0pq1d/zfplk/0q5ph/lfks/s0s39/dhezpl/qzpe/257x1"></script> <a href="https://www.liveinternet.ru/click;Forex" target="_blank"><img id="licnt545C" width="88" height="31" style="border:0" title="LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt=""/></a><script>(function(d,s){d.getElementById("licnt545C").src= "https://counter.yadro.ru/hit;Forex?t14.5;r"+escape(d.referrer)+ ((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+ (s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+ ";h"+escape(d.title.substring(0,150))+";"+Math.random()}) (document,screen)</script> <br> <hr size=1 color=blue> </center> </center>  <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-428995-5", "type": "fullscreen", "platform": "desktop" }) }) </script> </center> </body> </html>