GTGM - Lecture - 05-6 - Fin - 2023-Ukr PDF

Гіпертекст і гіпермедіа
CSS
Лекція 5
1
Гіпертекст і гіпермедіа
провідний лектор 1-го потоку
Єрохін Андрій Леонідович
лектор 2-го потоку

Доцент кафедри програмної інженерії, кандидат технічних наук
Груздо Ірина Володимирівна
2
https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRrGX5b2pMS_8bg3l5a
6ylWiyb_5nLGZRe4CQ&usqp=CAU
Лекція №5
1. CSS
2. Верстка
3
CSS
https://goldbusinessnet.com/wp-content/uploads/2012/10/sintaksis-css.jpg
4
HTML + CSS
• HTML + CSS = веб-сторінка

• HTML відповідає за структуру і зміст
• CSS відповідає за зовнішній вигляд
4
Стилі у веб. CSS
CSS 0,2 1994 - "таблиці каскадних стилів" Хокон Віум Лі
CSS 1 1996. Дозволяє динамічно переформатувати документ CSS 2
1998 - зворотня сумісність
CSS 2,1 версія (2011), відповідає версії HTML 4,01
CSS3 2010 - "таблиці каскадних стилів третього покоління"

створення анімованих елементи без використання JS. Що дозволяють
вирішити проблеми з перенесенням тексту і обрізанням тексту в
межах вмісту
CSS 4 2011 (поєднується з HTML 5,2) CSS є мова розмітки, містить набір
властивостей для визначення вигляду і поведінки документа
CSS LEVEL 5 2017 (поточна версія - 19 March 2021) Новим на цьому

5
рівні є каскадні шари https://www.w3.org/TR/css-cascade-5/
Стилі у веб. CSS
Для перевірки підтримки

браузером веб - стандартів, в тому
числі і різних частин стандарту
CSS, був розроблений тест Acid.
https://img.discogs.com/_mv2t7Vo20km1pYCQn-
http://acid3.acidtests.org 05Dd272o = /fit-in/355x355/filters:strip_icc ()

Format (jpeg) :mode_rgb () Quality (90)
/discogs-images/R- 667240-1145380991.gif.jpg
6
Після появи CSS деякі теги і атрибути стали
небажаними (застарілими)
8
небажані
9
Способи підключення CSS
• < Style >. < / Style >
• < Link rel = "Stylesheet" href = "style.css" / >
• <p style="color: red">Абзац з літерами

червоного кольору</p>
• @import
<style type="text/css">
@import url(styles/reset.css);
@import url(styles/form.css);
...
p{
color: #333333;
text-align: justify;
} 10
...
</style>
Базовий синтаксис CSS
селектор властивість значення
Відповідність стандартам
https://encrypted-tbn0.gstatic.com/images? q = 11
tbn%3AANd9GcQ37Jd4BGb8vuYpSlo0ZZW3txfMYdQOKldjw4CgbOc6YhNrUcva&usqp = CAU
Базовий синтаксис CSS
У будь-якого CSS правила може бути прописано відразу кілька селектор. Як потрібно
їх буде читати при цьому?
Завжди справа наліво, тобто починати з самого Близького до круглої фігурної скобці.
Правила стилів, з сукупності яких складається весь CSS код, підказує браузеру, як
повинен виглядати даний конкретний елемент який відображається на сторінці.
Ось складові частини кожного правила каскадних таблиць стилів:

1. Селектор вказує на те, до якого HTML тегом слід застосувати даний набір властивостей,
який полягає в фігурні дужки.
2. Властивості і їх значення. В наведеному на скріншоті прикладі це color, визначальне
кольорове оформлення тексту, і Font - Size, задає розмір шрифту.
Всі властивості і значення відокремлюються один від одного двокрапкою,
а між блоками "властивість значення" ставиться крапка з комою. Після останнього блоку
перед що закриває фігурної дужкою також не забороняеться ставити крапку з комою, як,
Втім, і залишати всі пропуски, які ніяк не впливають на працездатність правил. Втім,
крапку з комою в кінці набору властивостей та прогалини зазвичай опускають з
метою скорочення коду CSS.
12
Способы визначення
CSS
1. Перевизначення стиля за допомогою тега <style>
безпосередньо в документе
<style> текст опису стиля </style>

ім’я_об’єкта {властивість: значення; властивість: значення…}
Приклад:
<html>
<head>
<style>
body {font-size: 14pt}
</style>
</head> …
mediu
CSS xx-small x-small small large x-large xx-large
m 13
HTML 1 2 3 4 5 6 7
<style>
a {color: black} // чорний колір гіперпосилань
.samesize{font-size: 12pt}
розмір шрифта для усіх об’єктів, у яких один із
атрибутів class="samesize"
</style>
14
2. Розміщення опису стилю в самому
тегові
<ім’я_тега style=" властивість: значення; …

властивість: значення ">
Приклад:
<h1 style = ‘ background: silver '>
15
Форма запису
Приклад -Розширена форма запису :

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }
Приклад -Компактна форма запису:

td {
background: olive;
color: white;
border: 1px solid black;
}
16
3. Імпорт опису стилю в документ
із зовнішнього файлу
Опис стилю може зберігатись в зовнішньому текстовому

файлі,
в якому зберігається набір рядків з описувачами формату:
Файл:
css.htm або
ім’я_стилю.css
17
Посилання на опис стилю, який розміщено за межами
документа, може здійснюватись двома способами:
1) за допомогою помощью тега <link>
Контейнер <link> призначено для вказівки відносних

зв’язків між документами
Атрибути:
<link rel="URL''>
<link rev="URL">
<link type="text/CSS"
або "text/javascript"
rel="url" або "stylesheet"
href="url">
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css">
18
...
</head>
2) безпосередній імпорт стилю за допомогою оператора
@ import
Імпорт стилів можна здійснити або всередину тега

<style>, або всередину зовнішнього файлу, який сам описує
стиль
@import "file.css";
@import url("file.css");
Стиль, який імпортується, можна також перевизначити через

атрибут тега <style>.
@import "print-styles.css" print;

@import "screen-styles.css" screen;
19
Імпорт CSS @ import
Типи носіїв та їх опис
Тип Опис
all
Усі типи. Це значення використовується за замовчуванням.
Мовні синтезатори та програми для відтворення тексту вголос.

aural
Сюди, наприклад, можна зарахувати мовні браузери.
Пристрої, засновані на системі Брайля, призначені для сліпих
braille
людей.
handheld Налагоджені комп'ютери та аналогічні їм апарати.
print Друкуючі пристрої на зразок принтера.
projection Проектор.
screen Екран монітора.
tv Телевізор.
21
Всі правильні способи використання @import
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
21
main.css
/ Підключення "reset"
@import "reset.css";
// Налаштування за замовчуванням:
@import "config.css";
/*
Main
*/
body {
color: $main_color;
}
21
<!DOCTYPE html>
<html>
<head>
<title> Заголовок документа </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=Lobster');
.p1 {
font-family: 'Coiny', cursive;
}
.p2 {
font-family: 'Lobster', cursive;
}
</style>
</head>
<body>
<h2> приклад властивості @import</h2>
<p class="p1"> Правило @import дозволяє імпортувати правила стилів з інших
таблиць стилів.</p>
<p class="p2"> Правило @import також підтримує медіа-запити.</p>
</body> 21
</html>
Використання тега <style>
Тег <style> може використовуватись як самостійний контейнер або

бути атрибутом іншого контейнера
Якщо тег <style> використовується як самостійний, то він має
наступний синтаксис:
<style>
selector {атрибут: значення атрибута;…}
</style>
Зазвичай його розміщують в розділі <head>…</head>
...
p{
color: #333333;
text-align: justify;
}
24
...
</style>
В описі стиля зазвичай задають
- стилі для тегів html
- стилі для класів об’єктов (задаються атрибутом

class)
- стилі для об’єктов із заданим унікальним

ідентифікатором (для цього використовується
атрибут id, який має унікальне значення)
- стилі для класів тега <a>

25
Атрибут class дозволяє застосувати однакове
оформлення до різнотипних об’єктів
Якщо необхідно задавати однакові стилі неоднорідним

тегам розмітки, то їх перераховують через кому:
h1, h2, h3. myorigin{color: green}
26
Вкладені (каскадні) визначення стилів:
ім’я_контейнера1 ім’я_контейнера2 … ім’я_контейнераN {…}
де N – показник ступеня вкладеності
Приклад:
<ul>
<li><a href…><img src=…></img></a>
<li>…
<li>…
</ul>
Описувач стилю
ul li a img {src: url} 27
Використання ідентифікатора id
Ідентифікатор (називають також "ID селектор") визначає
унікальне ім 'я елемента, яке використовується для зміни
його стилю і звернення до нього через скрипти.
# Назви {свойство1: значення; свойство2: значення; . }
< Head >

< Style >
# my_id1 {background Color Orange}
< / Style >
< / Head >
…
< H2 ID = "my_id1" > I AM A knure Student < /h2 >
24
Використання
ідентифікатора id
<! DOCTYPE HTML >
< HTML >
< Head >
< Meta charset = "utf 8" >
< Title > ідентифікатори < / Title >
< Style > # help {
position: absolute; /* Абсолютна позиціонування */
left: 160px; /* Становище елемента від лівої границі */
top: 50px; /* Положення від верхнього краю * /
width: 225px; /* Ширина блоку */
padding: 5px; /* Поля навколо тексту */
background: # f0f0f0; /* Колір тіла */}
< / Style >
< / Head >
< Body >
< div ID = "help" > цей елемент допомагає у тому випадку, якщо ви
перебуваєте в усвідомленні того факту, що абсолютно не
розумієте, хто і як вам може допомогти. Саме в цей момент ми і
підказуємо, що допомогти вам ніхто не зможе. < / div > < / Body
> < / HTML > 25
Псевдокласи та псевдоелементи
Псевдокласи та псевдоелементи
Зазвичай стилі CSS застосовують до тих елементів веб-
сторінки, які видно в її вихідному коді. Але існують випадки,
коли необхідно створити стиль для певного стану елемента
(наприклад, зовнішній вигляд відвідується посилання або вид
посилання при наведеному на неї курсор), а також для
елемента, який чітко не позначений в структурі сторінки.
Прикладом такого елементу може бути перший символ в
абзаці або перша строка.
За допомогою псевдокласів в CSS можна встановлювати
стиль для вже існуючих елементів веб-сторінки, який буде
застосовуватися у разі якихось дій користувача.
Psevdoelementy ж відрізняються тим, що можуть визначати
стиль неіснуючого вмісту, а також чітко не позначених
елементів.
26
Визначення стилів гіперпосилань за
допомогою псевдокласу контейнера
<a>
Псевдокласи тега <a>
link
active – активне посилання,
visited – відвідане посилання,
hover – маршрутизатор у фокусі
Приклад:
a:link {color:black}
a:hover { color: red }
27
Псевдо-класи для обробки посилань:
: any-link і : local-link
Завдяки цим псевдо-класами, ми будемо мати більше контролю над стилями
посилань. Перший:: any-link (тимчасове ім'я, може бути змінено) - об'єднує
визначення a: link і a: visited в одне так, що вам не доведеться писати:
a: link,
a: visited { color:
red;
}
Тепер не важливо, чи є посилання відвідується чи ні. У неї буде стиль
звичайного посилання:
a: any-link { color:
red;
}
Другий псевдо-клас: local-link - більш цікавий. Їм можна, наприклад, дати свій
стиль посиланням, що вказує на вашу особисту сторінку, залишивши всі інші
посилання недоторканими:
nav: local-link {
text-decoration: none;
28
Завдяки цьому псевдо-класу, посилання, що вказують на поточну сторінку, не матимуть
підкреслення, тим самим, відрізняючись від сталевих, що знаходяться в меню або шляху.
Ось ще один приклад використання:
: Not (: local-link (0)) {
color: red;
}
Це правило буде застосовано до всіх зовнішніх посилань. (Можна додати до них, скажімо,
іконку або фонове зображення за вашим бажанням)
Як можна бачити, в цьому останньому прикладі: local-link використовується з параметром.
Число в дужках визначає частину в URL шляху, по якому будуть відбуватися зіставлення
кожного знайденого посилання.
Звучить трохи незрозуміло, але все простіше, ніж здається:
nav: local-link (0) {
color: red;
}
color: green;
}
color: blue;
}
color: yellow;
}
color: gray; 29
}
Припустимо, що поточна адреса сторінки: end3r.com/2020/01/20/some-title, і у вас є такі
посилання в меню:
Home [http://end3r.com/]
2020 [http://end3r.com/2020/]
January 2020 [http://end3r.com/2020/01/]
20 January 2020 [http://end3r.com/2020/01/20/]
Article [http://end3r.com/2002/01/20/some-title/]
Перше посилання буде червоною, друга зеленої, третя синьою, четверта - жовтою, а
п'ята - сірої.
Час-визначаючі псевдо-класи:: past,: current,: future
Ці псевдо-класи дуже зручні для користувачів програм читання тексту з екрану. Всього
лише однієї CSS рядком можуть бути оформлені окремі, що озвучуються в даний момент
слова (чому то, відразу згадується караоке):
p: current {
background: yellow;
}
Цей код підсвічує озвучуються слова жовтим фоном.

Друге застосування - це оформлення субтитрів для WebVTT відео формату. Можна,
наприклад, змінювати колір або будь-які інші властивості. Псевдо-класи: past і: future, як
можна здогадатися, відносяться до елементів, які були озвучені раніше, і які будуть
озвучені наступними.
30
Псевдо-клас невизначеного стану:
: indeterminate
У той час, як до оформлення елементів форм може бути застосовано безліч корисних псевдо-
класів, таких як:: enabled,: disabled або: checked, є один новий:: indeterminate. Як всім відомо,
прапорці та перемикачі можуть мати два стани: встановлено та не встановлено. Кожен стан
може бути визначено псевдо-класами: checked - для встановленого і: not (: checked) - для
невстановленого. Але якщо ви хочете оформити елемент, який ще не був використаний. За
фактом, у нього не може бути визначено ні стан встановлений, ні стан не встановлено. У деяких
випадках це буває корисним, наприклад, щоб нагадати користувачеві, що він що-небудь
пропустив. Таким чином, ми можемо стилізувати елементи, які ще не використовувалися і не
мають стану за замовчуванням:
input.checkbox: indeterminate {
background: #ccc;
}
Аналогічним чином можна визначити стан прогрес-бару, якщо його поточний статус невідомий:
progress: indeterminate {
background: #ccc;
}
Можна вказати стан за замовчуванням і описати стиль для нього, щоб вказати користувачеві, що
невідомо, скільки залишилося часу до кінця виконання якогось абстрактного завдання, або це
31
завдання ще не починалося.
Псевдо-класи для деревовидних структур:
: nth-match,: nth-last-match
Ці псевдо-класи вперше з'явилися в «4 Рівні», і вони дуже цікаві. Використовуючи: nth-match, ви можете
добитися набагато більших можливостей, ніж будь-коли раніше. Цікаво, як він працює? Окей, уявіть, що я
візьму псевдо-клас nth-child, який вибирає елементи і об'єднаю його з міццю псевдо-класу: matches, і ви
отримаєте відповідь на своє питання.
Нехай у вас є список посилань, деякі з яких мають клас .active, і ви хочете вибрати тільки парні посилання з
цим класом. Ми можемо використовувати nth-child (even) для вибірки парних елементів, але цього
недостатньо, адже нам потрібні посилання з класом .active. Не підходить і: matches (.active), тому що в
цьому випадку ми вибираємо взагалі всі посилання з класом .active. У цьому випадку нам і допоможе: nth-
match:
li a: nth-match (even of .active) {
color: red;
}
Так, тепер ми можемо вибрати тільки парні посилання з класом .active з усіх елементів.
Це дуже простий приклад. Давайте трохи ускладнити його використанням виразу An + B:
p: nth-match (2n + 1 of .active, .visible, #important) {
color: red;
}
Ця комбінація селектор шукає елементи, використовуючи більш складне вираз. Псевдо-клас

: Nth-last-match
працює так само, як і: nth-match, але починає пошук з кінця DOM дерева.
32
Псевдо-класи:: column,: nth-column,
: nth-last-column
Давайте спробуємо застосувати деякі псевдо-класи для табличних даних. Всі ми знаємо, що
використовувати таблиці для розмітки - не є добре, але от для даних вони підходять відмінно.
HTML таблиці є рядок-орієнтованими, тобто стовпці описуються всередині рядків. Створення
стовпець-орієнтованої таблиці можливо, але тоді у вас не буде єдиних рядків, до того ж рядок-
орієнтовані таблиці більш популярні. Було б корисно мати можливість використовувати CSS стилі
для оформлення, наприклад, окремих колонок в такій таблиці. Скажімо, ви хочете поставити
парних і непарних колонкам свій колір фону. Звичайно, ми можемо використовувати додаткові класи,
або ускладнити розмітку, але за допомогою нових селекторів з «4 Рівня» ми зможемо зробити це
псевдо-класами в пару рядків:
: Column (.total) {
background: red;
}
: Nth-column (even) {
background: blue;
}
Цей невеликий код встановлює червоний фон кожному осередку з класом .total, що знаходиться в
одній колонці, і синьою кожному осередку, що знаходиться в кожній парній колонці таблиці.
Тепер, ми можемо вибирати стовпці точно так же, як і рядки, навіть використовуючи божевільні
правила типу:: nth-column (3n + 2). Тільки пам'ятайте, що колонки оформляються на основі
проходження їх в DOM дереві, а не так, як вони відображаються на сторінці. Зрозуміло, не тільки
таблиці, в кінцевому рахунку, виграють від цих псевдо-класів, стовпчик макети вже на підход3і.3
Псевдокласи
Селектор Приклад Опис

Active a: active Вибір активного посилання
checked input: checked Всі вибрані (класифіковані) елементи input
Empty p: empty Всі елементи p які не мають дочірніх елементів
Focus input: focus Обрати Пункт input який перебуває у фокусі

Вибрати всі елементи input з неправильними
invalid input: invalid
значеннями
Вибрати всі елементи p, які є останнім дочірнім

Last Child P Last Child елементом родителя

Вибрати всі обов 'язкові до заповнення
required input: required
елементи input
39
Псевдоелементи
Синтаксис використання псевдоелементів наступний.
Селектор:Псевдоелемент{Опис правил стилю}
After - Застосовується для вставки призначеного контенту після

елемента. Цей псевдоелемент працює спільно зі
стильовою властивістю content, який визначає вміст для вставки.
Before - за своєю дією before аналогічний псевдоелементу after, але

вставляє контент до елемента.
40
Приклад . Застосування :: after
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
.new::after {
content: " - Новьё!"; /* Добавляем после текста абзаца */
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>
</body>
</html> 41
Приклад . Застосування ::before
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Псевдоелементи </title>
<style>
ul {
list-style: none; /* Ховаємо маркери списку */
}
li::before {
content: "✿"; /* Додаємо символ */
padding-right: 7px; /* Відстань від тексту до маркерів */
color: red; /* Червоний колір маркерів */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li> Крокодил Гена </li>
<li>Шапокляк</li>
<li> Щур Лариса </li>
</ul> 42
</body>
</html>
Батьківський (дочірній) селектор
• Нащадки: html p {.}, body
p
• Дочірні (найближчі нащадки):
div > P, Body > div > p
(зручно використовувати з багаторівневими списками)
43
44
Батьківський (дочірній) селектор:
Цей селектор майже як Швейцарський Армійський ніж, якого дуже чекали, і ось він тут. Найбільш
обговорювана новинка в «селекторної» специфікації «4 Рівня» дає вам небачену раніше міць в роботі з
CSS. Завдяки цьому селектору, можна дуже легко оформляти елементи, не додаючи їм класи або
ідентифікатори. Така особливість може бути супер-корисної при оформленні, наприклад, меню, в якому
немає ніяких класів в розмітці для ідентифікації елементів.
Давайте подивимося на це в дії, використовуючи деякі базові приклади. Нехай, у нас є меню, що
складаються зі списку простих посилань. Ми хотіли б оформити його, але воно повністю генерується на
стороні сервера на php, і у нас немає доступу до коду. Проблема виникне, коли ми захочемо оформити
елемент li активного пункту меню, при тому, що клас .active буде не у елемента li, а у самій посилання.
Відома проблема, чи не так? У такій ситуації самий просто шлях - це перенести клас, який відповідає за
активний пункт, з посилання на елемент li. Але нам це не підходить, тому що доступу до серверного коду у
нас немає.
У нормальній структурі опису правил CSS, ті чи інші властивості застосовуються до останнього елемента. У
правилі ul li a.active - це буде посилання з класом .active, яка знаходиться в елементі li, який знаходиться в
елементі ul. У правилі p span - це буде елемент span, який знаходиться всередині елемента p, і т.д. Завдяки
батьківському селектору, такий порядок може бути порушений:
ul li! a.active {
color: red;
}
Тепер, ми можемо оформити елемент li, навіть якщо активний клас буде у його дитини. При додаванні
батьківського сектора до елементу, ми говоримо, що хочемо оформити саме його, а не останній елемент.
Інший приклад: можна змінити фон сторінки, просто додавши посилання з певним класом в будь-яке місце:
body! header a.styleSwitcher: hover {
background: red; 37
}
• Успадковуються - параметри показу тексту (розмір
шрифту, тип шрифту, колір і т. Д.)
Font - Size, Font - Family, Font Style, Font - Weight,
color.
Наприклад: стилі шрифту для всього документа

задаємо в body {.}
• https://www.w3.org/TR/CSS21/propidx.html
Не успадковуються - розміри, відступи, фони, рамки -
background, border, padding, margin, width, height.
38
Блокові і рядкові елементи
47
В CSS існує два типи елементів: рядковий і блоковий
Блоковий елемент розмітки відображаєтьcя всередині

прямокутного фрагмента, який знаходиться на окремому
рядку і відділяється від поререднього і наступного
фрагментів
Рядковий елемент не займає окремий рядок і навколо нього

знаходяться інші елементи
Заголовок – це блоковий елемент, а курсив – рядковий.

Блокові елементи можна вкладати,
а рядкові - вкладати й перетинати
48
49
Для стильового узагальнення рядкових і блокових є
теги <div> і <span>
<div> - універсальний блоковий елемент
Властивості:
- завжди відділяється від інших елементів пустим рядком
- не має ніякого смислового навантаження, є роздільником

сторінок.
Якщо немає css, то <div> просто створює пустий рядок тексту
- <div> дозволяє застосовувати атрибути стилю, пов’язані з

границею блоків (відступ блоку від границь старшого
елементу), дозволяє управляти набивками 50
Блокові елементи
• Завжди мають форму прямокутника
• Типовий тягнеться на всю ширину родителя
• Висота залежить від вмісту
• Блоку можна задавати розміри і відступи
• До і після блочного елемента є переведення
рядка
• До блоковим елементам відносяться такі теґи
як: < div >, < p >, < H1 >, < H2 >, < ul >
44
Розміри блоку
• width: 50%; - ширина вмісту блоку
• height: 200px; - висота вмісту блоку
DANGER! Випадання!
45
Блокові елементи
Блочна модель документа
• display: block;
• display: inline;
• display: Inline - Block;
Властивості блокової моделі:

•width - ширина блоку
•height - висота блоку
•border - рамка
•padding - відступ від кордону блоку до вмісту
•margin - відступ між кордонами блоку і його
родителем і сусідам
53
Синтаксис
•< div >. < / div >
Атрибути
• align задає вирівняти вміст теґу < div >
• .title додає повідомлення підказку до вмісту.
54
Використання блоку div
< HTML >
< Head >
< Style Type = «Text / CSS» >
.primer {
width: 300px;
background: # 9affe8;
padding: 5px;
Padding right: 25px;
border: solid 1px orange;
float: right; }
< / Style >
< / Head >
< Body >
< div Class = "Primer" > приклад використання блоку div
< / div >
< / Body >
< / HTML > 48
Модель блокового елемента
56
Контейнер <span> є узагальненим рядковим
контейнером розмітки. Застосовуються для заміни
тегів <i>, <b>, <u> та інших тегів, пов’язаних з
форматом шрифту
Наприклад:
<i>текст</i>
<span style="font-style: italic">текст</span>
<u>текст</u>
<span style=“text-decoration: underline">
текст
</span>
Або інакше:
<span class="decor">
span.decor{ text-decoration: underline } 57
Використання! important
• Відіграє роль у тому випадку, коли користувачі підключають свою
власну власноруч таблицю стилів. Якщо виникає протиріччя, коли
стиль автора сторінки і користувача для одного і того ж елемента не
збігається, то! important дозволяє підвищити пріоритет стилю.
• При використанні користувацької Таблиця стилів або одночасне
застосування різного стилю автора і користувача до одного і того ж
питання селектора, браузер керується наступним алгоритмом.
• ! important додано в авторський стиль - буде застосовуватися стиль
автора.
• ! important додано в користувальницький стиль - буде застосовуватися
стиль користувача.
• ! important немає як в авторському стилі, так і стилі користувача - буде
застосовуватися стиль автора.
• ! important міститься в авторському стилі і стилі користувача - буде
застосовуватися стиль користувача.
58
Використання! important
• Властивість: значення! important
<! DOCTYPE HTML >

< HTML >
< Head >
< Meta charset = "utf 8" >
< Title > important < / Title >
< Style > P {
background: url (images/tune1.png) No - Repeat! important;
min height: 112px; /* Мінімальна висота */
Padding Left: 65px; /* Поле ліворуч від тексту */}
p {background: url (images/tune2.png) No - Repeat; }
< / Style >
< / Head >
< Body > < р > другорядна пентатоніка зі зниженою V сходинкою також називається
блюзової pentatonikoy. < / p >
< / Body >
< / HTML >
https://www.w3.org/TR/CSS21/cascade.html # important Rules
59
Властивості CSS
1. Властивості для визначення кольору і фону
Властивість Значення Опис Приклад
color Колір Встановлює колір P { color: #330000 }
тексту
background-color Колір Колір фону BODY { background-
transparent color: #6699FF }
background-image URL Фоновий малюнок BODY { background-
none image: url (bg.gif) }
background-repeat repeat Повторюваність BODY { background-
repeat-x фонового малюнка image: url (bg.gif)
repeat-y background-repeat:
no-repeat repeat-y }
background- scroll Прокручування фону BODY { background-
attachment fixed разом із документом image: url (bg.gif)
background-
attachment: fixed }
background-position Відсотки Початкове BODY { background-
Пікселі положення фонового position: left top }
top рисунку
center
bottom
left 60
right
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
2. Властивості шрифтів і тексту
font-family ім'я шрифту Задає список шрифтів P {font-family: Arial, serif}
font-style normal Нормальний шрифт P {font-style: italic}
italic Курсив
oblique Похилий шрифт
font-variant normal Капітель (особливі великі літери) P {font-variant: small-caps}
small-caps
font-weight normal Нормальна жирність P {font-weight: bold}
lighter Світле начертання
bold Напівжирний
bolder жирний
100–900 100 - світлий шрифт,
900 - найжирніший
font-size normal нормальний розмір font-size: normal
pt пункти font-size: 12pt
px пікселі font-size: 12px
% відсотки font-size: 120%
line-height normal Інтерліньяж (міжрядковий інтервал) line-height: normal
множник line-height: 1.5
значення line-height: 12px
% line-height: 120%
text-decoration none Прибрати все оформлення text-decoration: none
underline Підкреслення
overline Лінія над текстом
line-through Перекреслення
blink Миготіння тексту
text-transform none Прибрати всі ефекти text-transform: capitalize
capitalize Починати З Великих
uppercase ВСІ ПЕРЕПИСНІ
lowercase всі малі
text-align left Вирівнювання тексту text-align: justify
right 61
center
justify
text-indent значение Відступ першого рядка text-indent: 15px;
% text-indent: 10%
3. Властивості списків

list-style-type disc Маркер вид. Перші три LI {list-style-type: circle}
circle використовуються для LI {list-style-type: upper-
square створення маркованого alpha}
decimal списку, а решта – для
lower-roman нумерованого.
upper-roman
lower-alpha
upper-alpha
none
list-style-image none Встановлює символом LI {list-style-image:
URL маркера будь-яку url(check.gif)}
картинку.
list-style-position outside Вибір положення маркера LI {list-style-position:
inside щодо блоку рядків тексту. inside}
list-style Універсальна властивість
включає одночасно всі
вищеперелічені
властивості.
62
4. Властивості блокових елементів
63
4. Властивості блокових елементів
64
5.Властивості позиціонування об’єктів
Позиціонування встановлює якість position. Воно набуває значення:
position: absolute; - Абсолютне
position: relative; - відносне
position: fixed; - фіксоване
position: static; - Статичне
Для вказівки координат використовуються властивості:

left - усунення лівого краю елемента щодо лівої межі вікна браузера або зовнішнього блоку.
right - усунення правого краю елемента щодо правої межі вікна браузера або зовнішнього блоку.
top - усунення верхнього краю елемента щодо верхньої межі вікна браузера або зовнішнього блоку.
bottom - усунення нижнього краю елемента щодо нижньої межі вікна браузера або зовнішнього
блоку.
Ці властивості можуть приймати такі значення:

left: auto; - без усунення (за замовчуванням)
left: величина в одиницях CSS
left: величина у відсотках. Якщо елемент зміщується щодо вікна браузера, то відсотки
розраховуються від розмірів вікна браузера. Якщо ж елемент зміщується щодо зовнішнього блоку,
то відсотки розраховуються від розмірів блоку.
left: inherit; - Значення приймається від батьківського елемента
В інших властивостей значення вказуються так само, як у left. 65
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning
5.Властивості позиціонування об’єктів
https://developer.mozilla.org/en- 66
US/docs/Learn/CSS/CSS_layout/Positioning
Інші властивості
Властивість Значення Опис
cursor auto | crosshair | default hand Визначає вид курсору для
move | e-resize | ne- resize | елемента при наведенні на
nw-resize | n-resize | se-resize нього миші
sw-resize | s- resize w-resize |
text| wait help
active, hover, link, visited Опис стилю, за умовчанням Служить для визначення
- визначаються стилів елемента <А>:
налаштуваннями браузера активної, при наведенні
мишею, за замовчуванням,
відвіданої
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
67
Приклад файла з таблицею стилів
body {background-color:silver;}
form {color:green;}
p {color:blue; font-family: times; font-size:10pt;}
h1 {color:black; font-size:12pt; font-style: arial; text-align:
center;}
#box {background-color:yellow;}}
68
Застосуємо створений стильовий опис до
документа з формою
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“css.css”>
<body>
<fieldset id='box'>…
документ із застосованим стилем
та без стильового оформлення
69
СSS і списки
63
•list-style-type
Для маркерованних списків нічого нового, все

теже значення, що і в HTML:
•disk - зафарбований кружок.
•
circle - не зафарбований кружок.
•
square - зафарбований квадрат.
63
<html>
<head>
<title>CSS списки</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body> Код style.css:
<ul id="spisok1"> #spisok1{
<li>Первый пункт</li> list-style-type:disk;
<li>Второй пункт</li> }
<li>Третий пункт</li>
#spisok2{
</ul>
<ul id="spisok2">
list-style-type:circle;
<li>Первый пункт</li> }
<li>Второй пункт</li> #spisok3{
<li>Третий пункт</li> list-style-type:square;
</ul> }
<ul id="spisok3">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul> 63
</body>
</html>
list-style-image
значення:
•url (url) Шлях до зображення.
•none значення за замовчуванням, означає відсутність
зображення. Також прибирає зображення для елемента з
групи елементів з встановленим зображенням-маркером.
•initial Встановлює значення властивості в значення за
замовчуванням.
•inherit Успадковує значення властивості від батьківського
елемента.
ul {
list-style-image: url(images/star.png); 63
}
list-style-position
значення:
•outside Значення за замовчуванням. Маркер розташовується
поза блоком з текстом.
•inside Маркер списку зображується в одному блоці з
текстом. Наступні рядки тексту будуть розташовуватися під
значком маркера, тобто маркер буде обтікати текстом.
•initial Встановлює значення властивості в значення за
замовчуванням.
•inherit Успадковує значення властивості від батьківського
елемента.
ul {
list-style-position: inside; 63
}
<ul> <style type="text/css">
<li> ПІ-15-1 </li> ul li {list-style:none;
<li> ПІ-15-2 </li> display:inline;
<li> ПІ-15-3 </li> background-color:#99ccff;
<li> ПІ-15-4 </li> margin: 2px;
<li> ПІ-15-5 </li> padding:2px;}
<li> ПІ-15-6 </li> </style>
документ із застосованим стилем
</ul>
75
Шари і CSS
63
Шари і CSS
<html>
<head>
<style>
.1{color:black; font-family:Arial; font-size:x-large; text-align:center;}
.2{color:black; font-family:Times; font-size:xx-large; text-align:center;}
#Layer1{position:absolute;left:250;top:115;width:200; height:200;
font-size:xx-large; z-index:1;background-color:#ff00ff;}
#Layer2{position:absolute; left:320;top:170;width:200;height:200;
font-size:x-large; z-index:2;background-color:#00ffff;}
</style>
77
<body background="bg.jpg">
<hr size="2" align="center" color=“black">
<div class="1">
Харківський національний університет радіоелектроніки
</div>
<div class="2">
Гіпертекст та гіпермедіа
</div><br>
<div id="Layer1">Это слой №1</div>
<div id="Layer2">А это слой №2</div>
<div class="1">
Напрям підготовки " Програмна інженерія "
</div>
<div align="center"><br><br>
<img src="univer1.jpg" alt="Alma Mater"></div>
</head></html>
78
Властивість z-index
01.< html>
02.< head>
03.< /head>
04.< body>
05.< div style="background-color:red; width:300px;
height:100px; position:relative; top:10px; left:80px; z-
index:2">
06.< /div>
07.
08.< div style="background-color:yellow; width:300px;
height:100px; position:relative; top:-60px; left:35px; z-
index:1;">
09.< /div>
10.
11.< div style="background-color:green; width:300px;
height:100px; position:relative; top:-220px; left:120px; z-
index:3;">
12.< /div>
13.< /body> 79
14.< /html>
Свойство z-index
80
Успадкування. Каскадирование.
Пріоритети стилів CSS.
• Принцип nasledovaniyazaklyuchayetsya в тому, що властивості CSS
оголошені для елементів предків, майже завжди, успадковуються
елементами нащадками.
• Принцип каскадирования застосовується в разі, коли якогось іншого
елемента HTML одночасно поставлено у відповідність більше одного
правила CSS, тобто, коли відбувається конфлікт значень цих правил.
Щоб вирішити такі конфлікти, вводяться правила пріоритету.
• Найбільш низьким пріоритетом володіє стиль браузера;
• Наступним за важливістю є стиль, визначений користувачем браузера в
його налаштуваннях;
• І найбільш високим пріоритетом володіє стиль, заданий безпосередньо
автором сайта.
81
Успадкування. Каскадирование.
Пріоритети стилів CSS.
• Найнижчим пріоритетом володіють стілі, успадковані в документі
елементом від своїх предків;
• Більш високим пріоритетом володіють стілі, задані у зовнішніх
таблиць стилів, підключених до документа;
• Ще більш високим пріоритетом володіють стілі, задані безпосередньо
селекторами всіх десяти різновидів, що містяться у контейнерах style
даного документа.
Нерідкі випадки, коли до якого-небудь елементу мають відношення,
задають його вид, кілька селектор. Такі конфлікти між ними
вирішуються з допомогою розрахунку специфічності кожного такого
селектору і застосування цих селектор до даного елементу в порядку
зменшення їх spetsifichnostey.
• Найбільшим пріоритетом володіють стилі, оголошені автором сайта
або користувачем, за допомогою супровідного правила! important.
82
Верстка
(За процесом реалізації)
• таблична
• за допомогою <div> (блокова)
83
Верстка
Переваги:
• Кілька дизайнів сторінки для різних пристроїв перегляду. Наприклад, на
екрані дизайн буде розрахований на більшу ширину, під час друку меню
не буде виводитися, а на КПК і стільниковому телефоні меню буде
слідувати за вмістом.
• Зменшення часу на завантаження сторінок сайту за рахунок перенесення
правил подання даних в окремий CSS - файл. В цьому випадку браузер
отримує лише структуру документа, і дані, збережені на сторінці, а
подання цих даних завантажується браузером тільки один раз і може бути
zakeshirovano.
• Простота подальшої зміни дизайну. Не потрібно правити кожну сторінку,
а достатньо лише змінити CSS - файл.
• Додаткові можливості оформлення. Наприклад, за допомогою CSS
верстки можна зробити блок тексту, який решті текст буде обтікати
(наприклад для меню) або зробити так, щоб меню було завжди видно при
прокручуванні сторінки.
84
Верстка
Недоліки:
• Різне відображення верстки в різних браузерах (особливо
застарілих), які по-різному інтерпретують одні й ті ж дані
CSS.
• Часто зустрічається необхідність на практиці виправляти не
тільки один CSS - файл, а й теґи HTML, які складним і
ненаглядним способом пов ’ язані з селекторами CSS, що
іноді зводить нанівець простоту застосування єдиних файлів
стилів і значно збільшує час редагування і тестування.
85
Таблична верстка
86
Верстка за допомогою<div>
Схема блокової верстки
87
Верстка за допомогою<div>
в три стовпчика
<body>
<div id="header"> заголовок сторінки </div>
<div id="content">
<div id="container1">
<div id="center"> Центральна колонка </div>
</div>
<div id="left"> Ліва колонка </div>
</div>
</div>
<div id="right"> Права колонка </div>

</div>
<div id="footer"> Авторські права </div>
88
</body>
Верстка
(За типом відображення)
• Адаптивна
• Гумова верстка
• Фіксована
• Еластична
• Мобільна верстка
• Семантична верстка
• Комбінована
89
Верстка
CSS Framework (також Web design framework) - це
заздалегідь підготовлена CSS бібліотека, створена для
спрощення роботи верстальника, швидкості розробки та
виключення максимально можливого числа помилок
верстки (проблеми сумісності різних версій браузерів і т.
д.). Так само як і бібліотеки скриптових мов
програмування, CSS - фреймворки, зазвичай мають
посвідки зовнішнього .css-файла, "підключаються" до
проекту (додаються в заголовок веб-сторінки),
дозволяючи недосвідченому в тонкощах верстки
програмісту або дизайнеру правильно створити HTML
макет.
90
CSS-фреймворки
91
CSS
*{ margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#9393FF; height:70px; width:100%; }
#content { width:100%; padding-bottom:60px; overflow:hidden; }
#container1 { width:100%; float:left; margin-right:-180px; }
#container2 { background:#000000; margin-right:180px; }
#container3 { width:100%; float:right; margin-left:-200px; }
#left { background:#AEAE00; width:200px; float:left; }
#center { background:#D86927; margin-left:200px; }
#right { background:#C0C0C0; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }
</style>
92
93
Плюси і мінуси використання
CSS
Переваги CSS:
Простота самої мови CSS разом з принципом відділення оформлення від змісту дає
можливість скоротити час на розробку і підтримку сайту.
Є кілька варіантів дизайнів сторінки для перегляду на різних пристроях. Дизайн на екрані
комп'ютера розрахований на одну ширину, і буде повністю виводитися на екран, а на
мобільних пристроях він буде підлаштовуватися до розмірів екрану і деякі елементи будуть
виключені від показу.
Зменшується час завантаження сторінок web-сайту за рахунок перенесення правил
представлення даних в окремий CSS-файл.
Простота зміни дизайну. Один CSS управляє відображенням безлічі HTML-сторінок.
CSS надає додаткові можливості форматування, про яких при використанні тільки самих
атрибутів навіть і не мріяли.
Підвищення сумісності з різними платформами за рахунок використання web-стандартів.
94
Плюси і мінуси використання
CSS
Недоліки CSS:
Різна відображення верстки в різних браузерах. Якщо браузери

застарілі, то можливо, що одні й ті ж дані CSS по-різному ними
інтерпретуються.
Необхідність виправляти не тільки один CSS-файл, але і теги

HTML. Часто зустрічається на практиці необхідність виправляти
не тільки один CSS-файл, але і теги HTML, які пов'язані з
селекторами CSS. Іноді це значно збільшує час редагування, а
також і тестування.
95
Дякую за увагу!
96

GTGM - Lecture - 05-6 - Fin - 2023-Ukr PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GTGM - Lecture - 05-6 - Fin - 2023-Ukr PDF

Uploaded by

Copyright:

Available Formats

Гіпертекст і гіпермедіа

лектор 2-го потоку

Груздо Ірина Володимирівна

• HTML + CSS = веб-сторінка

1998 - зворотня сумісність

CSS 2,1 версія (2011), відповідає версії HTML 4,01

CSS3 2010 - "таблиці каскадних стилів третього покоління"

CSS LEVEL 5 2017 (поточна версія - 19 March 2021) Новим на цьому

Для перевірки підтримки

http://acid3.acidtests.org 05Dd272o = /fit-in/355x355/filters:strip_icc ()

• < Link rel = "Stylesheet" href = "style.css" / >

• <p style="color: red">Абзац з літерами

Ось складові частини кожного правила каскадних таблиць стилів:

<style> текст опису стиля </style>

<ім’я_тега style=" властивість: значення; …

Приклад -Розширена форма запису :

Приклад -Компактна форма запису:

Опис стилю може зберігатись в зовнішньому текстовому

Контейнер <link> призначено для вказівки відносних

Імпорт стилів можна здійснити або всередину тега

Стиль, який імпортується, можна також перевизначити через

@import "print-styles.css" print;

Мовні синтезатори та програми для відтворення тексту вголос.

Тег <style> може використовуватись як самостійний контейнер або

- стилі для класів об’єктов (задаються атрибутом

- стилі для об’єктов із заданим унікальним

- стилі для класів тега <a>

Якщо необхідно задавати однакові стилі неоднорідним

h1, h2, h3. myorigin{color: green}

де N – показник ступеня вкладеності

< Head >

Цей код підсвічує озвучуються слова жовтим фоном.

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

Селектор Приклад Опис

checked input: checked Всі вибрані (класифіковані) елементи input

Empty p: empty Всі елементи p які не мають дочірніх елементів

Focus input: focus Обрати Пункт input який перебуває у фокусі

Вибрати всі елементи p, які є останнім дочірнім

checked input: checked Всі вибрані (класифіковані) елементи input

Синтаксис використання псевдоелементів наступний.

Селектор:Псевдоелемент{Опис правил стилю}

After - Застосовується для вставки призначеного контенту після

Before - за своєю дією before аналогічний псевдоелементу after, але

Наприклад: стилі шрифту для всього документа

background, border, padding, margin, width, height.

Блоковий елемент розмітки відображаєтьcя всередині

Рядковий елемент не займає окремий рядок і навколо нього

Заголовок – це блоковий елемент, а курсив – рядковий.

<div> - універсальний блоковий елемент

- завжди відділяється від інших елементів пустим рядком

- не має ніякого смислового навантаження, є роздільником

- <div> дозволяє застосовувати атрибути стилю, пов’язані з

Властивості блокової моделі:

<! DOCTYPE HTML >

Властивість Значення Опис Приклад

Для вказівки координат використовуються властивості:

Ці властивості можуть приймати такі значення:

документ із застосованим стилем

та без стильового оформлення

Для маркерованних списків нічого нового, все

Схема блокової верстки

<div id="right"> Права колонка </div>

Різна відображення верстки в різних браузерах. Якщо браузери