1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
---
title: Редактор стилей
slug: Tools/Style_Editor
tags:
- Stylesheets
- 'Web Development:Tools'
translation_of: Tools/Style_Editor
---
<div>{{ToolsSidebar}}</div>
<p>Редактор Стилей позволит вам:</p>
<ul>
<li><span id="result_box" lang="ru"><span class="hps">просматривать и</span> <span class="hps">редактировать все</span> <span class="hps">таблицы стилей</span><span>, находящиеся</span> на<span class="hps"> странице</span></span></li>
<li><span id="result_box" lang="ru"><span class="hps">создать новые</span> <span class="hps">таблицы стилей</span> <span class="hps">с нуля, и</span> <span class="hps">применять их</span> <span class="hps">к странице</span></span></li>
<li><span id="result_box" lang="ru"><span class="hps">импортировать существующие</span> <span class="hps">таблицы стилей</span> <span class="hps">и применять их</span> <span class="hps">к странице</span></span></li>
</ul>
<p>{{EmbedYouTube("7839qc55r7o")}}</p>
<p><span id="result_box" lang="ru"><span class="hps">Чтобы открыть</span> <span class="hps">редактор стилей</span> <span class="atn hps">выберите опцию "Редактор стилей</span><span>" из меню</span> <span class="atn hps">"Разработка</span><span>"</span> <span class="hps">(который является</span> <span class="hps">подменю</span> <span class="atn hps">в меню "</span><span>Инструменты"</span><span class="hps">)</span><span>. </span><a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">Инструменты</a> <span class="hps">появятся в</span> <span class="hps">нижней части окна</span> <span class="hps">браузера,</span> <span class="hps">с активной панелью редактора</span> <span class="hps">стилей</span><span>:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p><span id="result_box" lang="ru"><span>Редактор Стилей</span> <span class="hps">делится</span> <span class="hps">на три основные</span> <span class="hps">части:</span></span></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_style_sheet_pane"> the style sheet pane on the left</a></li>
<li><span lang="ru"><span class="hps"> </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_editor_pane">the editor on the right</a></li>
</ul>
<div class="geckoVersionNote">
<p>Начиная с Firefox 33 и далее, существует третий компонент Редактора Стилей:медиа боковая панель.</p>
</div>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar"> the media sidebar.</a></li>
</ul>
<h2 id="sect1"> </h2>
<h2 id="Панель_таблицы_стилей">Панель таблицы стилей</h2>
<p>Панель стилей слева, перечисляет все таблицы стилей в текущем документе. Вы можете быстро включать и выключать стили листа нажав на против него значок глаза. <span id="result_box" lang="ru"><span class="hps">Вы</span> <span class="hps">можете сохранить</span> <span class="hps">любые изменения</span><span>, внесенные в</span> <span class="hps">таблицу стилей</span> <span class="hps">на локальном компьютере</span><span>, нажав</span> <span class="hps">кнопку Сохранить</span> <span class="hps">в</span> <span class="hps">правом нижнем</span> <span class="hps">углу</span> возле <span class="alt-edited hps">каждого листа</span> <span class="hps">в</span> <span class="hps">списке.</span></span></p>
<h2 id="Панель_редактора"><span class="short_text" id="result_box" lang="ru"><span>Панель редактора</span></span></h2>
<p><span id="result_box" lang="ru"><span class="hps">Справа находится</span> <span class="hps">панель редактора</span><span>.</span> <span class="hps">Где</span> <span class="hps">вы можете видеть и редактировать исходный код выбранного листа</span> <span class="hps">стилей</span><span>. </span></span><span id="result_box" lang="ru"><span class="hps">Любые</span> <span class="hps">изменения, которые вы</span> <span class="hps">делаете,</span> <span class="hps">немедленно применяются к</span> <span class="hps">странице</span></span>. <span id="result_box" lang="ru"><span class="hps">Это позволяет легко </span><span class="hps">экспериментировать</span><span>, просматривать</span><span>, а также изменять</span> <span class="alt-edited hps">тестировать</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">После того как Вы</span><span class="hps"> удовлетворены</span> <span class="hps">вашими изменениями</span><span>, Вы можете</span> <span class="hps">сохранить копию</span> <span class="hps">локально</span><span>, нажав</span> <span class="hps">кнопку</span> <span class="hps">Сохранить</span> <span class="hps">в нижнем правом углу</span> <span class="hps">листа</span> <span class="hps">в</span> <span id="result_box" lang="ru"><span class="hps">панели</span></span> <span class="hps">таблица стилей</span><span class="hps">.</span></span></p>
<p><span id="result_box" lang="ru"><span>Редактор</span> <span class="hps">предоставляет номера</span> <span class="hps">строк</span> <span class="hps">и подсветку синтаксиса</span><span>, что обличает</span> <span class="hps">читать вам</span> <span class="hps">CSS.</span> <span class="hps">Он также поддерживает</span> номер <span class="hps">ряда</span> </span><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a>.</p>
<p><span id="result_box" lang="ru"><span>Редактор Стилей</span> <span class="hps">автоматически</span> <span class="hps">де</span><span class="atn">-</span><span>минимизирует</span> <span class="hps">таблицы стилей</span><span>, которые он обнаруживает</span><span>, не влияя на</span> <span class="hps">оригинал.</span> <span class="hps">Что делает его гораздо</span> <span class="hps">легче для работы</span> <span class="hps">на страницах, которые</span> <span class="hps">были оптимизированы.</span></span></p>
<p><span id="result_box" lang="ru"><span id="result_box" lang="ru"><span>Редактор Стилей</span></span> <span class="hps">поддерживает</span> <span class="hps">автозаполнение</span><span>.</span> <span class="hps">Просто начните</span> <span class="hps">печатать,</span> <span class="hps">и</span> <span class="hps">он будет предлагать</span> <span class="hps">вам перечень </span><span class="hps">предложений.</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Вы можете включить автозаполнение в <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p>
<h2 id="Боковая_панель_media">Боковая панель @media</h2>
<p><span id="result_box" lang="ru"><span class="hps">С</span> <span class="hps">Firefox</span> <span class="hps">33</span> <span class="hps">и далее,</span> <span class="hps">Редактор</span> <span class="hps">Стилей</span> <span class="hps">отображает</span> <span class="alt-edited hps">боковую панель</span> <span class="hps">на</span> <span class="hps">правой</span> <span class="hps">стороне</span><span>, где</span> <span class="hps">текущий лист</span> <span class="hps">содержит какие-либо</span></span> <a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> правила</a>. <span id="result_box" lang="ru"><span class="alt-edited">Боковая панель</span> <span class="hps">содержит список</span> <span class="hps">правил</span> <span class="hps">и</span> <span class="hps">ссылку на</span> <span class="alt-edited hps">строки</span> <span class="hps">таблицы</span><span>, где</span> <span class="hps">правило</span> <span class="hps">определено.</span> <span class="hps">Щелкните элемент</span><span>, чтобы перейти к</span> <span class="hps">этому правилу</span> <span class="hps">в листе</span><span>.</span></span>Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">Б<span id="result_box" lang="ru"><span class="alt-edited hps">оковая панель<code> медиа </code></span><span class="hps">особенно хорошо работает</span> <span class="hps">с </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> <span lang="ru"> <span class="hps">для создания и</span> <span class="hps">отладки</span> <span class="hps">мобильных</span> <span class="alt-edited hps">макетов</span></span>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8363/style-editor-media-sidebar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Создание_и_импортирование_таблицы_стилей"><span class="short_text" id="result_box" lang="ru"><span class="hps">Создание и импортирование</span> <span class="hps">таблицы стилей</span></span></h2>
<p><span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">создать новую</span> <span class="hps">таблицу стилей</span><span>, нажав на</span> <span class="hps">кнопку Создать</span> <span class="hps">на панели инструментов.</span> <span class="hps">После чего начать ввод</span> <span class="hps">CSS</span> <span class="hps">в отрывшемся</span> <span class="hps">редакторе и</span> <span class="hps">видеть, как</span> <span class="hps">новые стили</span> <span class="hps">в реальном времени применяются</span> <span class="hps">так же, как</span> <span class="hps">изменяются в</span> <span class="hps">других таблицах</span><span>.</span></span></p>
<p><span id="result_box" lang="ru"><span class="hps">Вы можете загрузить</span> <span class="hps">таблицу стилей</span> <span class="hps">с диска и</span> <span class="hps">применить его</span> <span class="hps">на страницу</span><span>, нажав</span> <span class="hps">на кнопку Импорт.</span></span></p>
<h2 id="Источник_карты_поддержки"><span class="short_text" id="result_box" lang="ru"><span class="hps">Источник</span> <span class="alt-edited hps">карты поддержки</span></span></h2>
<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
<p><span id="result_box" lang="ru"><span class="hps">Веб-разработчики</span> <span class="hps">часто создают</span> <span class="hps">CSS</span> <span class="hps">файлы, используя</span> <span class="hps">препроцессор</span> <span class="hps">как</span> </span><a href="http://sass-lang.com/">Sass</a>,<span lang="ru"><span> </span></span><a href="http://lesscss.org/">Less</a>,<span lang="ru"> <span class="alt-edited hps">или </span></span><a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor$edit#5">Stylus</a>. <span lang="ru"> <span class="hps">Эти</span> <span class="hps">инструменты создания</span> <span class="hps">CSS</span> <span class="alt-edited hps">файлов с</span> <span class="alt-edited hps">более богатым и</span> <span class="alt-edited hps">выразительным</span> <span class="alt-edited hps">синтаксисам.</span> <span class="alt-edited hps">Если это сделать</span><span>, будучи в состоянии</span> <span class="alt-edited hps">просматривать и редактировать</span> <span class="alt-edited hps">созданный</span> <span class="hps">CSS</span> <span class="hps">не так</span> <span class="alt-edited hps">полезен, потому что</span> <span class="hps">код, который вы</span> <span class="hps">поддерживать</span> <span class="hps">синтаксис</span> <span class="hps">препроцессора</span><span>, а не</span> <span class="alt-edited hps">генерирует</span> <span class="hps">CSS</span><span>.</span> <span class="alt-edited hps">Так вы</span> <span class="hps">должны были бы</span> <span class="hps">изменить</span> <span class="hps">сгенерированный</span> <span class="hps">CSS,</span> <span class="hps">затем вручную</span> <span class="hps">работать, как с</span><span class="hps"> первоисточником</span><span>.</span></span></p>
<p><span id="result_box" lang="ru"><span class="hps">Источник</span> <span class="hps">карты</span> имеет <span class="hps">инструменты для</span> <span class="hps">карты вернутся </span><span class="hps">из полученных</span> <span class="hps">CSS</span> <span class="hps">к первоначальному</span> <span class="hps">синтаксису</span><span>, так что они</span> <span class="hps">могут отображать</span><span>,</span> <span class="hps">и позволяют</span> <span class="hps">редактировать</span> <span class="hps">файлы в</span> <span class="hps">оригинальном</span> <span class="hps">синтаксисе.</span> <span class="hps">С</span> <span class="hps">Firefox</span> <span class="hps">29</span> <span class="hps">и далее,</span> <span class="hps">Редактор</span> <span class="hps">Стиль</span> <span class="hps">могу понять</span> <span class="hps">исходные карты</span> <span class="hps">CSS</span><span>.</span></span></p>
<p><span id="result_box" lang="ru"><span class="hps">Это означает, что</span> <span class="hps">если вы используете</span><span>, например,</span> <span class="hps">Sass</span><span>, то</span> <span class="hps">редактор</span> <span class="hps">Стиль</span> <span class="hps">покажу вам</span><span>,</span> <span class="hps">и вы сможете</span> <span class="hps">редактировать,</span> <span class="hps">Sass</span> <span class="hps">файлы</span><span>, а не</span> <span class="hps">CSS</span><span>, который генерируется</span> <span class="hps">из них:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Для этого</span><span>, чтобы работать,</span> <span class="hps">вы должны:</span></span></p>
<ul>
<li><span id="result_box" lang="ru"><span class="hps">использовать</span> <span class="hps">CSS</span> <span class="hps">препроцессора</span><span>, который понимает</span> </span> <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. <span lang="ru"> <span class="hps">В настоящее время</span> <span class="hps">это означает,</span> </span><a href="http://sass-lang.com/">Sass</a><span lang="ru"> <span class="hps">3.3.0</span> <span class="hps">или</span> <span class="hps">выше, или</span> </span><a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less</a>.<span lang="ru"><span class="hps">.</span> <span class="hps">Другие</span> <span class="hps">препроцессоры</span> <span class="hps">активно</span> <span class="hps">работаем над добавлением</span> <span class="hps">поддержки</span> <span class="hps">или</span> <span class="hps">его рассмотрения.</span></span></li>
<li><span id="result_box" lang="ru"><span class="hps">на самом деле</span> <span class="hps">поручить</span> <span class="hps">препроцессор</span> <span class="hps">для генерации</span> <span class="hps">исходного</span> <span class="hps">карту</span><span>,</span> <span class="hps">например,</span> <span class="hps">пропусканием</span> <span class="hps">--sourcemap</span> <span class="hps">аргумент</span></span> Sass <span id="result_box" lang="ru"><span class="hps">инструмента</span></span> <span id="result_box" lang="ru"><span class="hps">командной строки.</span></span></li>
</ul>
<h3 id="Просмотр_первоисточников"><span id="result_box" lang="ru"><span class="hps">Просмотр</span> <span class="alt-edited hps">первоисточников</span></span></h3>
<p><span id="result_box" lang="ru"><span class="hps">Теперь, если</span> <span class="atn hps">вы выберете "</span><span>Показать</span> <span class="hps">оригинальные</span> <span class="hps">источники"</span> <span class="hps">в </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>,<span lang="ru"><span> ссылки</span> <span class="hps">рядом с правилом</span> <span class="hps">CSS</span> <span class="hps">в </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> <span lang="ru"> <span class="alt-edited hps">будет ссылаться</span> <span class="hps">к первоисточникам</span> <span class="hps">в</span> <span class="hps">редакторе стилей</span></span></p>
<h3 id="Редактирование_первоисточников"><span class="short_text" id="result_box" lang="ru"><span class="hps">Редактирование</span> <span class="alt-edited hps">первоисточников</span></span></h3>
<p><span id="result_box" lang="ru"><span class="hps">Вы также можете</span> <span class="hps">редактировать перво</span><span class="hps">источники в</span> <span class="hps">редакторе стилей</span> <span class="hps">и видеть результаты</span> <span class="hps">сразу </span><span class="hps">на странице</span><span>.</span> <span class="hps">Чтобы это сделать есть</span><span class="hps"> два</span> <span class="hps">варианта</span><span>.</span></span></p>
<p><span id="result_box" lang="ru"><span class="hps">Во-первых,</span> <span class="hps">настроить</span> <span class="hps">препроцессор</span> <span class="hps">так</span> <span class="alt-edited hps">следит за</span> <span class="alt-edited hps">оригиналом</span> <span class="hps">и автоматически</span> <span class="hps">восстанавливает</span> <span class="hps">CSS</span> <span class="alt-edited hps">при изменении исходного кода</span><span>.</span> <span class="hps">С</span> <span class="hps">Sass</span> <span class="hps">вы можете сделать</span> <span class="hps">это, просто</span> <span class="hps">передавая</span> в этой опции</span>:</p>
<pre>sass index.scss:index.css --sourcemap --watch</pre>
<p><span id="result_box" lang="ru"><span class="hps">Затем сохраните</span> <span class="hps">оригинал</span> <span class="hps">в</span> <span class="hps">редакторе стилей</span><span>, нажав на</span> <span class="hps">кнопку "Сохранить"</span> <span class="hps">рядом с файлом</span><span>,</span> <span class="hps">и сохранение</span> <span class="hps">его на</span> <span class="hps">исходный файл.</span></span></p>
<p><span id="result_box" lang="ru"><span class="hps">Теперь, когда</span> <span class="hps">вы вносите изменения</span> <span class="hps">в исходный</span> <span class="hps">файл</span> <span class="hps">в редакторе</span> <span class="hps">стилей</span> <span class="hps">CSS</span> <span class="hps">регенерируется</span><span>, и вы можете</span> <span class="hps">видеть изменения</span> <span class="hps">сразу.</span></span></p>
<h2 id="Сочетания_клавиш"><span class="short_text" id="result_box" lang="ru"><span class="hps">Сочетания клавиш</span></span></h2>
<h3 id="Редактор_исходного_сочетания"><span class="short_text" id="result_box" lang="ru"><span class="hps">Редактор исходного</span> <span class="hps">сочетания</span></span></h3>
<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
|
