MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

CSS (Cascading Style Sheets) — это код, который вы используете для стилизирования вашей веб-страницы. В Основах CSS мы расскажем то, что вам нужно знать, чтобы начать. Мы ответим на такие вопросы: Как я могу сделать мой текст черным или красным? Как я могу сделать так, чтобы мой контент появлялся в разных местах экрана? Как украсить мою веб-страницу фоновыми изображениями и цветами?

Что такое CSS на самом деле?

Как и HTML, CSS не является языком программирования. Это язык таблицы стилей, то есть он позволяет выборочно применять стили к элементам в HTML документах. Например, чтобы выбрать все элементы параграфа на HTML странице и превратить их текст в красный, вы должны написать на CSS следующее:

p {
  color: red;
}

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

Однако нам нужно применять CSS к нашему HTML документу, в противном случае CSS стиль не повлияет на то, как ваш браузер отображает HTML документ. (Если вы не следили за нашим проектом, то прочитайте Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

  1. Откройте ваш файл index.html и вставьте следующую строку в шапку, то есть между <head> и </head> тегами:
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Если текст вашего параграфа  теперь красный, поздравляем. Вы написали свой первый успешный CSS!

Анатомия набора правил CSS

Давайте посмотрим на вышеупомянутый CSS немного более подробно:

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

Селектор (Selector)
Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизования другого элемента, просто измените селектор.
Объявление (Declaration)
Одно правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties)
Способы, которыми вы можете стилизовать данный HTML элемент (в данном случае color является свойством для элементов p). В CSS вы можете выбрать, какие свойства вы хотите затронуть в вашем правиле.
Значение свойства (Property value)
Справа от свойства, после двоеточия, находится значение свойства, в  котором выбирается одно из множества возможных значений для данного свойства (у свойства color есть множество значений, помимо red).

Обратите внимание на другие важные части синтаксиса:

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

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

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Множественный выбор элементов

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

p,li,h1 {
  color: red;
}

Разные типы селекторов

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

Имя селектора Что выбирает Пример
Селектор элемента (иногда называемый селектором тега или типа) Все HTML элемент(ы) указанного типа. p
Выбирает <p>
ID селектор Элемент на странице с указанным ID (на одной HTML странице, может быть только один элемент с каким-либо ID). #my-id
Выбирает <p id="my-id"> или <a id="my-id">
Селектор класса Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице). .my-class
Выбирает <p class="my-class"> и <a class="my-class">
Селектор атрибута Элемент(ы) на странице с указанным атрибутом. img[src]
Выбирает <img src="myimage.png"> но не <img>
Селектор псевдокласса Указанные элемент(ы), но только в случае определенного состояния, например, при наведении курсора. a:hover
Выбирает <a>, но только тогда, когда указатель мыши наведен на ссылку.

Существует много селекторов. Вы можете найти более подробный список в нашем Руководстве селекторов.

Шрифты и текст

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

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

    Примечание: Я добавил в комментарии объяснения, что означает "px". Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует, когда он обрабатывает код. Это место, где вы пишите полезные заметки о том, что вы делаете.

  4. Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (<h1>, <li>, и <p>). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

Вы можете настроить значения px по своему усмотрению, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

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

Блоки, блоки и ещё раз о блоках

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

a big stack of boxes or crates sat on top of one another

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

  • padding, пространство только вокруг контента (например, вокруг параграфа текста)
  • border, сплошная линия, которая расположена рядом с padding
  • margin, пространство вокруг внешней стороны элемента

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

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

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

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

Изменение цвета страницы

html {
  background-color: #00539F;
}

Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.

Разбираемся с телом

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Теперь для body элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:

  • width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
  • margin: 0 auto; — когда вы установите два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (сделав их 0 в данном случае), и второе значение для левой и правой стороны (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
  • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для html элемента. Идите вперед и экспериментируйте. Не стесняйтесь использовать white или те, которые вы хотите.
  • padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
  • border: 5px solid black; — просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

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

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

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

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

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

Центрирование изображения

img {
  display: block;
  margin: 0 auto;
}

В заключение, мы отцентрируем изображение, чтобы сделать его лучше. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать что-то еще. Элемент body является блочным, это означает, что занимает много места на странице и может иметь margin и другие значения отступов применяемые к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применять margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

Примечание: Не стоит беспокоиться, если вы еще не понимаете display: block; и блочное/строчное различие. Вы поймете, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Заключение

Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

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.

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу страницу изучения CSS.

Метки документа и участники

 Внесли вклад в эту страницу: TimurShigapov, Egokorok, BychekRU, Evgeny_Kurkin, Tamplier13, Aleksej, KuzAlenka
 Обновлялась последний раз: TimurShigapov,