# data[].attributes.body
Таблиці стилів в тому чи іншому вигляді існували з зародження SGML в 1970-тих. Каскадні таблиці стилів розроблялися для спрощення процедури додавання інформації про стилі для веб-сторінок.
З розвитком HTML з'явилася можливість використовувати різні механізми для додавання стилів до елементів сторінки. Еволюція HTML дала веб-дизайнерам більше можливостей для створення вигляду сайту, але HTML-код ставав складнішим для написання та зміни. Через різницю у відображення сторінки в різних браузерах збереження стилю сторінки було складним, користувачі мали менше контролю над відображенням контенту.

# data[].attributes.body
CSS має порівняно простий синтаксис і використовує небагато англійських слів для найменування різних складових стилю.
Стилі складаються зі списку правил. Кожне правило має один або більше селектор (англ. selector) та блок визначення (англ. declaration block). Блок визначення складається з оточеного фігурними дужками списку властивостей.
Властивості в списку оформлюються у вигляді назва властивості, двокрапка (:), значення, крапка з комою (;).
Приклад:

# data[].attributes.attachment_link.provider_name
Веб-документація MDN

# data[].attributes.attachment_link.readable_text
Cascading Stylesheets (CSS, каскадні таблиці стилів) - це код, що використовується для стилізації сайту. В Основах CSS надається інформація про стилізацію для початківців. Ми відповімо на такі питання: яким чином зробити текст чорним або червоним? Як розмістити контент саме у тому місці, де ми хочемо його бачити на сторінці? Як задавати фонові кольори та зображення?

Що таке CSS насправді?

Як і HTML, CSS не є справжньою мовою програмування. Це лише мова таблиць стилів, яка дозволяє задавати стилі обраним елементам у HTML документах. Наприклад, для того, щоб вибрати усі параграфи на HTML сторінці та зробити колір їхнього тексту червоним, потрібно написати такий CSS:

p {
  color: red;
}

Давайте спробуємо: вставте ці три рядки CSS у новий файл у вашому редакторі коду, та збережіть файл як style.css у вашій теці styles.

Окрім того, нам необхідно приєднати CSS до вашого HTML документу, інакше стилі CSS не вплинуть на те, як браузер відобразить HTML документ. (Якщо ви щойно приєдналися до нашого проекту, прочитайте Роботу з файлами та Основи HTML щоб дізнатися, що необхідно зробити на початку.) Відкрийте ваш файл index.html та вставте наступний рядок кудись у head, між тегами <head> і </head>:

Збережіть index.html та відкрийте його у вашому браузері. Ви побачите щось на зразок наведеного зображення:

Якщо текст ваших параграфів став червоним, вітаємо! Ви щойно написали ваш перший CSS!

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

Подивимось на попередній CSS більш детально:

Вся структура називається " rule set" - "набір правил" (частіше, скорочено, "правило"). Його частини також мають свої назви:

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 елементи даного типу

Селектор по ID

Елемент на сторінці, який має заданий ID (на HTML сторінці не може бути декілька елементів з однаковими ID).

Селектор по класу

Елементи на сторінці, які мають задані класи (на сторінці можуть бути елементи з однаковими класами).

Селектор по атрибуту

Елементи на сторінці із вказаним атрибутом

Селектори псевдокласів

Вказані елементи, але тільки тоді, коли вони знаходяться у вказаному стані, наприклад, коли на них наводять курсор миші.

a:hover
Вибирає<a>, але тільки коли курсор миші вказує на посилання.

Інші селектори ви можете побачити на сторінці Selectors guide.

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

Дослідивши деякі основи CSS, давайте додамо більше правил та інформації в файл style.css, щоб зробити наш приклад більш привабливим. Для початку покращимо вигляд наших шрифтів та тексту.

1. В першу чергу, знайдіть збережений вами вивід з сайту Google Fonts, який ви зберегли раніше. Додайте елемент <link ... > у head файлу 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 body (, , та ). Також відцентруємо текст нашого заголовку та встановимо висоту строки і проміжок між літерами нашого контенту, щоб зробити його зручнішим для читання.
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

Ви можете змінювати числа як завгодно, щоб ваш дизайн виглядав так, як ви хочете. Загалом він буде виглядати так:

Блоки, блоки, і ще раз про блоки

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

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

padding, простір лише навколо контенту (наприклад, навколо параграфу тексту)

border, суцільна лінія (межа), яка розташована ззовні від padding

margin, простір навколо зовнішнього елемента

В цьому розділі ми також використовуємо:

width (ширина елемента)

background-color, колір за контентом і padding елемента

color, колір змісту елементу (зазвичай тексту)

text-shadow: встановлює тінь на тексті в середині елемента

display: встановлює режим відображення елемента (не хвилюйтесь про це покищо)

Отже, давайте почнемо та додамо ще кілька CSS на нашу сторінку! Додайте ці нові правила до нижньої частини сторінки, і не бійтеся експериментувати зі зміною значень, щоб побачити, як це працює.

Зміна кольору сторінки

html {
  background-color: #00539F;
}

Це правило встановлює фоновий колір для всієї сторінки . Змініть код кольору на будь-який інший, що ви обрали при плануванні свого сайту.

Задання стилів для body

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

Тепер стилі для елемента body. Тут багато параметрів, тому давайте розглянемо по-одному:

width: 600px; - цей параметр робить body шириною завжди 600 пікселів.

margin: 0 auto; - Коли ви встановлюєте два значення у властивостях margin або padding, перше значення впливає на верхню та нижню сторони елемента (зроблено 0 в даному випадку), та друге значення лівої та правої сторони (тут auto - це спеціальне значення, яке рівномірно розподіляє доступний горизонтальний простір між лівою і правою стороною ). Ви можете також використовувати один, три або чотири значення, як задокументовано тут.

background-color: #FF9500; - як і раніше, це встановлює фоновий колір елемента . Ми використали якийсь червоно-оранжевий для body, а не синій для елемента , але не бійтеся експериментувати, підставляючи інші кольори.

padding: 0 20px 20px 20px; - ми маємо чотири значення, встановлені для padding, щоб зробити трохи простору навколо нашого вмісту. Цього разу ми не встановлюємо padding зверху від body (значення 0px), а встановлюємо 20 пікселів ліворуч, знизу та праворуч. Значення встановлено в такому порядку: вгорі, праворуч, внизу та ліворуч.

border: 5px solid black; - встановлює безперервну чорну рамку border товщиною 5 пікселів з усіх боків body.

Позиціонування та стиль заголовка головної сторінки

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

Ви, мабуть, помітили, що у верхній частині body є чималенький розрив . Це відбувається тому, що браузери застосовують деякий навіть незавершена веб-сторінка мала базову читабельність. Щоб позбутися розриву, ми перекриваємо стандартний стиль за умовчанням до елемента (серед інших), навіть якщо ви не застосували жодного CSS! Це може здаватись поганою ідеєю, але ми хочемо, щоб margin: 0;. стиль за замовчуванням, встановлюючи

Далі ми встановили верхній та нижній відступи (padding) заголовку до 20 пікселів і зробили заголовок текстом того ж кольору, що і колір фону (background) всієї сторінки html .

Одна досить цікава властивість, яку ми використовували тут, це - text-shadow, яка застосовує текстову тінь до текстового вмісту елемента. Її чотири значення означають наступне :

Перше значення пікселя встановлює горизонтальне зміщення тіні від тексту - як далеко вона рухається: негативне значення має перемістити тінь вліво .

Друге значення пікселя встановлює вертикальне зміщення тіні від тексту - як далеко вона рухається в такому випадку; негативне значення має рухати тінь вгору .

Третє значення пікселя встановлює радіус розмивання тіні - більша величина означатиме більш розмиту тінь .

Четверте значення встановлює базовий колір тіні .

Знову ж таки, спробуйте експериментувати з різними значеннями, щоб побачити, що ви можете придумати .

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

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

Нарешті, ми будемо центрувати зображення, щоб воно виглядало краще. Ми могли б використати Зображення, з іншого боку, є margin: 0 auto як і раніше для body, але ми також можемо зробити дещо інше. Елемент body є блочним рівнем, тобто він займає місце на сторінці, і до нього можуть бути додані поля та інші значення відступів . вбудованими елементами (inline), тобто вони не можуть мати відступів. Таким чином, щоб застосувати поля до зображення, ми повинні надати поведінку блочного рівня зображенню за допомогою display: block;.

Примітка: Не хвилюйтесь, якщо ще не зрозуміли display: block; і відміну між блочним рівнем / вбудованим (inline) елементом. Далі ви будете вивчати CSS більш глибоко. Ви можете дізнатись більше про різні доступні значення відображення на нашому сайті display reference page.

Висновок

Якщо ви дотримувалися всіх інструкцій у цій статті, ви повинні отримати сторінку, яка виглядає приблизно так (ви можете також переглянути нашу версію тут):

Якщо ви застрягли, ви можете завжди порівняти свою роботу з нашим закінченим прикладом коду на Github.

Тут ми, дійсно, лише зачепили поверхневі знання із CSS. Щоб дізнатись більше, перейдіть до Вивчення теми CSS.

# data[].attributes.attachment_link.description
Як і HTML, CSS не є справжньою мовою програмування. Це лише мова таблиць стилів, яка дозволяє задавати стилі обраним елементам у HTML документах. Наприклад, для того, щоб вибрати усі параграфи на HTML сторінці та зробити колір їхнього тексту червоним, потрібно написати такий CSS:

# data[].attributes.body
1)Інформація про стиль для усього сайту або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
2)Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на принтер, стиль для мобільних пристроїв;

# data[].attributes.attachment_link.title
Основы CSS - #1 -  Введение

# data[].attributes.body
Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.
CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.

# data[].attributes.headline
В прикладі викор

# data[].attributes.body
В прикладі використано 7 правил, селектори p, h2, .note, p.warning, #paragraph1, a:hover та #news p. Приклад властивості: color: red, де властивості з назвою color присвоєно значення red.

# data[].attributes.headline
CSS - основна технологія всесвітньої павутини

# data[].attributes.subject
CSS - основна технологія всесвітньої павутини