path: root/files/ru/learn/getting_started_with_the_web/css_basics/index.html

---
title: Основы CSS
slug: Learn/Getting_started_with_the_web/CSS_basics
tags:
  - Beginner
  - CSS
  - CodingScripting
  - Learn
  - Styling
  - Web
  - Веб
  - Новичку
  - Обучение
translation_of: Learn/Getting_started_with_the_web/CSS_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. <em>Основы CSS</em> помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?</p>
</div>

<h2 id="Так_что_же_такое_CSS">Так что же такое CSS? </h2>

<p>Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это <em>язык таблицы стилей. </em>Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать <strong>все</strong> элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:</p>

<pre><code>p {
  color: red;
}</code></pre>

<p>Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как <code>style.css</code> в вашей папке <code>styles</code>.</p>

<p>Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> и <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>, чтобы узнать, что вам нужно сделать в первую очередь.)</p>

<ol>
 <li>Откройте ваш файл <code>index.html</code> и вставьте следующую строку куда-нибудь в шапку, между <code>&lt;head&gt;</code> и <code>&lt;/head&gt;</code> тегами:

  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
 </li>
 <li>Сохраните <code>index.html</code> и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:</li>
</ol>

<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="website-screenshot-styled.png" style="display: block; margin: 0px auto;">Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!</p>

<h3 id="Анатомия_набора_правил_CSS">Анатомия набора правил CSS</h3>

<p>Давайте взглянем на вышеупомянутый CSS немного более подробно:</p>

<p><img alt="" src="css-declaration-small.png" style="display: block; margin: 0px auto;"></p>

<p>Вся структура называется <strong>набором правил</strong> (но зачастую для краткости "правило"). Отметим также имена отдельных частей:</p>

<dl>
 <dt>Селектор (Selector)</dt>
 <dd>Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы <code>p</code> ). Для стилизации другого элемента, просто измените селектор.</dd>
 <dt>Объявление (Declaration)</dt>
 <dd>Единственное правило, например <code>color: red;</code> указывает, какие из <strong>свойств</strong> элемента вы хотите стилизовать.</dd>
 <dt>Свойства (Properties)</dt>
 <dd>Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, <code>color</code> является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.</dd>
 <dt>Значение свойства (Property value)</dt>
 <dd>Справа от свойства, после двоеточия, у нас есть <strong>значение свойства</strong>, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений <code>color</code>, помимо <code>red</code>).</dd>
</dl>

<p>Обратите внимание на важные части синтаксиса:</p>

<ul>
 <li>Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки (<code>{}</code>).</li>
 <li>В каждом объявлении необходимо использовать двоеточие (<code>:</code>), чтобы отделить свойство от его значений.</li>
 <li>В каждом наборе правил вы должны использовать точку с запятой (<code>;</code>), чтобы отделить каждое объявление от следующего.</li>
</ul>

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

<pre class="brush: css">p {
  color: red;
  width: 500px;
  border: 1px solid black;
}</pre>

<h3 id="Выбор_нескольких_элементов">Выбор нескольких элементов</h3>

<p>Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:</p>

<pre class="brush: css">p,li,h1 {
  color: red;
}</pre>

<h3 id="Разные_типы_селекторов">Разные типы селекторов</h3>

<p>Существует множество различных типов селектора. Выше мы рассматривали только <strong>селектор элементов</strong>, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Имя селектора</th>
   <th scope="col">Что выбирает</th>
   <th scope="col">Пример</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Селектор элемента (иногда называемый селектором тега или типа)</td>
   <td>Все HTML-элемент(ы) указанного типа.</td>
   <td><code>p</code><br>
    Выбирает <code>&lt;p&gt;</code></td>
  </tr>
  <tr>
   <td>ID селектор</td>
   <td>Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.</td>
   <td><code>#my-id</code><br>
    Выбирает <code>&lt;p id="my-id"&gt;</code> или <code>&lt;a id="my-id"&gt;</code></td>
  </tr>
  <tr>
   <td>Селектор класса</td>
   <td>Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).</td>
   <td><code>.my-class</code><br>
    Выбирает <code>&lt;p class="my-class"&gt;</code> и <code>&lt;a class="my-class"&gt;</code></td>
  </tr>
  <tr>
   <td>Селектор атрибута</td>
   <td>Элемент(ы) на странице с указанным атрибутом.</td>
   <td><code>img[src]</code><br>
    Выбирает <code>&lt;img src="myimage.png"&gt;</code> но не <code>&lt;img&gt;</code></td>
  </tr>
  <tr>
   <td>Селектор псевдокласса</td>
   <td>Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.</td>
   <td><code>a:hover</code><br>
    Выбирает <code>&lt;a&gt;</code>, но только тогда, когда указатель мыши наведён на ссылку.</td>
  </tr>
 </tbody>
</table>

<p>Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors">Руководстве селекторов</a>.</p>

<h2 id="Шрифты_и_текст">Шрифты и текст</h2>

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

<ol>
 <li>Прежде всего, вернитесь и найдите <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code>&lt;head&gt;</code> и <code>&lt;/head&gt;</code>). Это будет выглядеть примерно так:

  <pre class="brush: html">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
  Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML-элементам используя свою собственную таблицу стилей.</li>
 <li>Затем, удалите существующее правило в вашем <code>style.css</code> файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.</li>
 <li>Добавьте следующие строки в нужное место, заменив строку <code>placeholder</code> актуальной <code>font-family</code> строкой, которую вы получили из Google Fonts. (<code>font-family</code> просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <code>&lt;html&gt;</code> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же <code>font-size</code> и <code>font-family</code>):
  <pre class="brush: css">html {
  font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту  */
  font-family: placeholder: здесь должно быть имя шрифта из Google fonts
}</pre>

  <div class="note">
  <p><strong>Примечание</strong>: Все в CSS документе между <code>/*</code> и <code>*/ </code> является <strong>CSS комментарием</strong>, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.</p>
  </div>
 </li>
 <li>Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела ({{htmlelement("h1")}}, {{htmlelement("li")}}, и {{htmlelement("p")}}). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
  <pre class="brush: css">h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}</pre>
 </li>
</ol>

<p>Вы можете настроить значения <code>px</code> так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:</p>

<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="website-screenshot-font-small.png" style="display: block; margin: 0px auto;"></p>

<h2 id="Блоки_блоки_и_ещё_раз_блоки">Блоки, блоки и ещё раз блоки</h2>

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

<p><img alt="a big stack of boxes or crates sat on top of one another" src="boxes.jpg" style="display: block; margin: 0px auto;"></p>

<p>Не удивительно, макет CSS основан, главным образом, на <em>блочной модели (box model)</em>. Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:</p>

<ul>
 <li><code>padding</code>, пространство только вокруг контента (например, вокруг абзаца текста)</li>
 <li><code>border</code>, сплошная линия, которая расположена рядом с padding</li>
 <li><code>margin</code>, пространство вокруг внешней стороны элемента</li>
</ul>

<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="box-model.png" style="display: block; margin: 0px auto;"></p>

<p>В этом разделе мы также используем:</p>

<ul>
 <li><code>width</code> (ширину элемента)</li>
 <li><code>background-color</code>, цвет позади контента и padding элементов</li>
 <li><code>color</code>, цвет контента элемента (обычно текста)</li>
 <li><code>text-shadow</code>: устанавливает тень на тексте внутри элемента</li>
 <li><code>display</code>: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)</li>
</ul>

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

<h3 id="Изменение_цвета_страницы">Изменение цвета страницы</h3>

<pre class="brush: css">html {
  background-color: #00539F;
}</pre>

<p>Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вы выбрали при планировании вашего сайта</a>.</p>

<h3 id="Разбираемся_с_телом">Разбираемся с телом</h3>

<pre class="brush: css">body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}</pre>

<p>Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:</p>

<ul>
 <li><code>width: 600px;</code> — заставляет тело быть всегда 600 пикселей в ширину.</li>
 <li><code>margin: 0 auto;</code> — когда вы устанавливаете два значения для таких свойств как <code>margin</code> или <code>padding</code>, первое значение элемента влияет на верхнюю <strong>и</strong> нижнюю сторону (делает их <code>0</code> в данном случае), и второе значение на левую <strong>и</strong> правую сторону (здесь, <code>auto</code> является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано <a href="/ru/docs/Web/CSS/margin#values">здесь</a>.</li>
 <li><code>background-color: #FF9500;</code> — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.</li>
 <li><code>padding: 0 20px 20px 20px;</code> — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.</li>
 <li><code>border: 5px solid black;</code> — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.</li>
</ul>

<h3 id="Позиционирование_и_стилизация_нашего_заголовка_главной_страницы">Позиционирование и стилизация нашего заголовка главной страницы</h3>

<pre class="brush: css">h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}</pre>

<p>Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый <strong>стиль по умолчанию</strong> для элемента {{htmlelement("h1")}} (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив <code>margin: 0;</code>.</p>

<p>Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.</p>

<p>Здесь, мы использовали одно довольно интересное свойство - это <code>text-shadow</code>, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:</p>

<ul>
 <li>Первое значение пикселей задаёт <strong>горизонтальное смещение</strong> тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.</li>
 <li>Второе значение пикселей задаёт <strong>вертикальное смещение</strong> тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.</li>
 <li>Третье значение пикселей задаёт <strong>радиус размытия</strong> тени — большее значение будет означать более размытую тень.</li>
 <li>Четвёртое значение задаёт основной цвет тени.</li>
</ul>

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

<h3 id="Центрирование_изображения">Центрирование изображения</h3>

<pre class="brush: css">img {
  display: block;
  margin: 0 auto;
}</pre>

<p>В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать <code>margin: 0 auto</code> уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент {{HTMLElement("body")}} является <strong>блочным</strong>, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются <strong>строчными</strong> элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью <code>display: block;</code>.</p>

<div class="blockIndicator note">
<p><strong>Примечание: </strong>Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя <a href="https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80">графический редактор</a>, или 2) изменить размер изображения используя CSS путём установки свойства {{cssxref("width")}} для <code>&lt;img&gt;</code> элемента меньшего значения (например <code>400 px;</code>).</p>
</div>

<div class="note">
<p><strong>Примечание</strong>: Не стоит беспокоиться, если вы ещё не понимаете <code>display: block;</code> и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве <a href="/ru/docs/Web/CSS/display">display</a>.</p>
</div>

<h2 id="Заключение">Заключение</h2>

<p>Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="https://mdn.github.io/beginner-html-site-styled/">посмотреть нашу версию здесь</a>):</p>

<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="website-screenshot-final.png" style="display: block; margin: 0px auto;"></p>

<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">готовым примером кода на Github</a>.</p>

<p>Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу <a href="/ru/docs/Learn/CSS">страницу изучения CSS</a>.</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
 <li id="What_will_your_website_look_like"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
 <li id="Dealing_with_files"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
 <li id="HTML_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
 <li id="CSS_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
 <li id="JavaScript_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
 <li id="Publishing_your_website"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
 <li id="How_the_web_works"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
</ul>