Лабораторна робота №7

Основи CSS

Тема: створення веб-сторінок з використанням CSS

Мета: вивчити основи CSS для правильного розуміння структури сучасних веб-сайтів та
принципів створення невеликих веб-проектів.

Теоретичні відомості
Каскадні таблиці стилів (CSS) — це мова таблиць стилів, яка використовується для опису
подання документа, написаного в HTML або XML (включаючи такі діалекти XML, як SVG,
MathML або XHTML). CSS описує, як елементи мають відображатися на екрані, на папері, у
мовленні чи на інших носіях.
CSS є однією з основних мов відкритого Інтернету та стандартизована для веб-браузерів
відповідно до специфікацій W3C. Раніше розробка різних частин специфікації CSS
виконувалася синхронно, що дозволяло версії останніх рекомендацій. Можливо, ви чули про
CSS1, CSS2.1 або навіть CSS3. Ніколи не буде CSS3 або CSS4; замість цього все тепер CSS без
номера версії.
Після CSS 2.1 обсяг специфікації значно розширився, а прогрес у різних модулях CSS
почав настільки відрізнятися, що стало більш ефективним розробляти та випускати рекомендації
окремо для кожного модуля. Замість створення версій специфікації CSS, W3C тепер періодично
робить знімок останнього стабільного стану специфікації CSS і прогресу окремих модулів.
Модулі CSS тепер мають номери версій або рівні, наприклад CSS Color Module Level 5.
CSS (каскадні таблиці стилів) — це код, який стилізує веб-вміст. За допомогою CSS ви
зможете розв’язати наступні види задач: як зробити текст червоним? Як зробити так, щоб вміст
відображався в певному місці макета (веб-сторінки)? Як я можу прикрасити свою веб-сторінку
фоновими зображеннями та кольорами?

Принципи використання CSS

Як і HTML, CSS не є мовою програмування. Це також не мова розмітки. CSS – це мова
таблиць стилів. CSS – це те, що ви використовуєте для вибіркової стилізації елементів HTML.
Наприклад, цей CSS виділяє текст абзацу, встановлюючи червоний колір:
p{
color: red;
}
Розглянемо детальніше структуру CSS елемента:

Вся структура називається набором правил. (Термін набір правил часто називають просто
правилом.) Зверніть увагу на назви окремих частин:
– Селектор (Selector). Це назва елемента HTML на початку набору правил. Він визначає
елемент (елементи), до якого потрібно стилізувати (у цьому прикладі елементи <p>). Щоб
стилізувати інший елемент, змініть селектор.
– Декларація (Declaration). Це єдине правило, як color: red;. Він визначає, до яких
властивостей елемента потрібно додати стиль.
– Властивості (Properties). Це способи, за допомогою яких можна стилізувати елемент
HTML. (У цьому прикладі color є властивістю елементів <p>.) У CSS ви вибираєте, на які
властивості ви хочете вплинути в правилі.
– Значення властивості (Property value). Праворуч від властивості – після двокрапки –
вказано значення властивості. Це вибирає один із багатьох можливих виглядів для даної
властивості. (Наприклад, крім червоного існує багато значень кольорів.)
Зверніть увагу на інші важливі частини синтаксису:
– Окрім селектора, кожен набір правил має бути укладено у фігурні дужки. ({})
– У кожній декларації ви повинні використовувати двокрапку (:), щоб відокремити
властивість від її значення або значень.
– У кожному наборі правил ви повинні використовувати крапку з комою (;), щоб
відокремити кожне оголошення від наступного.
 Ви також можете вказувати декілька елементів для встановлення одного спільного стилю.
Для цього розділіть селектори через кому. Наприклад:
p,
li,
h1 {
color: red;
}

Типи селекторів
Існує багато різних типів селекторів. У наведених вище прикладах використовуються
селектори елементів, які вибирають усі елементи заданого типу. Але ми також можемо зробити
більш конкретний вибір. Ось деякі з найпоширеніших типів селекторів:

Назва селектора Що він обирає Приклад

Селектор елементів (іноді його Усі елементи HTML
називають тегом або типом
селектора)
ID селектор
Селектор класу
Селектор атрибутів
Селектор псевдокласів
p
зазначеного типу. обирає <p>
Елемент на сторінці з #my-id
указаним ID. На даній сторінці обирає <p id="my-id"> or <a
HTML кожне значення id="my-id">
ідентифікатора має бути
унікальним.
Елемент(и) на сторінці з .my-class
указаним класом. На сторінці обирає <p class="my-class"> ТА
може з’являтися декілька <a class="my-class">
екземплярів одного класу.
Елемент(и) на сторінці з img[src]
указаним атрибутом. обирає <img
src="myimage.png"> АЛЕ НІ
<img>
Зазначений(і) елемент(и), але a:hover
лише у вказаному стані. обирає <a>, але лише тоді,
(Наприклад, коли курсор коли вказівник миші наведено
наводиться на посилання.) на посилання.
 Зміна типової поведінки елементів
У шостій лабораторній роботі згадувалося про те, що вам не треба користуватися CSS,
вимагалося лише html. Також там було зазначено, що ви маєте лишити оформлення за
замовчуванням для даних елементів.
У цій лабораторній роботі вам треба з’ясувати, яким чином можна змінити поведінку за
замовчуванням (типову). Для цього спочатку треба визначити, а що є типовою поведінкою?
Внаслідок виконання ЛР№6 ви отримали html документ. Без модифікації форматування він може
і виглядає не дуже добре, проте весь його вміст – читабельний. Заголовки були виділені жирним,
списки мали елементи (або нумерований, або маркований). Вміст стає читабельним внаслідок
того, що будь-який сучасний браузер має внутрішні таблиці стилів, що містять стандартні стилі,
які він застосовує до всіх сторінок за умовчанням; без них увесь текст зійшовся б разом, і нам
довелося б стилізувати все з нуля. Усі сучасні браузери відображають вміст HTML за
замовчуванням майже однаково.
Якщо браузер “побачить” власний набір правил, то він застосує його. Для селекторів, що
не зазначені у цьому наборі він продовжить застосовувати типову поведінку (з вбудованої
таблиці стилів).
У наступних розділах ви побачите, як приєднати власну таблицю стилів та як створювати
різні набори правил.

Як використати створений CSS

Тепер розглянемо, як можна застосувати необхідні властивості селекторів для свого
документа (html сторінки). Для цього створіть новий файл з розширенням css у тій самій теці,
що й ваш html файл (наприклад, styles.css). Щоб зв’язати styles.css з index.html, додайте такий
рядок десь усередині <head> документа html:
<link rel="stylesheet" href="styles.css" />
Цей елемент <link> повідомляє браузеру, що ми маємо таблицю стилів, використовуючи
атрибут rel і розташування цієї таблиці стилів як значення атрибута href.
Зверніть увагу, що якщо файл з таблицею стилів знаходиться у іншій теці – вам треба
застосувати знання про абсолютні та відносні шляхи до файлів, інакше це працювати не буде!
 Створення стилів для html елементів
Першим прикладом для демонстрації буде зміна кольору заголовка першого рівня на
червоний. Усі ці приклади ви можете застосувати до своєї роботи та перевірити результат. Не
забувайте зберігати файл та перезавантажувати сторінку браузера!
Для того, щоб змінити колір заголовків першого рівня нам потрібно обрати селектор
елементів h1 та встановити йому колір:
h1 {
color: red;
}

Для того, щоб обрати всі абзаци, треба скористатися селектором p. Щоб зробити всі абзаци
зеленими, треба використати:
p{
color: green;
}

Ви також можете виділити декілька селекторів для встановлення єдиного правила

форматування. Для цього треба перелічити селектори через кому. Наприклад, можна зробити всі
абзаци та всі елементи списків зеленим:
p,
li {
color: green;
}

Додавання класу
Поки що була продемонстрована стилізація елементів на основі їхніх імен. Це працює,
доки ви хочете, щоб усі елементи цього типу у вашому документі виглядали однаково. Щоб
вибрати підмножину елементів, не змінюючи інші, ви можете додати клас до свого елемента
html і націлити цей клас у свій CSS. Тобто використати селектор класу.
Розглянемо наступний приклад:
 На цьому прикладі видно, що абзаци з однаковим тегом p виглядають по-різному. Це
відбувається тому, що у них різні класи. У CSS це виглядає наступним чином:

Тобто, для додавання нового правила оформлення з використанням селектора класу вам
потрібно:
1. Додати атрибут класу у вашому html коді.
 2. У CSS обрати бажаний клас та встановити властивості. Назва класу повинна
розпочинатися з крапки. Це гарно видно на прикладі.
3. Згодом ви можете застосувати цей клас (з CSS) до будь-якого елементу вашої сторінки,
якщо ви хочете, щоб він мав такий самий вигляд.

Іноді ви побачите правила з селектором, який містить список селектора елемента html
разом із класом:
li.special {
color: orange;
font-weight: bold;
}

Цей синтаксис означає «цільовий будь-який елемент li, який має клас special». Якщо ви це
зробите, ви більше не зможете застосувати клас до <span> або іншого елемента, додавши до
нього клас; вам доведеться додати цей елемент до списку селекторів:
li.special,
span.special {
color: orange;
font-weight: bold;
}

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

Форматування елементів залежно від їхнього розташування в документі

Бувають випадки, коли треба, щоб щось виглядало по-іншому залежно від того, де воно
знаходиться в документі. Існує кілька селекторів, які можуть тут допомогти, але в межах цієї
лабораторної розглянемо лише декілька.
Нехай є наступний документ html:
 <h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span>

and also a <a href="http://example.com">link</a>.</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>

У цьому документі є два елементи <em> — один у абзаці, а інший — у списку. Щоб
вибрати лише <em>, який вкладено в елемент <li>, можна використати селектор, який
називається комбінатором-нащадком, що має форму пробілу між двома іншими селекторами.
li em {
color: rebeccapurple;
}

Цей селектор вибере будь-який елемент <em>, який знаходиться всередині (нащадка) <li>.
Отже, у цьому прикладі документа треба виявити, що <em> у третьому елементі списку тепер
фіолетовий, але той, що знаходиться всередині абзацу, залишився незмінним.
Іншим цікавим випадком є, наприклад, виділення абзацу, який йде безпосередньо після
заголовку першого рівня. Для цього помістіть + (суміжний однорідний комбінатор) між
селекторами. Наприклад:
h1 + p {
font-size: 200%;
}

Внаслідок поєднання вищезазначеного документа html зі створеними правилами, можна

отримати наступне форматування документа:
 Форматування елементів залежно від їх стану
Стан елементів може бути абсолютно різний. Наприклад, про посилання легко сказати: чи
навели на нього курсор? Чи переходили за цим посиланням раніше? Розглянемо, як змінити
форматування залежно від стану.
Коли ми створюємо стиль посилання, нам потрібно націлити елемент <a> (якір). Він має
різні стани залежно від того, чи є він невідвіданим, відвіданим, наведеним курсором, фокусом за
допомогою клавіатури або в процесі клацання (активовано). Можна використовувати CSS для
націлювання на ці різні стани. Наступний CSS приклад позначає невідвідані посилання
рожевим, а відвідані – зеленим:
a:link {
color: pink;
}

a:visited {
color: green;
}
 Ви можете змінити вигляд посилання, коли користувач наводить на нього курсор,
наприклад, видаливши підкреслення, що досягається наступним правилом:
a:hover {
text-decoration: none;
}

Комбінування селекторів і комбінаторів

Варто зазначити, що ви можете комбінувати разом кілька селекторів і комбінаторів.
Наприклад:
/* selects any <span> that is inside a <p>, which is inside an <article> */
article p span {
}

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */
h1 + ul + p {
}

Також можна комбінувати кілька типів. Наприклад:

body h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}
 Порядок виконання лабораторної роботи
Для успішного виконання лабораторної роботи вам потрібно:
1. Прочитати теоретичні відомості.
2. Створити документ протоколу у будь-якому зручному для вас текстовому процесорі чи
видавничій системі (Google Docs, MS Word) та назвати його відповідним чином
ЛР№7_АС-2XX_Прізвище.
3. Оформити титульний аркуш.
4. Уважно прочитати та виконати індивідуальне завдання. Записати умову індивідуального
завдання до себе в документ.
5. Переконатися у тому, що під час виконання завдання ви не допустили розповсюджених
помилок, які виділені у жовтому фоні в теоретичному матеріалі.
6. Написати висновки до роботи у форматі Що зроблено? На основі чого зроблено? Як це
може бути використано в майбутньому?
7. Письмово відповісти на контрольні запитання.
8. Бажано додати зміст протоколу.
9. Зробити експорт протоколу в PDF, прикріпити файл протоколу на перевірку у Систему
(EL).
 Індивідуальне завдання
Візьміть до уваги свою попередню лабораторну роботу. Ви маєте веб-сайт з відсутньою
сторінкою hobby.html. Додайте її. Вона має містити html:
1. опис свого хобі;
2. картинку;
3. підписи до картинок
4. бічну панель за допомогою aside.
Вам також треба додати CSS властивості. Для цього створіть новий CSS файл та
підключіть його до вашого html (у теорії описано як саме). Обов’язково використайте всі
наступні позиції щонайменше один раз (окрім останнього):
– Застосуйте CSS для селектора елементів. Це може бути заголовок, стаття та ін.
– Застосуйте CSS для класу. Ви можете додати клас до html як до вже наявних об’єктів, так
і до нових, створених на ваш розсуд. Наприклад, ви можете додати спеціальну статтю –
висновки та застосувати до неї клас review. Відповідно, додати висновки до цієї сторінки.
– Застосуйте CSS для селектора псевдокласів. Найпростіший приклад цього – зміна
оформлення посилань залежно від їх стану. Про лінки та їх псевдокласи добре описано у
статті: https://www.w3schools.com/css/css_link.asp
– За бажанням! Застосуйте будь-яку комбінацію селекторів або комбінаторів
Ви можете використати вищезазначені позиції для будь-яких елементів, на ваш розсуд.
Обґрунтуйте свій вибір. Обов’язково зверніть увагу на зручність використання вашим веб-
сайтом: його можуть відвідувати користувачі ПК з великим екраном, мишою; користувачі на
ноутбуках з сенсорною панеллю; користувачі з мобільних пристроїв з невеликим екраном та
сенсором. Розроблені стилі не мають зашкодити доступності та зручності використанню у
порівнянні з типовою поведінкою.
 Контрольні запитання
Будьте уважні при відповіді на питання. У дужках подано рекомендований обсяг відповіді.
Цього достатньо для того, щоб стисло відповісти на поставлене запитання. Написаний великий
обсяг тексту замість рекомендованого обсягу може бути сприйнятий як використання засобів
штучного інтелекту (ChatGPT та подібні).
1. Чи належить CSS до мови програмування? До мови розмітки? (вкажіть необхідне, або
поясніть чому твердження стосовно приналежності до даних мов – невірне) (обсяг
відповіді – 1-2 речення)
2. Для чого потрібен CSS? В яких випадках варто застосовувати CSS, а в яких – атрибути
html елементів? (до 5 речень)
3. Навіщо потрібен селектор класу, якщо існує селектор елемента? Наведіть приклади, коли
його використання доречне. (навіщо потрібен- 3-5 речень, декілька речень на приклади)
4. Чи можна одноразово розв’язати задачу виділення тексту першого абзацу статті (напр.,
іншим кольором), чи варто застосовувати html атрибути для кожного такого елемента?
Зверніть увагу, що додавати клас до кожного першого абзацу буде незручно та призведе
до повторного написання одного і того самого коду без необхідності. (3-5 речень)
5. Чи можна зручно виділити абзац, який слідує безпосередньо після заголовку другого
рівня? Обґрунтуйте свій вибір. (3-5 речень)