Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/asciidoc-features / . / src / content / kb / 73 / webclient / html5-editing-css_ru.html
blob: 71c126ff89736ba6fdaaba9b1eee0f5d532dd2c3 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
<title>Работа с таблицами стилей CSS в приложении HTML5 - учебный курс по NetBeans</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="A tutorial that demonstrates how the IDE provides tools that can help you work with CSS rules to modify the layout of
an application.">
<meta name="keywords" content="NetBeans, IDE, integrated development environment, jQuery, CSS, HTML5">
</head>
<body>
<!--
Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved.
-->
<h1>Работа с таблицами стилей CSS в приложении HTML5</h1>
<p>В IDE NetBeans 7.3 представлен новый тип проектов, который можно использовать для разработки приложений HTML5. Приложения HTML5 обычно сочетают HTML, CSS и JavaScript для создания приложений, которые запускаются в браузерах и которые отображаются на различных устройствах, включая смартфоны, планшеты и ноутбуки. В этом документе описывается, как IDE предоставляет инструменты, которые можно использовать для работы с правилами CSS для изменения компоновки приложения.</p>
<p>Расширение NetBeans Connector для браузера Chrome позволяет просматривать приложения по мере их отображения на различных устройствах. Расширение позволяет браузеру Chrome и IDE взаимодействовать друг с другом. Функция 'Проверка' в режиме NetBeans может позволить найти элементы в исходном коде, выбрав их в браузере. После выбора элемента в браузере можно использовать IDE для просмотра правил и свойств CSS, которые применяются к этому элементу.
</p>
<p>Подробнее об установке расширения NetBeans Connector для браузера Chrome см. в учебном курсе <a href="html5-gettingstarted.html">Начало работы с приложениями HTML5</a>.</p>
<p class="tips">Для просмотра демонстрационного ролика этого учебного курса см. раздел <a href="../../docs/web/html5-css-screencast.html">Видеоролик по работе со страницами стилей CSS в приложениях HTML5</a>.</p>
<h3>Содержание</h3>
<img alt="Содержимое на этой странице применимо к IDE NetBeans 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="Содержимое этой страницы применимо к IDE NetBeans 7.3">
<ul class="toc">
<li><a href="#create">Создание приложения HTML5 NetBeans</a></li>
<li><a href="#viewing">Просмотр приложений на разных устройствах</a></li>
<li><a href="#layout">Изменение компоновки</a>
<ul>
<li><a href="#newstylesheet">Создать таблицу стилей носителей</a>
<li><a href="#addrules">Добавить правила CSS</a>
</ul>
</li>
<li><a href="#summary">Заключение</a></li>
<li><a href="#seealso">См. также</a></li>
</ul>
<h4>Для выполнения этого учебного курса потребуются следующие материалы.</h4>
<table id="requiredSoftware">
<tbody>
<tr>
<th class="tblheader" scope="col">Программное обеспечение или ресурс</th>
<th class="tblheader" scope="col">Требуемая версия</th>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">IDE NetBeans, Java</a></td>
<td class="tbltd1">7.3</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Комплект для разработчика на языке Java (JDK)</a></td>
<td class="tbltd1">Версия 6 или 7</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.google.com/chrome">Браузер Chrome</a></td>
<td class="tbltd1">--</td>
</tr>
<tr>
<td class="tbltd1"><a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon">Расширение NetBeans Connector для Chrome</a></td>
<td class="tbltd1">1.0.0</td>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate.zip</a></td>
<td class="tbltd1">--</td>
</tr>
</tbody>
</table>
<p><strong class="notes">Примечания.</strong></p>
<ul>
<li><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate.zip</a> представляет собой шаблон сайта, используемый при создании проекта.</li>
<li>При сравнении проекта с работающим решением можно загрузить <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoCssSiteTemplate.zip"> шаблон сайта</a> завершенного проекта.</li>
<li>Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript.</li>
</ul>
<!-- ++++++++++++++++ Creating the Application ++++++++++++++++ -->
<a name="create"></a>
<h2>Создание приложения HTML5</h2>
<p>В данном учебном курсе рассматривается использование шаблона сайта для создания проекта HTML5. Шаблон сайта, используемый в этом учебном курсе, является тем же шаблоном, который был сохранен как шаблон сайта в учебном курсе <a href="html5-gettingstarted.html">Начало работы с приложениями HTML5</a>. Если вы выполнили действия, описанные в учебном руководстве 'Начало работы', то можно использовать шаблон сайта, сохраненный в предыдущем разделе. В качестве альтернативы можно загрузить шаблон сайта HTML5DemoSiteTemplate.zip.</p>
<p>Для создания приложения на основе шаблона сайта выполните следующие шаги.</p>
<ol>
<li>Загрузите шаблон сайта HTML5 (<a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate</a>)</li>
<li>Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.</li>
<li>Выберите категорию <strong>HTML/JavaScript</strong>, а затем выберите <strong>Приложение HTML5</strong>. Нажмите кнопку 'Далее'.</li>
<li>Введите <strong>HTML5DemoCss</strong> в качестве имени проекта и укажите местоположение. Нажмите кнопку 'Далее'.</li>
<li>Выберите пункт <strong>Выбрать шаблон</strong> и щелкните 'Обзор' для поиска шаблона сайта (<tt>HTML5DemoSiteTemplate.zip</tt>). Нажмите кнопку 'Готово'. <br> <img alt="снимок экрана мастера создания приложений HTML5" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-newproject.png" title="Укажите шаблон сайта в мастере создания приложений HTML5">
</li>
</ol>
<p>После нажатия кнопки 'Готово' среда IDE создаст проект и откроет файл <tt>index.html</tt> в редакторе. В окне 'Проекты' отображается, что проект содержит <tt>index.html</tt>, таблицу стилей CSS, некоторые библиотеки JavaScript и определенные изображения. Окна 'Правила CSS' и 'Навигатор' также открывается в IDE.</p>
<!-- ++++++++++++++++ Viewing the Application ++++++++++++++++ -->
<a name="viewing"></a>
<h2>Просмотр приложений на разных устройствах</h2>
<p>В этом учебном курсе будет выполняться запуск приложений в браузере Chrome с установленным расширением NetBeans Connector. Когда расширение будет установлено, пользователи смогут использовать меню NetBeans в браузере, чтобы легко изменить размер окна браузера для просмотра приложения так, как оно будет отображаться на некоторых распространенных устройствах.
</p>
<p class="notes"><strong>Примечания.</strong> В этом учебном курсе мы рекомендуем использовать браузер Chrome и установить расширение NetBeans для Chrome. Подробнее об устаноке расширения NetBeans Connector см. <a href="html5-gettingstarted.html">Начало работы с приложениями HTML5</a>.</p>
<p>Чтобы запустить приложение в браузере Chrome, выполните следующие шаги.</p>
<ol>
<li>Убедитесь, что Chrome с интеграцией NetBeans выбран в раскрывающемся списке на панели инструментов.
</li>
<li>Нажмите кнопку 'Выполнить' на панели инструментов, чтобы запустить проект в браузере Chrome.
<p>В браузере отобразится простое расширяемое меню.</p>
<p>Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.</p>
<p class="alert">При закрытии желтой полосы или щелчка 'Отмена' разрывается соединение между IDE и браузером. В случае разрыва соединения необходимо запустить приложение HTML5 из IDE.</p>
<p>Также следует отметить, что значок NetBeans отображается в местоположении адреса URL поля браузера. Вы можете щелкнуть значок, чтобы открыть меню, которое предоставляет различные варианты для изменения размера изображения в браузере, и для включения режима проверки в режиме NetBeans.</p>
</li>
<li>Щелкните значок 'Открыть действие NetBeans' в адресной строке браузера URL, чтобы открыть меню NetBeans и выбрать в меню 'Планшет - портрет'.
<p>Размер окна изменится до размеров браузера планшета в режиме портрета. Меню можно растянуть, чтобы заполнить правую сторону, после чего меню будет видно полностью.</p>
<img alt="снимок экрана браузера в представлении планшетного портрета" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-tabletbrowser1.png" title="Размер отображения планшетного портрета в браузере">
<p>Если выбрать одно из заданных по умолчанию устройств в меню, окно браузера изменится до размеров устройства. Это позволит увидеть, как приложение будет выглядеть на выбранном устройстве. Приложения HTML5 обычно реагируют на размер экрана устройства, на котором они просматриваются. Можно использовать правила JavaScript и CSS, которые реагируют на размер экрана, а также изменять способ отображения приложений так, чтобы макет был оптимизирован для устройства. </p></li>
<li>Щелкните значок NetBeans еще раз и выберите 'Смартфон - пейзаж' в меню NetBeans. <br> <img alt="снимок экрана меню NetBeans в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-tabletbrowser2.png" title="Выберите 'Смартфон - пейзаж' в меню NetBeans в браузере">
<p>Размер окна изменяется до размера смартфона в горизонтальной ориентации, и пользователь сможет увидеть, что нижняя часть меню без прокрутки не видна.</p>
<img alt="снимок окна браузера, размер которого изменяется на 'Смартфон - пейзаж'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser1.png" title="Размер окна браузера изменяется на 'Смартфон - пейзаж'"></li>
</ol>
<p>В следующем разделе пользователи смогут изменить таблицу стилей, что позволит просматривать все меню без прокрутки на смартфоне в горизонтальной ориентации.</p>
<!-- ++++++++++++++++ Modifying the Application Layout ++++++++++++++++ -->
<a name="layout"></a>
<h2>Изменение макета</h2>
<p>У пользователей должны быть возможности внесения определенных незначительных изменений в элементы страницы без применения функции прокрутки. Эти изменения должны применяться только тогда, когда размер браузера равен размеру смартфона или меньше. При горизонтальной ориентации окно браузера смартфона составляет 480 пикселей в ширину и 320 пикселей в высоту.</p>
<div class="indent">
<!-- ++++++++++++++++ Media Style Sheet ++++++++++++++++ -->
<a name="newstylesheet"></a>
<h3>Создать таблицу стилей носителей</h3>
<p>В этом упражнении будет создана новая таблица стилей и добавлено правило носителей для устройств с дисплеями, аналогичными смартфонам. После этого будут добавлены некоторые правила CSS к правилу носителей.</p>
<ol>
<li>Щелкните правой кнопкой мыши узел папки <tt>css</tt> в окне 'Проекты' и выберите 'Создать' > 'Таблица каскадных таблиц' во всплывающем меню.</li>
<li>Введите <strong>mycss</strong> в качестве имени файла. Нажмите кнопку 'Готово'.
<p>После нажатия кнопки 'Готово' таблица новых стилей открывается в редакторе.</p></li>
<li>Добавьте следующее правило носителей к таблице стилей.
<pre class="examplecode">/*My rule for smartphone*/
@media (max-width: 480px) {
}</pre>
<p>Любые правила CSS, которые пользователи добавляют в скобках для этого правила, будут применяться только в том случае, когда размер окна браузера составляет 480 пикселей в ширину или меньше.</p>
<p class="tips">Создание шаблонов кода для фрагментов кода, которые можно использовать часто. Можно создавать шаблоны кода CSS на вкладке 'Шаблоны кода' в категории 'Редактор' окна 'Параметры'.</p>
</li>
<li>Сохраните изменения.</li>
<li>Откройте <tt>index.html</tt> в редакторе.</li>
<li>Добавьте следующую ссылку на таблицу стилей между тегами <tt>&lt;head></tt> в <tt>index.html</tt>. Сохраните изменения.
<pre class="examplecode">&lt;link type="text/css" rel="stylesheet" href="css/mycss.css"&gt;</pre>
<p class="tips">Можно использовать функцию автозавершения кода в редакторе, чтобы добавлять ссылку на таблицу стилей.</p>
</li>
</ol>
<!-- ++++++++++++++++ Add CSS Rules ++++++++++++++++ -->
<a name="addrules"></a>
<h3>Добавление правил CSS</h3>
<ol>
<li>В браузере Chrome щелкните значок NetBeans и выберите в меню 'Проверить в режимеNetBeans'.</li>
<li>Щелкните изображение в браузере.
<p>Элемент подсвечивается, когда он выбран в режиме 'Проверка'. На этом снимке можно увидеть, что изображение подсвечивается синим цветом.</p>
<img alt="снимок экрана изображения, выбранного в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-selectimage.png" title="Изображение выбрано в браузере Chrome">
<p>В IDE можно увидеть, что правила и свойства CSS, которые применяются к <tt>img</tt>, перечислены в окне 'Стили CSS'. Вкладка 'Выбор' в окне 'Стили CSS' имеет три панели, которые содержат подробные сведения о выбранном элементе.</p>
<img alt="снимок экрана окна 'Стили CSS', где выбрано изображение" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow1.png" style="float:left;" title="Окно 'Стили CSS', где выбрано изображение">
<h4>Верхняя панель</h4>
<p>
В верхней панели 'Свойства' можно увидеть, что шесть пар свойство-значение применяются к элементу <tt>img</tt>. Три пары (<tt>border</tt>, <tt>float</tt> и <tt>margin</tt>) применяются с помощью правила CSS для элемента <tt>img</tt>. Остальные три пары применяется потому, что элемент <tt>img</tt> наследует свойства класса средств выбора, которые применяются к объектам, содержащим элемент<tt>img</tt>. Пользователи могут четко видеть структуру DOM в окне 'Навигатор'. Свойство <tt>border</tt> в настоящее время выбрано на панели 'Свойства' в окне 'Стили CSS'.
</p>
<h4>Средняя панель</h4>
<p>На средней панели 'Примененные стили' можно увидеть, что свойство <tt>border</tt> и значение указано в правиле CSS, которое определяет элемент <tt>img</tt>. Правило находится на строке 12 в файле <tt>basecss.css</tt>. Можно нажать местоположение на панели, чтобы открыть таблицу стилей в редакторе.</p>
<h4>Нижняя панель</h4>
<p>В нижней панели отображаются все свойства, которые определены в правиле CSS для правила, выбранного в средней панели. В этом случае видно, что правило для <tt>img</tt> определяет свойства <tt>border</tt>, <tt>float</tt> и <tt>margin-right</tt>.</p>
<br clear="all">
</li>
<li>Нажмите кнопку 'Изменить правила CSS' (<img alt="Кнопка 'Изменить правила CSS'" src="../../../images_www/articles/73/web/html5-gettingstarted/newcssrule.png" title="Кнопка 'Изменить правила CSS'">) на панели 'Примененные стили' окна 'Стили CSS', чтобы открыть диалоговое окно 'Изменить правила CSS'.</li>
<li>Выберите элемент в качестве типа средства выбора и введите <strong>img</strong> в качестве средства выбора.</li>
<li>Выберите <tt>css/mycss.css</tt> в качестве таблицы стилей и <strong>(макс-шир:480пкс)</strong> как At-Rule. Нажмите кнопку 'ОК'.<br> <img alt="снимок экрана диалогового окна 'Изменить правила CSS'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-editcssrules.png" title="Диалоговое окно 'Изменение правил CSS'">
<p>При нажатии кнопки ОК в IDE создается правило CSS для <tt>img</tt> в таблице стилей <tt>css/mycss.css</tt> между скобками правила носителей. Новое правило сейчас указано на панели 'Примененные стили'. Можно видеть, что имеется два правила CSS для <tt>img</tt>. Одно из правил находится в <tt>mycss.css</tt>, а другое находится в <tt>basecss.css</tt>.</p></li>
<li>Выберите новое правило <tt>img</tt> (определено в <tt>mycss.css</tt>) на панели 'Примененные стили' в окне 'Стили CSS'. <br> <img alt="снимок экрана стилей для выбранного элемента в окне 'Стили CSS'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow2.png" title="Стили для выбранного элемента в окне 'Стили CSS'">
<p>В нижней панели окна видно, что это правило не имеет свойств.</p>
</li>
<li>Нажмите кнопку 'Добавить свойство' в нижней панели окна 'Стили CSS', чтобы открыть диалоговое окно 'Добавить свойство'.</li>
<li>Введите <strong>width</strong> в поле фильтра в верхней части диалогового окна, а затем введите <strong>90px</strong> в качестве значения для свойства <tt>width</tt>. Нажмите кнопку ОК. <br> <img alt="снимок экрана диалогового окна 'Добавить свойство'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-addproperty.png" title="Диалоговое окно 'Добавить свойство'">
<p>После щелчка OK изображение в браузере автоматически изменяется до 90 пикселей в ширину. IDE добавляет свойство к правилу CSS в таблице стилей <tt>mycss.css</tt>. В редакторе таблиц стилей теперь должно содержаться следующее правило.</p>
<pre class="examplecode">/*My rule for smartphone*/
@media (max-width: 480px) {
img {
width: 90px;
}
}</pre>
<p>Некоторые дополнительные изменения должны быть внесены в таблицу стилей, потому что меню по-прежнему не помещается в окно. </p>
</li>
<li>Выберите элемент неупорядоченного списка (<tt>&lt;ul></tt>) в окне браузера.<br> <img alt="снимок экрана списка элементов, выбранных в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser2.png" title="Выводит список элементов, выбранных в браузере">
<p>После выбора элемента видно, что он <tt>&lt;ul></tt> выбран в окне 'Навигатор', а также видны стили, которые применены к этому элементу в окне 'Стили CSS'.</p>
<img alt="снимок окна 'Навигатор'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-navigatorwindow.png" title="Выводит список элементов, выбранных в окне 'Навигатор'">
<p>Если выбрать <tt>font-family</tt> в окне 'Стили CSS', то видно, что свойство и значение <tt>font-family</tt> определены в средстве выбора классов <tt>.ui-widget</tt>.</p>
</li>
<li>Щелкните файл <tt>index.html</tt> в редакторе, а затем перейдите на вкладку 'Документ' в окне 'Стили CSS'.</li>
<li>Разверните узел <tt>css/mycss.css</tt> в окне 'Стили CSS'.<br> <img alt="снимок экрана вкладки 'Документ' окна 'Стили CSS'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow3.png" title="Таблица стилей, выбранная на вкладке 'Документ' окна 'Стили CSS'">
<p>В таблице стилей <tt>mycss.css</tt> в настоящее время имеется заданное по умолчанию правило <tt>root</tt> и правило для <tt>img</tt>, созданного ранее.</p>
</li>
<li>Нажмите кнопку 'Изменить правила CSS' (<img alt="Кнопка 'Изменить правила CSS'" src="../../../images_www/articles/73/web/html5-gettingstarted/newcssrule.png" title="Кнопка 'Изменить правила CSS'">) в окне 'Стили CSS', чтобы открыть диалоговое окно 'Изменить правила CSS'.</li>
<li>Выберите 'Класс' как 'Тип средства выбора' и введите <strong>ui-widget</strong> как 'Средство выбора'.</li>
<li>Выберите <strong><tt>css/mycss.css</tt></strong> как таблицу стилей и <strong>(макс-шир:480пкс)</strong> как At-Rule.</li>
<li><strong>Отменить выбор</strong> Применить изменения к элементу. Нажмите кнопку 'ОК'.<br> <img alt="снимок экрана диалогового окна 'Изменить правила CSS'" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-editcssrules2.png" title="Создайте средство выбора класса в диалоговом окне 'Изменить правила CSS'.">
<p>После щелчка OK в IDE добавляется новое правило к таблице стилей <tt>mycss.css</tt> и открывается файл в редакторе. Если файл не открывается в редакторе, вы можете дважды щелкнуть правило <tt>ui-widget</tt> в узле <tt>css/mycss.css</tt> окна таблицы стилей, чтобы открыть таблицу стилей. Курсор помещается в строку, содержащую правило в таблице стилей.</p></li>
<li>Добавьте следующее свойство и значение (выделено полужирным шрифтом) к правилу для <tt>ui-widget</tt>.
<pre class="examplecode">.ui-widget {
<strong>font-size: 0.9em;</strong>
}</pre>
<p>Когда вы изменяете значение в таблице стилей, страница автоматически обновляется в окне браузера.</p>
<p class="tips">Можно ввести свойство и значение в редакторе и использовать функцию завершения кода для решения проблемы. В качестве альтернативы можно выбрать правило <tt>.ui-widget</tt> в верхней панели и щелкнуть кнопку 'Добавить свойство' в нижней панели, чтобы открыть диалоговое окно 'Добавить свойство'.</p>
<img alt="снимок экрана автозавершения кода CSS в редакторе" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-csseditor1.png" title="Автозавершение кода CSS в редакторе">
<p>После добавления правила видно, что меню теперь помещается на странице.</p>
<img alt="снимок экрана страницы в браузере после применения правил CSS" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser3.png" title="Страница, просматриваемая в браузере, с новыми примененными правилами CSS">
</li>
<li>Щелкните значок NetBeans в браузере и выберите в меню 'Планшет- портрет'.
<p>После изменения размера окна стало очевидно, что изменения таблицы стилей не повлияли на отображаемое изображение, если ширина экрана была больше 480 пикселей.</p></li>
</ol>
</div>
<h2 id="summary">Заключение</h2>
<p>В этом учебном курсе описывается, как добавлять и изменять правила CSS приложения HTML5 для улучшения отображения приложения на устройстве с меньшим размером экрана. Вы просмотрели приложения в браузере, размер которого был изменен до размера обычного смартфона. Вы использовали 'Проверка' в режиме NetBeans в браузере Chrome для поиска правил стилей, а затем изменили правила для оптимизации макета в соответствии с меньшим размером экрана.</p>
<div class="feedback-box">
<a href="/about/contact_form.html?to=3&amp;subject=Feedback:%20Working%20With%20CSS%20Style%20Sheets%20in%20an%20HTML5%20Application">Отправить отзыв по этому учебному курсу</a>
</div>
<br style="clear:both;">
<br>
<h2 id="seealso">См. также</h2>
<p>Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте <a href="https://netbeans.org/">www.netbeans.org</a>:</p>
<ul>
<li><a href="html5-gettingstarted.html">Начало работы с приложениями HTML5</a>. Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5.</li>
<li><a href="html5-js-support.html">Отладка и тестирование JavaScript в приложениях HTML5</a>. Документ, который демонстрирует, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.</li>
<li><a href="../ide/javascript-editor_ru.html">Внесение изменений в код JavaScript</a>. В документе описаны основные возможности изменения кода JavaScript, предоставляемые в среде IDE.</li>
</ul>
<p>Дополнительные сведения о jQuery доступны в официальной документации:</p>
<ul>
<li>Официальная домашняя страница: <a href="http://jquery.com">http://jquery.com</a></li>
<li>Домашняя страница UI: <a href="http://jqueryui.com/">http://jqueryui.com/</a></li>
<li>Учебные курсы: <a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a></li>
<li>Главная страница документации: <a href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</a></li>
<li>Демонстрации интерфейса пользователя и документация: <a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li>
</ul>
</body>
</html>