diff options
Diffstat (limited to 'files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html')
| -rw-r--r-- | files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..36f4767e10 --- /dev/null +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,124 @@ +--- +title: Понимание основ CSS +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div> + +<p class="summary">Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социльной сети.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Предварительно:</th> + <td>Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля.</td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td>Проверка понимания основной теории, синтаксиса и техник CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Отправной_пункт">Отправной пункт</h2> + +<p>Чтобы начать проверку, вы должны:</p> + +<ul> + <li>Перейти и скачать <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML файл для упражнения</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">связанный файл изображения</a>, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать свое имя, то пожалуйста — только убедитесь, что изображение квадратное.</li> + <li>Скачайте <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">текстовый файл с исходным CSS</a> — в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.</li> +</ul> + +<div class="note"> +<p><strong>Примечание</strong>: Вместо этого вы можете использовать для проверки такие сайты как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">этот URL</a> чтобы указать элементу <code><img></code> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <code><style></code> в заголовке документа.</p> +</div> + +<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> + +<p>Вам предоставили некоторый исходный HTML и изображение, и нужно написать необходимые CSS-правила, чтобы стилизовать это в маленькую онлайн-визитку, которая может, возможно, стать картой игрока или профилем в социальных сетях. Следующие разделы описывают, что вам нужно сделать.</p> + +<p>Первоначальные настройки:</p> + +<ul> + <li>Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например <code>style.css</code>.</li> + <li>Подключите ваш CSS к вашему файлу HTML с помощью элемента <code><link></code>.</li> + <li>Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.</li> + <li>Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте еще три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.</li> +</ul> + +<p>Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:</p> + +<ul> + <li>Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.</li> + <li>Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать: + <ul> + <li>Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закругленные углы!), помимо прочего.</li> + <li>Задайте заголовку градиент фона, который идет от темного к светлому, плюс закругленные углы, которые вписываются в закругленные углы, заданные для главного контейнера карты.</li> + <li>Задайте для футера градиент фона, переходящий от светлого к темному, а также скругленные углы, которые вписываются в скругленные углы контейнера основной карты.</li> + <li>Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).</li> + </ul> + </li> + <li>Осторожно! В предоставленных наборах правил есть две ошибки. Используя любую технику, которую вы знаете, отследите их и исправьте, прежде чем двигаться дальше.</li> +</ul> + +<p>Какие новые наборы правил надо написать:</p> + +<ul> + <li>Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в <code>em</code>s.</li> + <li><code>margin</code> по умолчанию, применяемый браузером к элементам <code><h2></code> и <code><p></code>, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.</li> + <li>Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <code><article></code>), нужно задать ему определенную высоту. Установите высоту <code><article></code> в 120px, но выраженную в <code>em</code>s. Также задайте ему полупрозрачный черный цвет фона, в результате получится чуть более темный оттенок, который позволяет цвету фона немного просвечивать красным цветом.</li> + <li>Напишите набор правил, который задает тегу <code><h2></code> удобный размер шрифта 20px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить ее в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.</li> + <li>Напишите набор правил, который задает тегу <code><p></code> внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.</li> + <li>В качестве последнего штриха задайте параграфу внутри <code><article></code> соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом <code><h2></code> и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.</li> +</ul> + +<div class="note"> +<p><strong>Примечание</strong>: Имейте в виду, что второй набор правил устанавливает <code>font-size: 10px;</code> для элемента<code><html></code> — это означает, что для любых потомков <code><html></code> <code>em</code> будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идет речь, нет предков, находящихся в иерархии между ними и <code><html></code>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).</p> +</div> + +<p>Другие вещи для размышления:</p> + +<ul> + <li>Вы получите бонусные баллы, если напишите объявления своего CSS в отдельных строках, чтобы обеспечить максимальную читаемость.</li> + <li>Вы должны включить <code>.card</code> в начале цепочки селекторов во всех ваших правилах, чтобы эти правила не мешали стилизации каких-либо других элементов, в случае если визитная карточка должна быть помещена на страницу с загрузкой другого контента.</li> +</ul> + +<h2 id="Советы_и_подсказки">Советы и подсказки</h2> + +<ul> + <li>Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.</li> + <li>При попытке определить значение em вам нужно представить определенную величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (<code><html></code>), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение <code>em</code>, по крайней мере, в таком простом случае как этот.</li> +</ul> + +<h2 id="Образец">Образец</h2> + +<p>На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:</p> + +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Проверка">Проверка</h2> + +<p>Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путем: спросив в <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">теме обсуждения об этом упражнении</a>, или в канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путем обмана!</p> + +<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">Как работает CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Syntax">Синтаксис CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors">Введение в селекторы</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">Простые селекторы</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Селекторы по атрибутам</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">Комбинаторы и множественные селекторы</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS значения и единицы</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Каскадность и наследование</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Box_model">Блочная модель</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Отладка CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Задание: Основы понимания CSS</a></li> +</ul> |