Урок №18

Означення й застосування стилів, зв’язування аркушів стилів з гіпертекстовими документами.

!!! Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.!!!

Для роботи можна скористатися будь-яким онлайн редактором для написання html  сторінок (наприклад https://liveweave.com/), встановленою програмою (блокнот, Notepad++ і т.д.) або записати в зошит.

Виконайте будь-яку одну вправу

Фото виконаного завдання надішліть вчителеві інформатики на пошту

Кравчук Тетяна Володимирівна: admin@ck19.ukr.education

Дорда Вікторія Олександрівна: vika@ck19.ukr.education

Використання таблиць каскадних стилів

Ви вже розглянули можливості форматування вмісту веб-сторінок за допомогою засобів мови HTML та візуального редактора веб-сай- тів. Проте є й інші засоби оформлення текстів і створення зовніш­ніх ефектів, які можуть прикрасити веб-сторінку. Одним з них є таблиці стилів. Загальний принцип використання стилів на веб- сторінках той самий, що і для документів, створених у середовищі текстового процесора: користувач визначає набори правил форма­тування, які потім застосовуються до елементів документа. Проте у веб-дизайні способи застосування стилів різноманітніші.

Поняття про таблиці каскадних стилів

Стиль — це набір правил оформлення та форматування, який мож­на застосувати до різних елементів веб-документа. У разі викори­стання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться задавати ці властивості для кожного елемента. Викори­стання таблиць стилів дає змогу уникнути цього, оптимізувавши розробку веб-сайтів. Стилі дають змогу позиціювати елементи сто­рінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок.

Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказу­вати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.

Таблиці каскадних стилів — це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще ви­значеннями тегів. Наприклад:

Р {font-size: 40pt; color: green; font-family: "Comic Sans MS"}

Тут задано параметри для тегу абзацу <Р>, які встановлюють розмір шрифту 40 пунктів, колір шрифту — зелений, гарніту­ру — Comic Sans MS. У документі достатньо ввести теги <Р>...</Р> із текстом абзацу, щоб автоматично надати йому зазначеного оформлення.

Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними засобами HTML. У наведено­му прикладі встановлено розмір шрифту 40 пунктів, хоча в мові HTML за допомогою атрибута SIZE можна задати для шрифту максимальний розмір 7, що відповідає 36 пунктам.

Крім того, таблиці каскадних стилів дають змогу визначити єди­ний стиль оформлення для різних сторінок документа і швид­ко модифікувати його зміною відповідного параметра у таблиці стилів.

Параметрів форматування, які можна задавати за допомогою сти­лів, досить багато. Це, зокрема:

ПАРАМЕТРИ ФОРМАТУВАННЯ

• background — колір тла;
• font-family — стиль шрифту (гарнітура);
• font-size — розмір шрифту;
• font-weight — жирність шрифту;
• color — колір шрифту;
• text - decoration — оздоблення тексту;
• text-align — вирівнювання тексту;
• margin-top — відступ від верхнього рядка абзацу;
• line-height — міжрядкова відстань.

Застосування каскадних стилів у HTML-документах

є три способи зв'язку каскадних стилів із HTML-документом:

• під­ключення зовнішньої таблиці стилів;
• розташування опису стилів у розділі HEAD документа;
• задавання властивостей стилів безпосе­редньо в тегах абзаців чи заголовків.

Підключення зовнішньої таблиці стилів

Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .css. Його підключають до HTML-докумен­та за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад:

<LINK REL = "stylesheet" TYPE = "text/css" HREF = "mystyle.css">

Атрибути REL та TYPE вказують браузеру на те, що сторінка ви­користовує таблиці каскадних стилів. Атрибут HREF задає адресу файлу (mystyle.css).

Вправа 5.1

Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів.

• 1.Відкрийте текстовий редактор Блокнот і введіть таке визна­чення тегу <Р>:

• 2. Збережіть файл з іменем mystyle.css
• 3. Створіть у Блокноті файл такого змісту:

• 
• 4. Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css.
• 5. Відкрийте файл pryklad1.html у вікні браузера (рис. 5.1). Як бачите, хоча в цьому документі не задано жодних параметрів для тегу <Р>...</Р>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.
• 
• рис. 5.1

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

Використання стилів внутрішньої таблиці

Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLE>.

<HEAD>

<STYLE>

Тег1 {властивість 11: значення11; властивість 12: значення12; ...; властивість13:значення13;}

Тег2 {властивість21: значення21; властивість22: значення22; ...; властивість23: значення23;}

</STYLE>

</HEAD>

Як видно з коду, найпростіша внутрішня таблиця стилів — це послідовність визначень тегів, кожне з яких записується, як пра­вило, з нового рядка. Визначення тегу містить його ім'я без ку­тових дужок, за яким у фігурних дужках через крапку з комою перелічують властивості тегів та їхні значення, розділені двокрап­ками. Розглянемо приклад.

Вправа 5.2

Визначимо стилі заголовків першого та другого рівнів із викори­станням тегу <STYLE>.

У цьому описі стилю змінено оформлення заголовків Н1 та Н2. Зокрема, для першого призначено розмір 48 пунктів і червоний колір, а для другого — розмір 20 пунктів і синій колір. У вікні браузера цей документ матиме вигляд, як на рис. 5.2.

У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до тако­го стилю за іменем, використовуючи атрибут СLASS=ім'я_стилю, де ім'я записують вже без крапки. Для одного тагу можна вико­ристовувати декілька стилів форматування.

Вправа 5.3

Застосовуючи атрибут CLASS тегу </Р>, задамо для двох абзаців різні стилі: першому надамо розмір шрифту 38 пунк­тів, білий колір символів і оливковий колір тла, другому — роз­мір шрифту 46 пунктів, фіолетовий колір символів і рожевий колір тла.

Який вигляд має цей документ у вікні браузера, показано на рис. 5.3.

Стилі дають змогу сформувати сторінку з цікавими ефектами, які інакше можна створити лише за допомогою графіки. Це, наприк­лад, ефект об'ємного тексту або накладання (часткового перекрит­тя) фрагментів сторінки.

Стилі дають змогу сформувати сторінку з цікавими ефектами, які інакше можна створити лише за допомогою графіки. Це, наприк­лад, ефект об'ємного тексту або накладання (часткового перекрит­тя) фрагментів сторінки.

Вправа 5.4

Створення текстових ефектів за допомогою стилів

Визначимо для тегу <BODY> такий стиль: шрифт Arial чорного кольору розміром 16 пунктів. Внаслідок цього весь текст, що міс­титься між тегами <BODY> та </BODY>, буде автоматично відформа­тований відповідно до цих властивостей. Тепер визначимо стилі з іменами тінь, основа, шар1 і шар2. Текст запишемо в шарах, які накладаються. Спочатку відображатиметься шар тінь, а на нього накладатимуться шари основа, шарі та шар2. Порядок накладан­ня задано розташуванням фрагментів тексту в HTML-документі. 

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

• margin-top — відступ згори (за від'ємних значень можна забезпечити накладання фрагментів);
• color — колір;
• font-size — розмір шрифту;
• font-family — сімейство шрифтів (гарнітура);
• line-height — висота рядка.

Визначені в документі стилі мають такі параметри:

• .tin — колір зі значенням #DBDBDB (світло-сірий), вирів­нювання по центру, відступ згори — 30 пікселів, розмір шриф­ту — 80 пікселів, висота рядка — 270 пікселів, гарнітура — Times;
• .osnova — червоний колір шрифту, відступ згори — -230 пікселів, розмір — 70 пікселів, висота рядка — 250 пікселів, гарнітура — Times;
• .shar1 — чорний колір шрифту, відступ згори-------------------- 100 піксе­лів, розмір шрифту — 50 пікселів, висота рядка 65 пікселів, гарнітура — Arial;
• .shar2 — зелений колір шрифту, відступ згори — 30 пікселів, розмір шрифту — 35 пікселів, висота рядка — 45 пікселів, гарнітура — Arial.

Для виділення частини HTML-документа використовують тег <DIV>. Він нічого не форматує, а лише відзначає фрагмент тек­сту, який виступає як окремий об'єкт. Атрибут CLASS цього тегу дає змогу посилатися на стилі внутрішньої таблиці й тим самим задавати стиль подання тексту, розташованого між тегами <DIV CLASS...> та </DIV>.

Вигляд цього документа після відкриття його у вікні браузера, показано на рис. 5.4.

Вбудовані стилі

Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>... <Нб>, абзацу <Р>, тіла <BODY>, а також у теги <DIV>, <IMG> тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення. Наприклад:

<Р STYLE="font-size: 48pt; color: yellow;">

Визначені у такий спосіб властивості мають найвищий пріоритет порівняно з іншими, оскільки вони визначені безпосередньо у те­гу. Цей підхід використовують для оформлення невеликої кіль­кості елементів.

Приклад використання атрибута STYLE для форматування заго­ловка другого рівня:

<Н2 STYLE="font-size: 48pt; font-family: ‘Arial’>Текст...</Н2>

Позиціювання елементів веб-сторінки за допомогою стилів

Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць — каскадні стилі надають для цього додаткові цікаві можливості.

Зокрема, можна обирати один із трьох типів позиціювання еле­ментів на сторінці: статичне, відносне та абсолютне позиціюван- ня. Тег визначається атрибутом POSITION, який може набувати таких значень:

• static — статичне; задане за умовчанням і передбачає роз­міщення чергового об'єкта на вільному місці після поперед­нього;
• relative — відносне; визначає розташування об'єкта віднос­но того місця, яке б він зайняв, якби для нього було викори­стане статичне позиціювання;
• absolute — абсолютне; передбачає розміщення об'єкта шля­хом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості — left (ліворуч) та right (праворуч), які задають відступи для розміщення об'єкта по горизонталі, і top (згори) та bottom (знизу) — по вертикалі. Необхідно задавати

по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху — той, який описали останнім.

Якщо потрібна зміна стандартного порядку накладання, засто­совують шари. Шар об'єкта задають за допомогою властиво­сті Z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї власти­вості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт, описаний нижче за текстом у HTML-документі.

Вправа 5.4

Розглянемо, як позиціювати три об'єкти-зображення і два фраг­менти тексту. Координати спеціально вибрані так, щоб об'єкти пе­рекривалися. Зауважте, що слід використовувати атрибут STYLE, а не тег <STYLE>.

• У програмі Блокнот введіть такий текст веб-сторінки:

<HTML>

<HEAD>

<ТІ^Е>Позиціювання</ТІ^Е>

</HEAD>

<BODY>

<DIV STYLE="position: absolute; top: 0; left: 70; width: 50; height: 100">

<IMG SRC= "fly. jpg"></DIV>

<DIV STYLE="position: absolute; top: 10; left: 15; width: 600; height: 100">

<H1 STYLE="color : yellow">Повій, вітре, до схід сонця, до схід сонця, край віконця.</Hl></DIV>

<DIV STYLE="position: absolute; top: 60; left: 400; width: 50 ; height : 100">

<H1 STYLE = "color: blue">Чайка</Н1></DIV>

</BODY>

</HTML>

Тег <DIV> тут виконує роль контейнера: елементи, що міс­тяться в ньому, успадковують його властивості, зазначені в ат­рибуті STYLE. Перший контейнер містить зображення, тип роз­ташування якого є абсолютним, з нульовим відступом згори.

70 пікселів — відступ зліва; його ширина становить 50, висо­та — 100 пікселів. Другий контейнер містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», він зміще­ний на 10 пікселів від початку сторінки вниз та на 15 вліво, ширина контейнера — 600, висота — 100 пікселів; завдяки ви­користанню тегу Н1 із атрибутом 8!УЬБ текст має відповідний до заголовка першого рівня розмір та жовтий колір. Третій контейнер зміщений на 60 пікселів униз та 400 ліворуч, ши­рина контейнера — 50, висота — 100 пікселів. Слово «Чайка» оформлене як заголовок першого рівня синього кольору.

• Збережіть цей документ у файлі з іменем pryklad2.html. Ско­піюйте у папку з цим документом зображення fly.jpg (можна використати інший файл, але його назва має збігатися з на­звою в ИТМЬ-документі).
• Відкрийте файл pryklad2.html у браузері (рис. 5.5) — контей­нери перекриваються згідно з розташуванням у документі.

• Внесіть зміни у текст веб-сторінки, який стосується першо­го контейнера (із зображенням). Для цього клацніть правою кнопкою миші вільне місце сторінки у вікні браузера і вибе­ріть пункт Перегляд HTML-коду (View Source). У вікні редакто­ра, що з'явиться, внесіть такі зміни:

<DIV STYLE="position: absolute; top: 0; left: 7 0; width: 50; height: 100; z-index: 2">

<IMG SRC="fly.jpg"></DIV>

Решту документа залиште без змін. Хоча в тексті HTML-доку­мента зображення описане першим, завдяки тому, що йому присвоєно індекс із більшим номером, воно відобразиться по­верх інших об'єктів.

• Збережіть внесені зміни (командою Файл > Зберегти), закрийте текстовий редактор і оновіть веб-сторінку за допомогою коман­ди Вигляд • Оновити або функціональної клавіші F5. Вигляд цього документа у вікні браузера показаний на рис. 5.6.

Отже, використання властивості z-index дає змогу відобра­жати об'єкти незалежно від порядку їх розташування в тексті HTML-документа.

Під час відображення сторінки може статися, що розміри еле­мента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямо­кутник. У таких випадках використовують властивість over­flow (переповнення). Вона може мати три значення:

• попе — якщо елемент вийде за межі наданого місця, він все одно буде показаний;
• clip — об'єкти, що виходять за межі, будуть обрізані;
• scroll — буде використано прокручування.

• Відкрийте HTML-код сторінки і внесіть у другий контейнер, що містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», такі зміни:

<DIV STYLE="posit ion: absolute; top: 10; left: 15; width: 220; height: 12 0; overflow: scroll">

<H1 STYLE="color: yellow">Повій, вітре, до схід сонця, до схід сонця, край віконця </Hl></DIV>

• Збережіть зміни та оновіть веб-сторінку в браузері. Який ви­гляд вона матиме, показано на рис. 5.7.

6. Застосування отриманих знань

Самостійна робота

7.  ПІДБИТТЯ ПІДСУМКІВ УРОКУ

8. ДОМАШНЄ ЗАВДАННЯ

• Вивчити конспект.
• Виконати завдання c.p.