From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../css/first_steps/getting_started/index.html | 262 ++++++++++ .../learn/css/first_steps/how_css_works/index.html | 163 +++++++ files/ru/learn/css/first_steps/index.html | 54 +++ .../using_your_new_knowledge/index.html | 104 ++++ .../index.html" | 528 +++++++++++++++++++++ .../index.html" | 130 +++++ 6 files changed, 1241 insertions(+) create mode 100644 files/ru/learn/css/first_steps/getting_started/index.html create mode 100644 files/ru/learn/css/first_steps/how_css_works/index.html create mode 100644 files/ru/learn/css/first_steps/index.html create mode 100644 files/ru/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 "files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" create mode 100644 "files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" (limited to 'files/ru/learn/css/first_steps') diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..30d495ad25 --- /dev/null +++ b/files/ru/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,262 @@ +--- +title: Начало работы с CSS +slug: Learn/CSS/First_steps/Getting_started +tags: + - Beginner + - CSS + - Learn + - Классы + - Обучение + - Селекторы + - Синтаксис +translation_of: Learn/CSS/First_steps/Getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+ +

В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, Базовое програмное обеспечение, базовые знания работа с файлами, и базовые знания HTML (смотрите Введение в HTML.)
Задача:Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS.
+ +

Начнём с HTML

+ +

Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своем компьютере. Сохраните приведенный ниже код как index.html в папке на вашем компьютере.

+ +
<!doctype html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+    <title>Начало работы с CSS</title>
+</head>
+
+<body>
+
+    <h1>Я заголовок первого уровня</h1>
+
+    <p>Это абзац. В нём есть <span>элемент span</span>,
+а также <a href="http://example.com">ссылка</a>.</p>
+
+    <p>Это второй абзац. Он содержит <em>акцентирующий</em> текст.</p>
+
+    <ul>
+        <li>Элемент один</li>
+        <li>Элемент два</li>
+        <li>Элемент <em>три</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Примечание: Если Вы читаете это на устройстве или в среде, где Вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.

+
+ +

Добавление CSS в наш документ

+ +

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

+ +

Создайте файл в той же папке, что и документ HTML, и сохраните его как styles.css. Расширение .css показывает, что это файл CSS.

+ +

Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри{{htmlelement("head")}} HTML документа:

+ +
<link rel="stylesheet" href="styles.css">
+ +

Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут rel, и местоположение этой таблицы стилей в качестве значения атрибута href. Вы можете проверить, работает ли CSS, добавив правило в styles.css. Используя Ваш редактор кода, добавьте следующее в ваш файл CSS:

+ +
h1 {
+  color: red;
+}
+ +

Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдет, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдет, внимательно проверьте, правильно ли Вы ввели всё.

+ +

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

+ +

Стилизация HTML-элементов

+ +

Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путем нацеливания на элемент selector — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, Вы должны использовать селектор p. Чтобы сделать все абзацы зелёными, Вы должны использовать:

+ +
p {
+  color: green;
+}
+ +

Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:

+ +
p, li {
+    color: green;
+}
+ +

Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Изменение поведения элементов по умолчанию

+ +

Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.

+ +

Однако Вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <ul> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:

+ +
li {
+  list-style-type: none;
+}
+ +

Попробуйте добавить это в свой CSS сейчас.

+ +

Свойство list-style-type — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для list-style-type и Вы найдете интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.

+ +

Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка Вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение square.

+ +

Добавление класса

+ +

Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока Вы хотите, чтобы все элементы этого типа в Вашем документе выглядели одинаково. В большинстве случаев это не так, и Вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространенный способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.

+ +

В своем HTML-документе добавьте Атрибут class ко второму пункту списка. Ваш список теперь будет выглядеть так:

+ +
<ul>
+  <li>Элемент один</li>
+  <li class="special">Элемент два</li>
+  <li>Элемент <em>три</em></li>
+</ul>
+ +

В Вашем CSS Вы можете выбрать класс special к любому элементу на странице, чтобы он выгядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Сохраните и обновите, чтобы увидеть результат.

+ +

Вы можете захотеть, чтобы <span> в абзаце также был оранжевым и жирным. Попробуйте добавить класс "special", затем перезагрузите страницу и посмотрите, что получится.

+ +

Иногда Вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы Вы сделали это, Вы бы больше не смогли применить класс к <span> или другому элементу, просто добавив к нему класс; Вы должны добавить этот элемент в список селекторов:

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

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

+ +

Стилизация элементов на основе их расположения в документе

+ +

Есть моменты, когда Вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут Вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <em> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <em> который вложен в элемент <li>, я могу использовать селектор под названием descendant combinator (комбинатор-потомок), который просто принимает форму пробела между двумя другими селекторами.

+ +

Добавьте следующее правило в таблицу стилей.

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Этот селектор выберет любой элемент <em>, который находится внутри (потомка) <li>. Итак, в Вашем примере документа Вы должны найти, что <em> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.

+ +

Ещё можно попробовать стилизовать абзац, когда он идет сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите +  (соседний братский комбинатор) между селекторами.

+ +

Попробуйте также добавить это правило в таблицу стилей:

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

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

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Примечание: Как Вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье Селекторы позже в нашем курсе.

+
+ +

Стилизация элементов на основе состояния

+ +

Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <a> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещенные ссылки зелёного цвета.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

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

+ +
a:hover {
+  text-decoration: none;
+}
+ +

В приведённом ниже примере Вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведенные выше, и теперь понимаю, что розовый цвет довольно легкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли Вы сделать ссылки жирным шрифтом?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Мы удалили подчеркивание на нашей ссылке при наведении курсора. Вы можете удалить подчеркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте Вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчеркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с Вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.

+ +
+

Примечание:  Вы часто будете видеть упоминание о доступности в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.

+ +

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

+ +

Простой HTML-документ, как правило, доступен каждому — когда Вы начинаете оформлять этот документ, важно, чтобы Вы не сделали его менее доступным.

+
+ +

Сочетание селекторов и комбинаторов

+ +

Стоит отметить, что Вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:

+ +
/* выбирает любой <span> внутри <p>, который находится внутри <article>  */
+article p span { ... }
+
+/* выбирает любой <p>, который идет сразу после <ul>, который идет сразу после <h1>  */
+h1 + ul + p { ... }
+ +

Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Это будет стиль любого элемента с классом special, который находится внутри <p>, который приходит сразу после <h1>, который находится внутри <body>. Уф!

+ +

В оригинальном HTML, который мы предоставили, единственный элемент в стиле <span class="special">.

+ +

Не беспокойтесь, если это покажется сложным — Вы скоро начнете понимать это, когда будете писать больше на CSS.

+ +

Завершение

+ +

В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако Вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.

+ +

На следующем уроке мы рассмотрим структуру CSS.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как структурирован CSS
    4. +
  4. Как работает CSS
    5. +
  5. Используя ваши новые знания
    6. +
diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..a0ff236f45 --- /dev/null +++ b/files/ru/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,163 @@ +--- +title: Как работает CSS +slug: Learn/CSS/First_steps/How_CSS_works +tags: + - Beginner + - CSS + - DOM + - DOM дерево + - Learn + - Начинающий + - Обучение + - дерево +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу.

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

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

+ +

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

+ +
    +
  1. Браузер получает HTML-страницу (например, из Интернета)
    2. +
  2. Преобразует {{Glossary("HTML")}} в {{Glossary("DOM")}} (Document Object Model). DOM (или DOM-дерево) - это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.
    3. +
  3. Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео ... и  стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.
    4. +
  4. После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определенным «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)
    5. +
  5. Дерево представления (render tree) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.
    6. +
  6. Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)
    7. +
+ +

Диаграмма демонстрирует этот процесс.

+ +

+ +

DOM-дерево

+ +

DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится {{Glossary("Node/DOM","DOM node")}} в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.

+ +

Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве Ваши таблицы стилей и код встречаются. Когда вы начнете работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.

+ +

Как представлено DOM-дерево

+ +

Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.

+ +

Возьмём следующий пример:

+ +
<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"
+
+ +

Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:

+ +

{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}

+ + + +

Добавление CSS в DOM

+ +

Допустим, мы добавили таблицу стилей к нашему примеру:

+ +
<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. Так как у нас всего одно правило,  браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов <span>. После этого информация будет отображена на экране.

+ +

Новый результат:

+ +

{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}

+ +

В статье Отладка CSS мы будем использовать браузер DevTools для отладки CSS.

+ +

Что происходит, когда браузер не понимает CSS?

+ +

В предыдущем уроке я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, Вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?

+ +

— Да ничего: браузер просто пропустит это!

+ +

Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если Вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.

+ +

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

+ +

Ниже я использовал британское написание слова color, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.

+ +
+
<p> I want this text to be large, bold and blue.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* некорректное написание свойства цвета */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём Вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.

+ +

Это хорошо применяется, если Вы хотиете использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают calc() как значение. Я добавлю резерв — знаение в px, затем задам ширину с помощью функции calc(), равной 100% - 50px. Старые браузеры используют пиксельное значение, потому что не распознают calc(). Новые браузеры используют calc() так как эта строка появляется позже в каскаде.

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

Завершение

+ +

Вы почти закончили модуль; осталось только одно. В следующей статье Вы попрактикуетесь в использовании ваших новых знаний.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как структурирован CSS
    4. +
  4. Как работает CSS
    5. +
  5. Использование ваших новых знаний
    6. +
diff --git a/files/ru/learn/css/first_steps/index.html b/files/ru/learn/css/first_steps/index.html new file mode 100644 index 0000000000..2e0ed35d7e --- /dev/null +++ b/files/ru/learn/css/first_steps/index.html @@ -0,0 +1,54 @@ +--- +title: Введение в CSS +slug: Learn/CSS/First_steps +tags: + - Beginner + - CSS + - Landing + - Learn + - first steps + - Введение + - Начинающий +translation_of: Learn/CSS/First_steps +--- +
{{LearnSidebar}}
+ +

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

+ +

Необходимые условия

+ +

Перед запуском этого модуля вы должны иметь:

+ +
    +
  1. Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).
    2. +
  2. Базовая рабочая среда, описанная в разделе Установка базового программного обеспечения, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе Работа с файлами.
    3. +
  3. Основное знакомство с HTML, как описано в модуле Введение в HTML.
    4. +
+ +
+

Примечание: Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.

+
+ +

Руководства

+ +

Этот модуль содержит следующие статьи, в которых вы ознакомитесь со всеми основными теориями CSS и сможете проверить некоторые навыки.

+ +
+
Что такое CSS?
+
{{Glossary("CSS")}} (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.
+
Начало работы с CSS
+
В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
+
Как структурирован CSS
+
Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; Вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.
+
Как работает CSS
+
Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берет CSS и HTML и превращает их в веб-страницу.
+
Использование ваших новых знаний
+
С учетом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам шанс сделать это.
+
+ +

Смотрите также

+ +
+
Intermediate Web Literacy 1: Intro to CSS
+
Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле Введение в CSS. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.
+
diff --git a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html new file mode 100644 index 0000000000..015846a9ff --- /dev/null +++ b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,104 @@ +--- +title: Использование ваших новых знаний +slug: Learn/CSS/First_steps/Using_your_new_knowledge +tags: + - Beginner + - CSS + - Learn + - Playground + - Начинающий + - Обучение +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +
+
С учетом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам возможность сделать это.
+
+ + + + + + + + + + + + +
Необходимые знания:Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите Введение в HTML).
Задача:Попрактиковать использование CSS с вашими новыми знаниями.
+ +

Перед началом

+ +

Вы можете писать код в редакторе ниже или скачать исходный код, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как CodePen, jsFiddle или Glitch.

+ +
+

Примечание: Если у вас не получается, попросите о помощи — читайте раздел {{anch("Помощь")}} с кодом ниже.

+
+ +

Работа с CSS

+ +

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

+ + + +

Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.

+ +

Измените значения свойств CSS, чтобы поменять внешний вид биографии.

+ +
    +
  1. Сделайте заголовок розовым, используя CSS-цвет hotpink.
    2. +
  2. Значение свойства заголовка {{cssxref("border-bottom")}} сделайте пунктирным (10px dotted) и добавьте цвет purple.
    3. +
  3. Примените к подзаголовку <h2> курсив.
    4. +
  4. Установите цвет #eeeeee для фона {{cssxref("background-color")}} маркированного списка с контактными данными и значение 5px solid purple для {{cssxref("border")}}. Используйте {{cssxref("padding")}}, чтобы отделить содержимое блока от границы.
    5. +
  5. Сделайте ссылки зелёными при наведении.
    6. +
+ +

У Вас должно получиться примерно как-то так:

+ +

Screenshot of how the example should look after completing the assessment.

+ +

После этого попробуйте использовать селекторы, не указанные здесь, но описанные в Руководстве по CSS. Не бойтесь ошибок — практикуйтесь!

+ +

Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Помощь

+ +

Если Вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:

+ +
    +
  1. Загрузите Ваш код на CodePen, jsFiddle или Glitch.
    2. +
  2. Напишите пост с просьбой о помощи и / или оценке на форуме MDN. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В Вашем посте должны быть: +
      +
    • Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".
      • +
    • Описание того, что Вам нужно, — к примеру, что Вы уже пробовали, что у Вас не получается и Вам нужна помощь.
      • +
    • Ссылка на ваш код в онлайн-редакторе.
      • +
    • Ссылка на страницу о помощи, чтобы мы смогли помочь Вам с вашим вопросом.
      • +
    +
    3. +
+ +

Что дальше?

+ +

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

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как струтурирован CSS
    4. +
  4. Как работает CSS
    5. +
diff --git "a/files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" "b/files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" new file mode 100644 index 0000000000..d2c60edcfb --- /dev/null +++ "b/files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" @@ -0,0 +1,528 @@ +--- +title: Как структурирован CSS +slug: Learn/CSS/First_steps/Как_структурирован_CSS +tags: + - Beginner + - CSS + - HTML + - Learn + - Комментарии + - Обучение + - Свойство + - Структура + - значения + - отступ + - селектор + - сокращение +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, Базовое програмное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS
Задача:Подробно узнать основные синтаксические структуры CSS.
+ +

Применение CSS к вашему HTML

+ +

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

+ +

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

+ +

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

+ +

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

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Привет!</h1>
+    <p>Это мой первый опыт в CSS</p>
+  </body>
+</html>
+ +

Файл CSS может выглядеть следующим образом:

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

Атрибут href элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.

+ +

В приведенном выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:

+ +
<!-- Файл находится внутри под-директории styles, находящейся в текущей директории -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Файл — внутри под-директории styles внутри под-под-директории general и так далее -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Вверх на один уровень в директории, затем направиться в под-директорию styles -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

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

+ +

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.

+ +

Таким образом, HTML будет выглядеть вот так:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Привет!</h1>
+    <p>Это мой первый опыт в CSS</p>
+  </body>
+</html>
+ +

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

+ +

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

+ +

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

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Привет!</h1>
+    <p style="color:red;">Это мой первый опыт в CSS</p>
+  </body>
+</html>
+ +

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

+ +

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

+ +

Игра с CSS в этой статье

+ +

Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Пишите сюда свой код</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Пишите сюда свой код */
+
+p {
+  color: red;
+}
+ +

Затем, когда вы столкнетесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

+ +

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

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

+ +

Читайте дальше и получайте удовольствие!

+ +

Селекторы

+ +

Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.

+ +

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

+ +
h1  /* это селектор тегов */
+a:link  /* это селектор ссылок */
+.manythings  /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */
+#onething  /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */
+*  /* уневерсальный селектор */
+.box p  /* селектор потомков */
+.box p:first-child  /* селектор потомков + селектор псевдоклассов */
+h1, h2, .intro  /* пречисление селекторов */
+
+ +
+

Примечание: Вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

+
+ +

Спецификация

+ +

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

+ +
<p class="special">Какого же я цвета?</p>
+ +

В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объвление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

+ +

Попрактикуйтесь сами — добавьте два правила для параграфа p { ... } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

+ +

Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.

+ +

Свойства и значения

+ +

Если говорить в общем, CSS строится на двух его составляющих:

+ +
+
Свойства 
+
Определяют, какую характеристику вы желаете изменить (например, font-size, width, background-color).
+
+ +
+
Значения 
+
Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
+
+ +

На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.

+ +

A declaration highlighted in the CSS

+ +

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

+ +

A highlighted declaration block

+ +

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1, другое для селектора p. Правило для h1 выделено.

+ +

The rule for h1 highlighted

+ +

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).

+ +

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

+ + + +
+

Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

+
+ +
+

Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.

+
+ +

Функции

+ +

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

+ +
+
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

В результате получим это:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

+ +

В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} rotate().

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

Результат этого кода будет:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

+ + + +

@правила

+ +

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:

+ +
@import 'styles2.css';
+ +

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиа-запросы, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

+ +

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

+ +

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

+ +

Стенография

+ +

Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются стенографическими свойствами, — они позволяют установать несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

+ +

К примеру, это строка (комментарий не в счёт):

+ +
/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
+   в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
+   значения добавляются в порядке верх(низ)–право–лево.
+   В двузначных стенограммах значения добавляются
+   от верхнего/нижнего края к левому/правому краю */
+padding: 10px 15px 15px 5px;
+ +

делает то же самое, что и эти четыре, вместе взятые:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+
+ +

или эти:

+ +
padding-block-start: 10px
+padding-inline-end: 15px;
+padding-block-end: 15px;
+padding-inline-start: 5px;
+ +

в то время как строка:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

делает то же, что и эти строки:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

+ +

Добавьте вышеупоминутые объвления в ваш код. Попробуйте изменить значения и посмотреть на результат.

+ +
+

Осторожно: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.

+
+ +

Комментарии

+ +

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

+ +

Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.

+ +
/* Работаю над основными элементами */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Позволяет определить размер шрифта. На широких экранах
+     больше размер шрифта для удобства чтения */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Работаю над элементами, вложенными в DOM  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p{
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

+ +

Отступы

+ +

Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.

+ +

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

+ +
body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; background-style: none}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

+ +

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

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

А такие объявления не действительны:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

+ +

Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.

+ +

Что дальше?

+ +

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

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как структурирован CSS
    4. +
  4. Как работает CSS
    5. +
  5. Использование ваших новых знаний
    6. +
diff --git "a/files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" "b/files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" new file mode 100644 index 0000000000..6b5bdf8924 --- /dev/null +++ "b/files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" @@ -0,0 +1,130 @@ +--- +title: Что такое CSS? +slug: Learn/CSS/First_steps/Что_такое_CSS +tags: + - Beginner + - CSS + - Learn + - Введение в CSS + - Начинающий + - Обучение + - Синтаксис + - Спецификации +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First steps")}}
+ +

{{Glossary("CSS")}} (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

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

В модуле Основы HTML мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчеркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.

+ +

+ +

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

+ +

Для чего нужен CSS?

+ +

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

+ +

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространенный язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.

+ +

Представление документа пользователю означает преобразование его в форму, используемую Вашей аудиторией. {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.

+ +
+

Примечание: Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.

+
+ +

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

+ +

Синтаксис CSS

+ +

CSS — это язык на основе правил: Вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на Вашей веб-странице. Например:

+ +

«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».

+ +

В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

Правило открывается с помощью {{Glossary("CSS Selector", "селектора")}} . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ({{htmlelement("h1")}}).

+ +

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

+ +

Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство color, которое может принимать различные цветовые значения. У нас также есть свойство font-size. Это свойство может принимать различные значения размера, как и свойства.

+ +

Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Вы обнаружите, что Вы быстро изучаете некоторые значения, тогда как другие Вам нужно искать. Страницы отдельных свойств в MDN дают Вам быстрый способ поиска свойств и их значений, когда Вы забыли или хотите узнать, что ещё Вы можете использовать в качестве значения.

+ +
+

Примечание: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, Вы должны привыкнуть к поиску "MDN css-feature-name" в Вашем бразере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

+
+ +

CSS-модули

+ +

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

+ +

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

+ +

Для конкретного примера давайте вернемся к модулю Свойства фона и границ — Вы можете подумать, что это логично для свойств background-color и border-color, которые будут определены в этом модуле. И Вы правы.

+ +

Технические характеристики CSS

+ +

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.

+ +

CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашенные эксперты, которые выступают как независимые голоса; они не связаны с членами организации.

+ +

Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!

+ +

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

+ +

Поддержка браузера

+ +

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

+ +

Ниже приведена диаграмма данных для CSS свойства font-family:

+ +

{{Compat("css.properties.font-family")}}

+ +

Что дальше?

+ +

Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к Началу работы с CSS, где Вы можете начать писать CSS самостоятельно.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как структурирован CSS
    4. +
  4. Как работает CSS
    5. +
  5. Использование ваших новых знаний
    6. +
-- cgit v1.2.3-54-g00ecf