path: root/files/ru/learn/css/building_blocks/images_media_form_elements/index.html

---
title: 'Элементы изображений, медиа и форм'
slug: Learn/CSS/Building_blocks/Images_media_form_elements
translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>

<p>В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td>To understand the way that some elements behave unusually when styled with CSS.</td>
  </tr>
 </tbody>
</table>

<h2 id="Замещаемые_элементы">Замещаемые элементы</h2>

<p>Изображения и видео описываются как <strong><a href="/en-US/docs/Web/CSS/Replaced_element">Замещаемые элементы</a></strong>. Это значит, что CSS не может влиять на внутреннюю планировку этих элементов — только на их позицию на странице среди других элементов. Однако, как мы увидим, существуют различные вещи, которые CSS может сделать с изображением.</p>

<p>Конкретные замещаемые элементы, такие как изображения и видео, можно также описать, как элементы имеющие <strong>соотношение сторон</strong>. Это значит, что такой элемент имеет размер как по горизонтали (x) так и по вертикали (y) и будет отображаться используя "родные" размеры файла по умолчанию.</p>

<h2 id="Размер_изображений_калибровка">Размер изображений (калибровка)</h2>

<p>Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдёт с перекрытием.</p>

<p>В примере ниже у нас два блока, оба имеют размер по 200px:</p>

<ul>
 <li>Один содержит изображение, которое 200px — оно меньше, чем блок и не растягивается что бы заполнить его.</li>
 <li>Второй больше 200px и перекрывает блок.</li>
</ul>

<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>

<p>Так что же мы можем сделать с проблемой перекрывания?</p>

<p>Как мы учили в <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">нашем предыдущем уроке</a>, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. <span class="tlid-translation translation" lang="ru"><span title="">Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его.</span></span> Такой метод будет работать и с другими замещаемыми элементами такими как <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> или <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>.</p>

<p><strong>Попробуйте добавить <code>max-width: 100%</code> к элементу <code>&lt;img&gt;</code> в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.</strong></p>

<p>Вы можете сделать другие варианты изображений внутри контейнеров. Например, вы можете захотеть дать изображению такие размеры, чтоб оно полностью покрывало блок.</p>

<p>Здесь вам может помочь свойство {{cssxref("object-fit")}}. Используя <code>object-fit</code>, можно определять размеры замещаемого элемента для заполнения блока различными способами.</p>

<p>Ниже мы использовали значение <code>cover</code>, которое уменьшает изображение, сохраняя соотношение сторон так, что он аккуратно заполняет блок. Поскольку соотношения сторон сохраняются, некоторые части изображения будут обрезаны блоком.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>

<p>Если мы используем <code>contain</code> в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведёт к "почтовой упаковке", если оно не будет иметь такого же соотношения сторон, как блок.</p>

<p>Вы также можете попробовать значение <code>fill</code>, которое будет заполнять блок, но при этом не сохранять соотношение сторон.</p>

<h2 id="Замещаемые_элементы_в_вёрстке">Замещаемые элементы в вёрстке</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например</span></span>, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.</p>

<p>Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все <code>&lt;div&gt;</code> элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>

<p>Если вы изучаете эти уроки по порядку, тогда вы, возможно, ещё не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.</p>

<p>Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:</p>

<pre class="brush: css">img {
  width: 100%;
  height: 100%;
}</pre>

<p>Это, однако, растянет изображение, и скорее всего это не то чего бы вам хотелось делать.</p>

<h2 id="Элементы_форм">Элементы форм</h2>

<p>Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и <a href="/en-US/docs/Learn/Forms">Web Forms module</a> содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. <span class="tlid-translation translation" lang="ru"><span title="">В этом разделе статьи стоит выделить несколько ключевых моментов.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Многие элементы управления форм добавляются на вашу страницу с помощью элемента</span></span> <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> — <span class="tlid-translation translation" lang="ru"><span title="">он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как </span></span><code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/legend">&lt;legend&gt;</a></code>.</p>

<p>HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры <span class="tlid-translation translation" lang="ru"><span title="">несовместимы в том, сколько стилей и настроек они допускают для таких элементов.</span></span></p>

<h3 id="Стилизация_элементов_ввода_текста">Стилизация элементов ввода текста</h3>

<p>Элементы, позволяющие вводить текст, такие как <code>&lt;input type="text"&gt;</code>, конкретные типы вроде <code>&lt;input type="email"&gt;</code>, и элемент <code>&lt;textarea&gt;</code>, являются довольно простыми в стилизации и как правило ведут себя также, как и другие блоки на вашей странице. Однако, стилизация по умолчанию таких элементов будет отличаться в зависимости от операционной системы и браузера которые использует пользователь, посещая сайт.</p>

<p>В примере ниже мы стилизовали несколько вводов текста используя CSS — вы можете увидеть, что такие вещи как borders, margins и padding, все применяются так как вы бы ожидали. Мы используем селекторы атрибутов для выборов различных типов ввода. Попробуйте изменить то, как эти формы выглядят, регулируя границы, добавляя цвет фона полям и изменяя шрифты padding.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>

<div class="blockIndicator warning">
<p><strong>Важно: </strong> <span class="tlid-translation translation" lang="ru"><span title="">При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.</span></span></p>
</div>

<p>Как объяснено в уроке <a href="/en-US/docs/Learn/Forms/Styling_web_forms">стилизация форм</a> в части HTML этого курса, <span class="tlid-translation translation" lang="ru"><span title="">многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. </span></span><span class="tlid-translation translation" lang="ru"><span title="">Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.</span></span></p>

<h3 id="Наследование_и_элементы_форм">Наследование и элементы форм</h3>

<p>В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определённый в body или родительском элементе, вы должны добавить это правило в ваш CSS.</p>

<pre class="brush: css"><code>button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
} </code></pre>

<h3 id="Элементы_форм_и_box-sizing">Элементы форм и box-sizing</h3>

<p><span class="tlid-translation translation" lang="ru"><span title="">В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов.</span></span> вы изучали свойство <code>box-sizing</code> в <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">нашем уроке Блоки в CSS</a> и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.</p>

<p>Для единообразия рекомендуется устанавливать margin и padding на <code>0</code> для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.</p>

<pre class="brush: css"><code>button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}</code></pre>

<h3 id="Другие_полезные_настройки">Другие полезные настройки</h3>

<p>В дополнение к правилам отмеченных выше, вы должны также установить <code>overflow: auto</code> для <code>&lt;textarea&gt;</code> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:</p>

<pre class="brush: css">textarea {
  overflow: auto;
}</pre>

<h3 id="Собираем_все_вместе_в_перезагрузку">Собираем все вместе в "перезагрузку"</h3>

<p>В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые<span class="tlid-translation translation" lang="ru"><span title=""> выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:</span></span></p>

<pre class="brush: css"><code>button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}

textarea {
  overflow: auto;
} </code></pre>

<div class="blockIndicator note">
<p><strong>Note</strong>: Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, which is a very popular stylesheet used as a base by many projects.</p>
</div>

<p>Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства.</p>

<ul>
 <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
</ul>

<h2 id="Summary">Summary</h2>

<p>This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS. In the next article we'll look over a few tips you'll find useful when you have to style HTML tables.</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p>

<h2 id="In_this_module">In this module</h2>

<ol>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
  <ul>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
</ol>