Каскадні таблиці стилів

Модуль «Веб-технології»
Урок 8
Аналізуємо. Обговорюємо
1. Що таке контент, що він містить?
2. Дайте означення гіпертексту
3. Що таке HTML?
4. Чому необхідно вказувати тип кодування?
5. Як називають команди мови розмітки?
6. Які невід’ємні компоненти структури сторінки?
7. З якими командами HTML ви ознайомились?
Поміркуйте
• Уявіть, що ви розробили сайт, що містить десять
сторінок, у якому необхідно змінити колір тла і
розмір шрифту та змінити вигляд меню. Ваші дії?
Трохи історії
• Пост Марка Андріссена
(розробника браузерів Mosaic і
Netscape) в 1994-му: «оскільки
не існує способу стилізації
веб-сайтів з використанням
HTML, єдине, що можна
сказати веб-розробникам, які
ставлять питання про
графічний дизайн -
«Перепрошую, але ви у
халепі».
 Трохи історії
• З розвитком Всесвітньої павутини з’явилося багато ідей
оформлення веб сторінки.
• Існувало кілька конкуруючих мов для макетування веб сторінок,
створених різними розробниками, серед яких були Пей-Ян Вей,
Марк Андріссен і Хокон Віум Лі.
Трохи історії
• Пей-Ян Вей створив
графічний браузер
ViolaWWW в 1991-му. Він
вмонтував власну мову
стилів безпосередньо в
браузер
Трохи історії
• Замість того, щоб створювати окрему мову, призначену
для стилізації веб-сторінок Марк Андріссен розширив
HTML, додавши в нього нестандартні теги, які можна
було використовувати для цілей веб-дизайну.

• Приклад тегу Марка Андріссена

• У 1994 році норвезький
учений Хокон Віум Лі
запропонував концепцію
відділення дизайну сайта від
його вмісту за допомогою
каскадних таблиць стилів.
• Каскадні таблиці стилів (англ. Cascading
Style Sheets, або скорочено CSS) — спеціальна мова, що
використовується для опису зовнішнього вигляду
сторінок, написаних мовами розмітки даних.
• Основна ідея CSS в тому, щоб відокремити дизайн
документа від його вмісту.
• CSS відповідає за оформлення і зовнішній вигляд
HTML-коду, тоді як HTML - за зміст та логічну
структуру документа.
• Конструкція СSS, яка відповідає за зовнішній вигляд
певного елемента HTML називається
CSS-правилом.
• Всі CSS-правила складаються з селектора і блоку
оголошень. Блок оголошень містить одне або кілька
оголошень розташованих у фігурних дужках. Всередині
блоку оголошень знаходяться пари CSS-властивість:
значення, розділені крапкою з комою.
• Кожне правило починається із селектора (покажчика), що
вказує на ті HTML-елементи, до яких застосовується CSS-
правило.
• Саме в блоці оголошень установлюються правила
відображення вибраних нами елементів, визначаються їхні
властивості — розмір, колір, відступи, поля, розташування
на екрані (позиціонування) тощо.
• Селектор дозволяє звернутись до одного або кількох
HTML-елементів
Види селекторів
• Ідентифікатор (унікальний
селектор)
• Клас
• тег
• універсальний селектор
• псевдо-елементи
• Псевдо-класи
 Класи
• Якщо необхідно визначити стиль таким чином,
щоб один і той самий елемент в різних
випадках відображався по-різному, то на
допомогу приходять класи.
• Клас описується в вигляді
.ім’я_класу {властивості}
Для присвоєння класу заданому тегу
використовується властивість
class = "ім'я_класу"
id селектори (ідентифікатори,
унікальні селектори )
• подібні до класу крім одного –
ідентифікатор може мати одне єдине
унікальне ім'я в усьому документі.
• У файлі CSS ім'я вказується зі знаком
решітки на початку, а до потрібного
елемента додається атрибут id = " "
Універсальний селектор
• позначається * – відповідає будь-
якому HTML елементу
Псевдо-елементи
• - використовуються для додавання вмісту, яке
генерується за допомогою властивості content,
наприклад :
• first-letter - вибирає першу букву кожного абзацу
Псевдо-класи
• практично не зафіксовані за HTML-тегами.
• Вони дозволяють застосувати CSS-
правила до елементів при здійсненні події
або підпорядковуються певним правилам.
Приклад псевдокласу:
hover – будь-який елемент, до якого
підведено мишу
Варіанти підключення CSS-коду
до
HTML-документу.
• Стилі, які підставляються в рядок
(inline)
• Внутрішні (вбудовані)
• Зовнішні (зв’язані)
Inline стилі
• (стилі, які підставляються в рядок).
• Додавання CSS-правила в HTML-тег за допомогою
атрибута style.
• Усередині атрибута style можна написати кілька CSS
оголошень, розділених крапкою з комою, фігурні дужки
не використовуються.
• Inline-стилі змішують вміст документа і його дизайн,
тому його краще використовувати як виключення, у
випадку, коли елемент зустрічається лише один раз,
але вимагає особливого оформлення
Приклад використання inline-
стилю
 Внутрішня таблиця стилів
(internal style sheets) розташовуються
безпосередньо в HTML-документі і застосовуються
лише до нього.
CSS код записується в HTML документі за
допомогою тегу <style>, який розміщується у блоці
<head>.
Зазвичай використовується, коли існує лише одна
проста HTML-сторінки і немає сенсу створювати
додатковий файл
Приклад використання внутрішньої
таблиці стилів
Зовнішні або зв’язані стилі
(external style sheets) найбільш поширений спосіб – це
винесення CSS коду в окремий файл з
розширенням .css та підключенням за допомогою
тегу <link> , який знаходиться виключно всередині
елемента <head>.
Як тільки браузер знаходить у документі цей тег, він
одразу завантажить з сайту CSS-файл та застосує до
документа стилі, що містяться в ньому.
Приклад використання зовнішньої
таблиці стилів
 Цікаво
• Існує четвертий спосіб
підключення таблиць за
допомогою директиви @import,
яка дозволяє об’єднувати кілька
таблиць стилів в одну, цей спосіб
свого часу був досить
популярним, проте наразі втрачає
своїх позиції, оскільки сторінка не
завантажиться доки браузер не
завантажить файл CSS повністю.
• Це негативно позначається на
швидкості завантаження сайту і
відповідно гальмує роботу
 Каскадність CSS
- механізм, завдяки якому до елементу HTML-
документа може застосовуватися більш ніж
одне правило CSS.
• Правила можуть виходити з різних джерел: із зовнішньої
(зв’язаної) та внутрішньої (вбудованої) таблиці стилів, від
механізму наслідування, від батьківських елементів, від
класів і ID, від селектора тега, від атрибута style тощо.
Оскільки в цих випадках часто відбувається конфлікт
стилів, була створена система пріоритетів: в кінцевому
підсумку застосовується той стиль, який виходить від
джерела з більш високим пріоритетом,
• каскадність в CSS - це здатність стильових правил
накладатися один на одного, перезаписувати і
змішуватися. Підсумковий стиль елемента, який видно в
браузері - це комбінація кількох послідовно застосованих
стилів.
Пріоритетність стилів
1. Якщо в таблиці є однакові селектори, то виконуватись буде той,
який записано останнім. Наприклад
p{color: grey;} p{color: pink;} – колір абзацу буде рожевим
2. Якщо для одного елемента задано стиль і в зовнішній, і у
внутрішній таблицях, то пріоритет віддається стилю в тій таблиці,
яка знаходиться нижче в коді. Наприклад, спочатку в <head>
підключили зовнішню таблицю, а потім за допомогою тега <style>
додали внутрішню таблицю. Браузер відобразить стилі
внутрішньої таблиці.
Пріоритетність за спаданням
• inline-стилів,
• ідентифікаторів,
• класів
• тегів
Правила форматування CSS
1. Кожна властивість – в окремому рядку
2. Кожен селектор – в окремому рядку
3. Порядок опису стилів
• Позиціонування (position, left/right/top/bottom, float, clear,z-index.)
• Дисплей і блочне моделювання (display, width, height, margin, padding…
• Колір background,
• Текст list-style-type, overflow, color font…
• Інші
Назва Короткий опис модуля
модуля
CSS- CSS-позиціювання (positioning) дозволяє вказати, де з'явиться блок елемента, а
позиціонува вільне переміщення (floating) переміщує елементи до лівого або правого краю
ння блоку-контейнера, дозволяючи решті вмісту «обтікати» його.
CSS-текст керують перетворенням вихідного тексту в форматований і перенесенням
рядків.
CSS шрифт вибір шрифту (font-family),його насиченість(font-weight), ширина (font-stretch)
накреслення( font-style) та розмір( font-size)
CSS- містять властивості, які відповідають за зовнішній вигляд гіпертекстових
посилання посилань HTML-документа. Посилання являють собою основний спосіб навігації
по сайту, тому застосування CSS-стилів для оформлення покращить їх
візуальне сприйняття.
CSS-списки CSS-списки - набір властивостей, що відповідають за оформлення списків.
Зазвичай списки використовуются при створенні навігаійних панелей сайту. За
допомогою стандартних CSS-властивостей можна змінити зовнішній вигляд
маркера списку, додати зображення для маркера, а також змінити місце
розташування маркера
CSS-тло CSS-тло - властивості, що додають тло для будь-якого HTML-елемента. Кожен
елемент має шар тла, який може бути прозорим (за замовчуванням),
кольоровою заливкою та зображенням
CSS color Описує значення, які дозволяють визначати колір та непрозорість html-
елементів, а також значення властивості color.
Аналізуємо. Обговорюємо
1. Що таке каскадні таблиці стилів? Назвіть причини їхньої
появи.
2. Опишіть синтаксис CSS-правила.
3. Що таке селектор? Які бувають селектори?
4. Наведіть пріоритети виконання таблиць стилів.
5. Опишіть способи підключення стилів. Проаналізуйте, коли
і який спосіб краще використовувати.
Завдання для
самостійного виконання
1. Створіть файл style.css
2. Наберіть послідовність команд вказану на слайді.
3. Збережіть файл у тій же теці, де збережено файл
index.html, створений на попередньому уроці
4. Відкрийте файл index.html у редакторі коду,
додайте у блок <head> наступну команду.
<link rel="stylesheet" type="text/css" href="style.css">
5. Збережіть модифікований файл.
6. Перегляньте результат браузером.
7. Проаналізуйте, як відобразив браузер змінений
файл
Домашнє завдання (на вибір учня)
• Оберіть із наведеної раніше таблиці СSS-модуль. Розробіть
презентацію з докладним розбором та прикладами використання
правил CSS.
• Перегляньте дослідження Зака Блума давніх способів стилізації веб-
сторінок (Джерело
https://eager.io/blog/the-languages-which-almost-were-css/). Зробіть
повідомлення.
• Опрацюйте §11.8