diff options
Diffstat (limited to 'files/ru/conflicting/learn/css/first_steps')
5 files changed, 585 insertions, 0 deletions
diff --git a/files/ru/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/conflicting/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..5f825e836d --- /dev/null +++ b/files/ru/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,167 @@ +--- +title: Чистый СSS код +slug: conflicting/Learn/CSS/First_steps/How_CSS_is_structured +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +original_slug: Web/Guide/CSS/Getting_started/Readable_CSS +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">Это 6-я статья руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS для начинающих</a>; здесь </span>обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.</p> + +<h2 class="clearLeft" id="Информация_Чистый_код_CSS">Информация: Чистый код CSS</h2> + +<p>Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.</p> + +<h3 id="Пустое_пространство">Пустое пространство</h3> + +<p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p> + +<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p> + +<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p> + +<p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p> + +<div class="tuto_example"> +<div class="tuto_type">Примеры</div> + +<p>Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:</p> + +<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> + +<p>Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:</p> + +<pre class="brush: css">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + +<p>Некоторые используют отступы — 2 или 4 пробела или табы:</p> + +<pre class="brush: css">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + +<p>Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):</p> + +<pre class="brush: css">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + +<p>Некоторые люди используют смешанный пробелы для повышения читаемости.</p> + +<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } +.vegetable.carrot { color: orange; height: 90px; width: 10px } +.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } +</pre> +</div> + +<p>Некоторые используют вкладки для компоновки элементов, а другие только пробелы.</p> + +<h3 id="Комментарии">Комментарии</h3> + +<p>Комментарии в CSS имеют следующий вид: <code>/*</code> комментарий <code>*/</code>.</p> + +<p>Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.</p> + +<p>Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.</p> + +<div class="tuto_example"> +<div class="tuto_type">Пример</div> + +<pre class="brush: css">/* стиль для начальной буквой C в первом пункте*/ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> + +<h3 id="Группировка_селекторов">Группировка селекторов</h3> + +<p>Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.</p> + +<p>В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.</p> + +<div class="tuto_example"> +<div class="tuto_type">Пример</div> + +<p>Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.</p> + +<p>Удобно определить цвет только в одном месте, в случае, если возможны изменения.</p> + +<pre class="brush: css">/* цвет для заголовков */ +h1, h2, h3 {color: navy;} +</pre> +</div> + +<h2 id="Действуем_добавление_комментариев_и_улучшения_формата">Действуем: добавление комментариев и улучшения формата</h2> + +<ol> + <li>Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке): + <pre class="brush: css">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> + </li> + <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li> + <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details"> +<div class="tuto_type">Задание</div> + +<p>Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>(Существует более чем один способ сделать это).</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> +One way to do this is to put comment delimiters around the rule for <code>.carrot</code>: + +<pre class="brush: css">/*.carrot { + color: orange; +}*/</pre> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div> + +<h2 id="Что_дальше">Что дальше?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p> diff --git a/files/ru/conflicting/learn/css/first_steps/how_css_works/index.html b/files/ru/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..8e7fae4eb2 --- /dev/null +++ b/files/ru/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,123 @@ +--- +title: Как работает CSS +slug: conflicting/Learn/CSS/First_steps/How_CSS_works +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Web/Guide/CSS/Getting_started/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?") }} Это третья статья руководства по <span class="seoSummary"><a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (</span>Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.</p> + +<h2 class="clearLeft" id="Информация_Как_работает_CSS">Информация: Как работает CSS</h2> + +<p>Когда браузер отображает документ, он должен совместить содержимое документа с информацией о стилях для него. Браузер обрабатывает документ в два этапа:</p> + +<ol> + <li>Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.</li> + <li>Браузер отображает содержимое DOM.</li> +</ol> + +<p>Язык разметки использует <em>элементы</em> для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа '<' и заканчивающиеся '>'. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между '<' и '>'. Для закрывающего тега, поместите '<code>/</code>' между '<code><</code>', и именем элемента.</p> + +<p>В зависимости от языка разметки, некоторые элементы имеют только начальный тег, или тег, где '/' располагается после имени элемента. Элемент так же может быть контейнером, включающим в себя другие элементы. В этом случае они располагаются между открывающим и закрывающим тегами. Не забывайте всегда закрывать теги внутри контейнера.</p> + +<p>DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится <em>узлом</em> в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют "братьев" (siblings).</p> + +<p>Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.</p> + +<div class="tuto_example"> +<div class="tuto_type">Пример</div> + +<div class="tuto_type"> </div> +В данном примере, тег <code><p></code> и его закрывающий тег <code></p></code> создают контейнер: + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<p><strong>Живой пример</strong></p> + +<p>{{ EmbedLiveSample('Информация_Как_работает_CSS', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p> + +<p>В DOM соответствующий узел P является родительским. Его дочерние узлы - это теги <small>STRONG</small> и узлы текста. Теги <small>STRONG, </small> в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<h2 id="К_действию_Анализ_DOM">К действию: Анализ DOM</h2> + +<h3 id="Использование_DOM_Inspector">Использование DOM Inspector</h3> + +<p>Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).</p> + +<ol> + <li>Используйте браузер Mozilla, чтобы открыть свой HTML-документ.</li> + <li>Из строки меню браузера выберите <strong>Инструменты > DOM инспектор</strong>, или <strong>Инструменты > Веб-разработка > Инспектор</strong>. + <div class="tuto_details"> + <div class="tuto_type">Подробнее</div> + + <p>Если в вашем браузере Mozilla не установлен DOMi, вы можете <a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/6622/" title="https://addons.mozilla.org/ru/firefox/addon/6622/">установить его с сайта дополнений</a> и перезапустить браузер. Затем возвращайтесь к этому руководству.</p> + + <p>Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.</p> + </div> + </li> + <li>В DOMi разверните узлы вашего документа, нажав на их стрелки. + <p><strong>Замечание: </strong> Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.</p> + + <p>Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>При выборе любого узла, вы можете использовать правую панель DOMi's для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.</p> + + <p>При выборе узла элемента, DOMi анализирует его и предоставляет огромное количество информации, которая содержится в правой панели. Информация о стилях - лишь часть информации, которую там можно просмотреть.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Задача</div> + +<p>В DOMi, кликните на узле <small>STRONG</small>.</p> + +<p>Используйте правую панель ДОМи, чтобы выяснить, где цвет для этого узла установлен на красный, и где его внешний вид сделан толще, чем обычный текст.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задачи.</a></div> + +<h3 id="Использование_Рентген-очков">Использование Рентген-очков</h3> + +<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Рентген-очки </a>показывают меньше информации, чем DOM Инспектор, но проще в установке и использовании.</p> + +<ol> + <li>Перейдите на домашнюю страницу <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">X-Ray Goggles</a>.</li> + <li>Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.</li> + <li>Откройте HTML-документ.</li> + <li>Запустите Рентген-очки, кликнув по появившейся закладке.</li> + <li>Передвигайте курсор мыши по документу для просмотра элементов в документе.</li> +</ol> + +<h2 id="Что_дальше">Что дальше?</h2> + +<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Каскадность и наследование") }}Если вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">следующей странице</a> объясняется больше об этих взаимодействиях.</p> diff --git a/files/ru/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/ru/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html new file mode 100644 index 0000000000..05b7c9e54c --- /dev/null +++ b/files/ru/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html @@ -0,0 +1,112 @@ +--- +title: Зачем нужен CSS? +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 +tags: + - Beginner + - CSS + - CSS:Getting_Started + - Example + - Guide + - Web + - Веб + - Новичку + - Руководство +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> + +<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Что такое CSS?") }}<span class="seoSummary">Это вторая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняющая взаимосвязь между CSS и документами. В ней вы узнаете, как добавить CSS стили для документа, который вы создали в процессе изучения первой статьи.</span></p> + +<h2 class="clearLeft" id="Информация_Зачем_нужен_CSS">Информация: Зачем нужен CSS?</h2> + +<p>CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега <HEAD> документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке <HEAD> документа.</p> + +<p>У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:</p> + +<ul> + <li>Помогает избежать дублирования</li> + <li>Облегчает обслуживание</li> + <li>Позволяет делать изменения для всего сайта в одном месте</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Пример</div> + +<p>Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.</p> + +<p>Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.</p> + +<p>Когда пользователь открывает веб-страницу в режиме печати, вы можете предоставить различную информацию о стилях которая сделает страницу более лёгкой для чтения.</p> +</div> + +<p>Как заставить HTML и CSS работать вместе? В целом, HTML используется для описания содержимого документа, а не его стиля. CSS же используется, чтобы указать стиль документа, но не содержание. Позже в руководстве вы увидите некоторые исключения из этого правила.</p> + +<div class="tuto_details"> +<div class="tuto_type">Подробнее</div> + +<p>Язык разметки, типа HTML также обеспечивает некоторые способы задания стилей.</p> + +<p>Например, в HTML вы можете использовать тег <B>, чтобы сделать текст жирным, либо указать цвет фона страницы в теге <BODY>.</p> + +<p>При использовании CSS, задание стилей средствами языка разметки обычно не используется, поскольку вся информация о стилях легко доступна для чтения и изменения в CSS-файле.</p> +</div> + +<h2 id="Действие_Создание_таблицы_стилей">Действие: Создание таблицы стилей</h2> + +<ol> + <li>Создайте новый текстовый файл в том же каталоге, что и <code>doc1.html</code>, созданный в первой статье.</li> + <li>Сохраните его как <code>style1.css</code>. Этот файл будет вашей таблицей стилей.</li> + <li>Скопируйте и вставьте в CSS-файл приведённую ниже строку, после чего сохраните файл: + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="Привязка_таблицы_стилей_к_документу">Привязка таблицы стилей к документу</h3> + +<ol> + <li>Для привязки вашего документа к таблице стилей, необходимо внести в HTML-файл некоторые исправления. Добавьте строки, приведённые ниже: + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Сохраните файл, и откройте его в браузере. Таблица стилей сделает заглавные буквы красными:</li> +</ol> + +<p>{{ EmbedLiveSample('Действие_Создание_таблицы_стилей', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}</p> + +<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'Просмотреть демо') }}</p> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type">Задание</div> + +<p>В дополнение к красному, в CSS имеются и другие названия цветов.</p> + +<p>Не открывая подсказку, подберите ещё пять цветовых имён, которые будут работать в CSS.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Возможное решение</div> + +<p>CSS поддерживает общие названия цветов, например <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, или <code>black</code>. Он также поддерживает некоторые более экзотические названия типа <code>chartreuse</code>, <code>fuschia</code>, или <code>burlywood</code>. Посмотрите <a href="/ru/docs/CSS/color_value" title="Цвет в CSS">значения цвета CSS</a>, чтобы ознакомится с полным списком поддерживаемых цветов, а так же методов их задания.</p> +<a class="hideAnswer" href="#challenge">Скрыть решение</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div> + +<h2 id="Что_дальше">Что дальше?</h2> + +<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Как работает CSS.")}} Теперь, когда у вас есть образец документа, связанный с отдельной таблицей стилей, вы готовы <a href="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works">узнать больше</a> о том, как ваш браузер объединяет их при отображении документа.</p> diff --git a/files/ru/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html b/files/ru/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html new file mode 100644 index 0000000000..b97a4ef068 --- /dev/null +++ b/files/ru/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html @@ -0,0 +1,122 @@ +--- +title: Что такое CSS? +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 +tags: + - Beginner + - CSS + - CSS:Getting_Started + - Example + - Guide + - Веб + - Новичку +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +original_slug: Web/Guide/CSS/Getting_started/What_is_CSS +--- +<div>{{ CSSTutorialTOC() }}</div> + +<p>{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started", "CSS для начинающих")}} <span class="seoSummary">Эта первая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a> кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.</span></p> + +<h2 class="clearLeft" id="Информация_Что_такое_CSS">Информация: Что такое CSS</h2> + +<p>Каскадные таблицы стилей (Cascading Style Sheets = <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) — это язык, который отвечает за визуальное представление документов пользователю.</p> + +<p>Под <em>документом</em> мы будем понимать набор информации о структуре страницы, описываемый <em>языком разметки</em>.</p> + +<p>А <em>представление</em> документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.</p> + +<div class="tuto_example"> +<p><strong>Примеры</strong></p> + +<ul> + <li>Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (<span lang="en">HyperText Markup Language</span> — Язык ГиперТекстовой Разметки)</li> + <li>Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (<span lang="en">XML User Interface Language</span> — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.</li> +</ul> +</div> + +<p>В этом руководстве блоки с заголовком <strong>Подробнее</strong>, как нижеследующий, содержат дополнительную информацию и ссылки на ресурсы, позволяющие более глубоко изучить вопрос, которому посвящен тот или иной раздел. Вы можете сразу же воспользоваться этими материалами или же пропустить эти блоки и вернуться к ним позже.</p> + +<div class="tuto_details"> +<div class="tuto_type">Подробнее</div> + +<p>Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.</p> + +<p>Со страницей, которую вы сейчас читаете, дела обстоят немного сложнее. Когда ваш браузер запрашивает данную страницу, сервер обращается к базе данных и генерирует документ, собирая его по частям из нескольких документов, каждый из которых, в свою очередь, может располагаться в нескольких файлах. Однако в этом руководстве вы также сможете работать с документами, каждый из которых представлен одним файлом.</p> + +<p>Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/ru/docs/Web/HTML" title="/ru/docs/Web/HTML">HTML</a></td> + <td>о веб-страницах</td> + </tr> + <tr> + <td><a href="/ru/docs/XML" title="/ru/docs/XML">XML</a></td> + <td>о структуре документов в общем</td> + </tr> + <tr> + <td><a href="/ru/docs/Web/SVG" title="/ru/docs/Web/SVG">SVG</a></td> + <td>о графике</td> + </tr> + <tr> + <td><a href="/ru/docs/XUL" title="/ru/docs/XUL">XUL</a></td> + <td>о пользовательских интерфейсах в Mozilla</td> + </tr> + </tbody> +</table> + +<p>Во второй части данного руководства вы встретите примеры этих языков разметки.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Подробнее</div> + +<p>В терминах CSS программа, которая выводит документ пользователю, так называемому <em lang="en">user agent</em> (<span lang="en">UA</span>). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.</p> + +<p>Прочие определения и термины, имеющие отношение к CSS, вы можете найти в <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Определениях</a> спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.</p> +</div> + +<h2 id="К_действию_Создание_документа">К действию: Создание документа</h2> + +<ol> + <li>Создайте новую папку на вашем компьютере для упражнений.</li> + <li>Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.</li> + <li>Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем <code>doc1.html.</code> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html></pre> + + <p>{{ LiveSampleLink('Action.3A_Creating_a_document', 'Посмотреть демо') }}</p> + </li> + <li>Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл. + <p>Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:</p> + + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>То, что вы увидите на самом деле, может немного отличаться потому, что настройки по умолчанию вашего браузера и данной энциклопедии наверняка будут отличаться: небольшие различия в шрифте, пробелах и цветах не очень-то и важны.</p> + </li> +</ol> + +<h2 id="Что_дальше">Что дальше?</h2> + +<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?")}}В документе, который вы создали, CSS пока что не использовался. В <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">следующем разделе</a> вы научитесь использовать CSS для стилизации документа.</p> diff --git a/files/ru/conflicting/learn/css/first_steps/index.html b/files/ru/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..e7f3f73dce --- /dev/null +++ b/files/ru/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,61 @@ +--- +title: CSS для начинающих +slug: conflicting/Learn/CSS/First_steps +tags: + - Beginner + - CSS + - CSS:Getting_Started + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsTranslation + - NeedsUpdate + - TopicStub + - Web + - Новичку + - Руководство +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/Guide/CSS/Getting_started +--- +<p><span class="seoSummary">Это руководство (самоучитель) познакомит вас с базовыми возможностями и языком (синтаксом) <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS"><strong>Каскадных таблиц стилей</strong></a> (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своем компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах. </span></p> + +<p>Данное руководство создано для новичков и всех, кто хотел бы освежить свои знания основ CSS. Если у вас уже есть опыт работы с CSS, на главной странице вы можете найти <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">список</a> обучающих ресурсов, подходящих для вашего уровня.</p> + +<nav class="fancyTOC"><a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Глава «Что такое CSS» руководства по CSS">Что такое CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Глава «Зачем нужен CSS» руководства по CSS">Зачем нужен CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Глава «Как работает CSS» руководства по CSS">Как работает CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Глава «Каскадирование и наследование» руководства по CSS">Каскадность и наследование</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Глава «Селекторы» руководства по CSS">Селекторы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Глава «Читаемость CSS» руководства по CSS">Читаемость CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">стили текста</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Color" title="Глава «Цвета» руководства по CSS">Цвета</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">контент</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Lists" title="Глава «Списки» руководства по CSS">Списки</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">блок</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">макет</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Tables" title="Глава «Таблицы» руководства по CSS">Таблицы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">медиа</a></nav> + +<h2 id="Что_вам_нужно_для_того_чтобы_начать">Что вам нужно для того, чтобы начать</h2> + +<ul> + <li>Текстовый редактор</li> + <li>Современный браузер</li> + <li>Опыт работы с текстовым редактором и браузером</li> +</ul> + +<p>В данном руководстве вам будут встречаться упражнения, которые вам предлагается выполнить для лучшего понимания материала. Их выполнение не является обязательным: вы можете просто читать материал и смотреть на иллюстрации.</p> + +<p><strong>Важно:</strong> Руководство включает в себя материалы по работе с цветом в CSS. Эти материалы будет легче пройти, если у вас цветной монитор и нормальное цветовое зрение.</p> + +<h2 id="Как_пользоваться_руководством">Как пользоваться руководством</h2> + +<p>Наилучшим вариантом будет внимательное и постепенное чтение разделов в строгой последовательности. Если вы пропустите какой-то раздел, вам может оказаться что-то непонятно в следующих главах.</p> + +<h3 id="Часть_I_Основы_CSS">Часть I: Основы CSS</h3> + +<p>На каждой странице, используйте секцию <em>Информация</em>, чтобы понять, как работает CSS. Используйте секцию <em>К действию</em>, чтобы попробовать использовать CSS на вашем компьютере.</p> + +<p>Чтобы проверить усвоенные знания, вам будет полезно решить задачу в конце каждой страницы. Верные решения задач вы всегда можете найти под их описанием в виде ссылки - таким образом, вы не сможете увидеть их случайно.</p> + +<p>Чтобы добиться более глубокого понимания CSS, читайте информацию в блоках с заголовком <em>Подробнее</em>. А также не забудьте посетить приведенные там ссылки.</p> + +<h3 id="Часть_II_Возможности_CSS">Часть II: Возможности CSS</h3> + +<p>Вторая часть руководства содержит примеры, которые продемонстрируют вам возможности CSS применительно к другим web-технологиям и технологиям Mozilla. </p> + +<ol> + <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="ru/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="ru/CSS/Getting_Started/SVG_graphics">SVG графика</a></li> + <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XML_data" title="ru/CSS/Getting_Started/XML_data">XML данные</a></li> + <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="ru/CSS/Getting_Started/XBL_bindings">XBL байдинг bindings</a></li> + <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Пользовательские интерфейсы XUL</a></li> +</ol> |