1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
title: Що таке CSS?
slug: Learn/CSS/First_steps/Що_таке_CSS
tags:
- CSS
- Вступ до CSS
- Модулі
- Навчання
- Синтаксис
- Специфікація
- новачок
translation_of: Learn/CSS/First_steps/What_is_CSS
---
<div>{{LearnSidebar}}</div>
<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Передумови:</th>
<td>Основна комп'ютерна грамотність, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">встановлено базове програмне забезпечення</a>, основні знання про <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">робота з файлами,</a> та HTML базовий (вивчыть <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>)</td>
</tr>
<tr>
<th scope="row">
<p>Мета:</p>
</th>
<td>To learn what CSS is.</td>
</tr>
</tbody>
</table>
<p>У вступі до модуля HTML ми розглянули, що таке HTML, і як він використовується для розмітки документів. Ці документи можна прочитати у веб-браузері. Заголовки виглядатимуть більше, ніж звичайний текст, абзаци перериваються на новий рядок і мають пробіл між ними. Посилання кольорові та підкреслені, щоб відрізняти їх від решти тексту. Що ви бачите, це стилі браузера за замовчуванням - дуже основні стилі, які браузер застосовує до HTML, щоб переконатися, що він буде в основному читабельним, навіть якщо автор сторінки не вказав явного стилю.</p>
<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
<p>Однак Інтернет був би нудним місцем, якби всі веб-сайти виглядали так. За допомогою CSS ви можете точно контролювати, як виглядають елементи HTML у браузері, представляючи свою розмітку, використовуючи будь-який дизайн, який вам подобається.</p>
<h2 id="Для_чого_CSS">Для чого CSS?</h2>
<p>Як ми вже згадували раніше, CSS - це мова, яка визначає, як документи подаються користувачам - як вони оформляються, викладаються тощо.A <strong>document</strong> is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.</p>
<p>Подання документа користувачеві означає перетворення його в форму, яку можна використовувати вашій аудиторії. {{Глосарій ("браузер", "Браузери")}}, як {{Глосарій ("Mozilla Firefox", "Firefox")}}, {{Глосарій ("Google Chrome", "Chrome")}} або { {Глосарій ("Microsoft Edge", "Edge")}} призначений для візуального представлення документів, наприклад, на екрані комп'ютера, проекторі чи принтері.</p>
<div class="blockIndicator note">
<p><strong>Примітка</strong>: Іноді браузер називається {{Glossary ("Агент користувача", "Агент користувача")}}, що в основному означає комп'ютерну програму, яка представляє людину всередині комп'ютерної системи. Браузери - це основний тип агента користувача, про який ми думаємо, коли говоримо про CSS, однак, це не єдиний. Доступні й інші користувацькі агенти - такі, які перетворюють документи HTML та CSS у PDF-файли для друку.</p>
</div>
<p>CSS можна використовувати для дуже базового стилю тексту документа - наприклад, для зміни кольору та розміру заголовків та посилань. Його можна використовувати для створення макета - наприклад, перетворення одного стовпця тексту в макет з основною областю вмісту та бічною панеллю для пов'язаної інформації. Його навіть можна використовувати для таких ефектів, як анімація. Перегляньте посилання в цьому пункті для конкретних прикладів.</p>
<h2 id="Синтаксис_CSS">Синтаксис CSS</h2>
<p>CSS є мовою на основі правил - ви визначаєте правила, що визначають групи стилів, які слід застосовувати до певних елементів або груп елементів на вашій веб-сторінці. Наприклад, "Я хочу, щоб основний заголовок на моїй сторінці відображався як великий червоний текст".</p>
<p>У наведеному нижче коді показано дуже просте правило CSS, яке дозволило б досягти описаного вище стилю:</p>
<pre class="brush: css">h1 {
color: red;
font-size: 5em;
}</pre>
<p>Правило відкривається за допомогою {{Глосарій ("CSS Selector", "Selector")}}. Це вибирає HTML-елемент, який ми будемо стилювати. У цьому випадку ми створюємо заголовки рівня першого рівня ({{htmlelement ("h1")}}).</p>
<p>Потім у нас є набір фігурних брекетів { }. Всередині буде одна чи кілька декларацій, які мають форму властивостей і значень пар. Кожна пара визначає властивість елемента (-ів), який ми вибираємо, а потім значення, яке ми хотіли б надати властивості.</p>
<p>Перед двокрапкою ми маємо властивість, а після двокрапки - значення. CSS {{Глосарій ("властивість / CSS", "властивості")}} мають різні допустимі значення, залежно від того, яке властивість задано. У нашому прикладі ми маємо властивість кольору, яка може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">значення кольорів</a>. У нас також є <code>font-size</code> влыстивість. Ця властивість може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">розмір одиниць</a>.</p>
<p>Таблиця стилів CSS міститиме багато таких правил, написаних один за одним.</p>
<pre class="brush: css">h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}</pre>
<p>Ви побачите, що швидко засвоюєте деякі значення, тоді як інші вам потрібно буде шукати. Окремі сторінки властивостей на MDN дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забудете, або хочете знати, що ще можна використовувати як значення.</p>
<div class="blockIndicator note">
<p><strong>Примітка</strong>: Ви можете знайти посилання на всі сторінки властивостей CSS (разом з іншими функціями CSS), перелічені в розділі MDN <a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>. Крім того, вам слід звикнути до пошуку "mdn css-feature-name" у своїй улюбленій пошуковій системі, коли вам потрібно дізнатися більше інформації про функцію CSS. Наприклад, спробуйте шукати "mdn color" і "mdn font-size"!</p>
</div>
<h2 id="CSS_Модулі">CSS Модулі</h2>
<p>Оскільки існує так багато речей, які можна стилювати за допомогою CSS, мова розбивається на модулі. Ви побачите посилання на ці модулі під час вивчення MDN та багато сторінок документації, організованих навколо певного модуля. Наприклад, ви можете ознайомитися з посиланням на MDN на модуль "Фони та межі", щоб дізнатися, яке його призначення, а також які різні властивості та інші особливості він містить. Ви також знайдете посилання на специфікацію CSS, яка визначає технологію (див. Нижче).</p>
<p>На цьому етапі вам не потрібно занадто хвилюватися про структурування CSS, однак це може полегшити пошук інформації, якщо, наприклад, ви знаєте, що певне властивість, можливо, знайдеться серед інших подібних речей і є тому, ймовірно, в тій же специфікації.</p>
<p>Для конкретного прикладу повернемося до модуля «Фони та межі» - ви можете подумати, що це має логічний сенс для <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> та <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> властивості, що визначаються в цьому модулі. І ти будеш прав.</p>
<h3 id="CSS_специфікація">CSS специфікація</h3>
<p>Усі технології веб-стандартів (HTML, CSS, JavaScript тощо) визначені в гігантських документах, що називаються специфікаціями (або просто "специфікаціями"), які публікуються організаціями зі стандартів (наприклад, {{глосарій ("W3C")}}, {{глосарій ("WHATWG")}}, {{глосарій ("ECMA")}} або {{глосарій ("Хронос")}}) і точно визначте, як повинні поводитися ці технології.</p>
<p>CSS не відрізняється - він розроблений групою в межах W3C під назвою <a href="https://www.w3.org/Style/CSS/">CSS Робоча група</a>. Ця група складається з представників постачальників браузерів та інших компаній, які мають інтерес до CSS. Є й інші люди, відомі як запрошені експерти, які виступають незалежними голосами; вони не пов'язані з організацією-членом.</p>
<p>Робоча група CSS розробляє або уточнює нові функції CSS. Іноді тому, що конкретний браузер зацікавлений у певних можливостях, інший раз через те, що веб-дизайнери та розробники просять про функцію, а іноді тому, що сама Робоча група визначила вимогу. CSS постійно розвивається, доступні нові функції. Однак, головне в CSS - це те, що всі дуже наполегливо працюють, щоб ніколи не змінювати речі таким чином, щоб зламати старі веб-сайти. Веб-сайт, побудований у 2000 році, використовуючи доступний тоді обмежений CSS, і сьогодні повинен використовуватись у веб-переглядачі!</p>
<p>Як новачок у CSS, ймовірно, ви знайдете специфікації CSS непосильними - вони призначені для інженерів використовувати для впровадження підтримки функцій в агентах користувачів, а не для веб-розробників, які читають, щоб зрозуміти CSS. Багато досвідчених розробників швидше звертаються до документації MDN або інших навчальних посібників. Однак варто знати, що вони існують, розуміючи взаємозв'язок між CSS, який ви використовуєте, підтримкою браузера (див. Нижче) та специфікаціями.</p>
<h2 id="Підтримка_браузера">Підтримка браузера</h2>
<p>Після того, як CSS буде визначено, він може бути корисним для нас лише при розробці веб-сторінок, якщо один або кілька браузерів реалізували його. Це означає, що код написаний, щоб перетворити інструкцію з нашого CSS-файлу на щось, що може бути виведене на екран. Ми розглянемо цей процес докладніше на уроці <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a>. Всі браузери незвично одночасно реалізовувати функцію, тому зазвичай існує розрив, де можна використовувати частину CSS в деяких браузерах, а не в інших. З цієї причини корисність перевірити стан реалізації. На кожній сторінці властивостей на MDN ви можете побачити статус об’єкта, який вас цікавить, тож ви можете сказати, чи зможете ви ним користуватися на веб-сайті.</p>
<p>Далі йде таблиця даних compat для властивості CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> .</p>
<p>{{Compat("css.properties.font-family")}}</p>
<h2 id="Що_далі">Що далі</h2>
<p>Тепер, коли ви зрозуміли, що таке CSS, перейдемо до <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a> де ви можете почати самостійно писати деякі CSS.</p>
<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
<h2 id="In_this_module">In this module</h2>
<ol>
<li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Що таке CSS?</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Як структурується CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Використовуйте свої нові знання</a></li>
</ol>
|
