MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Как работает CSS

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS (Каскадные Таблицы Стилей) позволяют создавать веб-страницы, которые радуют глаз. Но как это работает "под капотом"?  Эта статья объясняет, что такое CSS и  как браузеры превращают HTML в (DOM), как CSS применяется к различным частям DOM,  некоторые базовые примеры синтаксиса. Так же мы наконец узнаем, как подключить CSS к нашей веб-странице.

Требования: Базовые компьютерные навыки, предустановленное базовое ПО, базовые знания о работе с файлами и начальные навыки в HTML  (читать Введение в HTML.)
Цель: Получить начальные знания о том, что такое CSS и как он работает.

Что такое CSS?

Как мы узнали ранее, CSS это язык, описывающий как документ будет показан пользователю — его стилизацию, слои и так далее.

Документ обычно является текстовым файлом, который структурирован при помощи языка разметки.HTML это самый распространенный язык разметки, но вы можете столкнуться и с другими(SVG или XML).

Представление документа пользователю значит его конвертацию в понятную для пользователя форму.                         Браузеры, такие как Firefox, Chrome или Internet Explorer, предназначены для представления документов визуально, например, на экране компьютера, проектор или принтер.

Как CSS влияет на HTML?

Браузер применяет CSS правилак документу чтобы описать, как он будет отображаться. CSS-правила формируются из:

  • Набора свойств, которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента и его фон был красным.
  • Селектор, который выбирает (англ. selects)  элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе.

A set of CSS rules contained within a stylesheet determines how a webpage should look. You will learn a lot more about what CSS syntax looks like in the next article of the module — CSS Syntax.

Краткий пример CSS

Описания, приведенные выше могут быть непонятны, поэтому подкрепим теорию небольшим практическим примером. Прежде всего, давайте рассмотрим простой HTML-документ, содержащий <h1>и <p> (заметьте, что таблица стилей применяется к HTML с использованием элемента <link>):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Мой эксперимент с CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Это мой первый CSS-пример</p>
  </body>
</html>

Теперь давайте посмотрим на очень простой пример CSS, содержащий два правила:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Первое правило начинается с селектора h1, который означает, что оно будет применено к элементу <h1>. Оно содержит три  свойства и три значения(каждая пара свойство/значение называется объявление):

  1. Первое объявление меняет цвет текста на синий.
  2. Второе выставляет желтый фон тексту.
  3. Третье создает границу вокруг текста шириной 1 пиксель, сплошную(не пунктирную, не штрих-пунктирную) и окрашенную в черный цвет.

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

Приведенный выше код в браузере отобразится вот так:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

Это не очень красиво, но показывает, как работает CSS.

Активное обучение: Пишем наш первый CSS

Сейчас мы дадим вам возможность написать свой первый CSS. Вы можете сделать это, используя поле ввода, расположенное ниже, и увидеть это на живом редактируемом примере. У нас есть некоторые простые элементы HTML, а также некоторые свойства CSS. Так же, как показано выше, попробуйте добавить простые  объявления в CSS, чтобы определить стиль HTML.

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

Как на самом деле работает CSS?

Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:

  1. Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model). DOM представляет документ в память компьютера и применяет к содержимому стили.
  2. Браузер отображает содержимое DOM.

О DOM

DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочекк текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношенями с другими DOM-узлами. Элементы могут иметь потомков, а потомки могут иметь братские элементы.

Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это то место, в котором CSS встречается с содержимым документа.

Представление DOM 

Вместо долгих и скучных объяснени давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.

Давайте рассмотрим представленный HTML-код:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

В DOM узел, соответствующий элементу, <p> является родителем. Его дети являются текстовыми узлами и соответствует элементу <span>. Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

После интерпретации DOM-дерева браузером на выходе мы получим вот это:

Применение CSS к DOM

Скажем, мы добавили некоторые CSS-стили к нашему документу. Как и ранее, HTML, выглядит следующим образом:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Мы применим к нему этот CSS:

span {
  border: 1px solid black;
  background-color: lime;
}

Браузер проанализирует HTML и создаст DOM из него, а затем разберется с CSS. Поскольку у нас есть только одно правило, описывающее селектор span,то оно будет применено ко всем узлам документа с этим селектором. На выходе получим это.

Как применить ваш CSS к вашему HTML

Есть три различные варианта применить CSS к HTML-документу, которые встречаются чаще всего. Здесь мы рассмотрим каждый из них.

Внешняя таблица стилей

Вы уже сталкивались с  внешней таблицей стилей в этой статьей, но называли ее не так. Внешняя таблица стилей это отдельный файл с расширением .css, в котором и хранится CSS. Вы ссылаетесь на него из HTML при помощи элемента <link>.  HTML при этом выглядит так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Добавим CSS-файл:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

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

Внутренняя таблица стилей

Внутренняя таблица стилей содержится внутри элемента <style> и не требует подключения внешних файлов. Содержится в теге HTML head. HTML с подобным методом подключения стилей выглядит вот так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Это может быть полезно в некоторых ситуациях (возможно, вы работаете с системой управления контентом, где нельзя менять CSS-файлы напрямую), но это не так эффективно, как внешние таблиц стилей. В сайте, в котором больше одной страницы, CSS надо будет  повторять на каждой странице, и при изменении стиля надо будет править во многих местах.

Встроенные стили

Встроенные стили — это объявление CSS, которое применимо только к одному элементу и содержащееся в атрибуте style:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Пожалуйста, не делайте этого без крайней необходимости! Это очень плохо для технического обслуживания (вам, возможно, придется обновлять ту же информацию несколько раз за один документ). Смешение CSS и HTML делает код нечитабельным. Разделяя HTML и стили вы облегчите работу себе в будущем и своим коллегам.

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

Что дальше

На этом этапе вы должны были понять, как работает CSS и как с ним работают браузеры. Далее, вы узнаете о синтаксисе CSS.

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

 Внесли вклад в эту страницу: ezekeli
 Обновлялась последний раз: ezekeli,