Інформація про новину
  • Переглядів: 49
  • Дата: 12-10-2021, 12:22
12-10-2021, 12:22

22. Аркуші каскадних стилів

Категорія: Інформатика





Попередня сторінка:  21. Таблиці на вебсторінках
Наступна сторінка:   23. Автоматизовані засоби для створенн...

Чому жоден сучасний сайт не обходиться без каскадних стилів?

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

Завдання № 1

Розглянь приклад вебсторінки і дай відповіді на запитання.

1. Який тег багаторазово повторюється? Для чого цей тег призначено?

2. На сторінці кілька фрагментів тексту виділено. Для цього використовується червоний шрифт 4-го розміру. Якщо ти вирішиш виділяти текст зеленим шрифтом 5-го розміру, скільки разів потрібно буде внести однакові зміни в документ?

3. Як ти думаєш, для чого призначено теги <html>, <head>, <body>?

Завдання № 2

Створи вебсторінку із завдання 1 або скористайся її заготовкою. Заміни окреме форматування кожного виділеного фрагмента тексту форматуванням за допомогою стилів. Для цього:

1) Усередині тегів <head>...</head> додай парні теги

Між цими тегами і будуть визначатися стилі.

2) Запиши між тегами <style> і </style> означення стилю:

3) У кожному тегу <font> замість атрибутів, що визначають колір і розмір шрифту, задай клас стилю:

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

4) Спробуй самостійно змінити параметри стилю так, щоб виділені фрагменти тексту відображалися зеленим кольором і мали розмір 24рх. Перевір результат у браузері.

Параметри стилю потрібно змінювати один раз, у селекторі.

А до всіх елементів вебдокумента, що позначені цим селектором, нові параметри застосуються автоматично.

Завдання № З

Селектором може бути не лише вигадане користувачем ім'я, а й назва стандартного тегу HTML — перед означенням такого селектора крапка не ставиться. Тоді вказані в селекторі параметри форматування застосуються до вмісту всіх відповідних тегів.

1) Зміни шрифт усього тексту вебсторінки, означивши в тегу

2) Замість шрифту Tahoma вибери на сайті fonts.google.com той шрифт, який тобі найбільше до вподоби. Введи його назву в означенні стильового правила і перевір результат.

Шрифт має підтримувати кирилічні символи. Щоб відобразити такі шрифти на сайті fonts.google.com, вибери у списку Language значення Cyrillic.

3) Знайди інформацію про день Інтернету і додай після останнього тегу </р> посилання на вебсторінку із цією інформацією. Переглянь результат. Чому шрифт посилання відрізняється від шрифту решти тексту?

4) Розмісти посилання всередині тегів <р>...</р>. Як змінився шрифт посилання? Чому?

Завдання №4

Тепер створимо вебсторінку з адаптивним дизайном, яка буде зручно відображатися на різних пристроях, у вікнах браузера різної ширини. 1) Проаналізуй наведені нижче html-код і таблицю стилів вебсторін-ки. Створи власну вебсторінку за наведеним прикладом, замінивши назви та зображення на інформацію про виконавців, блогерів, фільми тощо, які тобі до вподоби (знайди її в Інтернеті). Стилі можеш зробити як вкладеними, так і зв'язаними.

2) Спробуй максимально звузити та розширити вікно браузера з веб-сторінкою. Можеш також завантажити вебсторінку разом із зображеннями на телефон та переглянути її. Опиши, що відбувається з даними на вебсторінці.

3) Користуючись рубрикою «Запитання-відповіді», а також провівши експеримент, дай відповіді на запитання.

• Для чого призначено тег <div>?

• Завдяки якій властивості забезпечується розміщення зображень у 1,2 чи більше стовпців відповідно до ширини вебсторінки?

• Завдяки якому атрибуту створюється відступ між інформаційними блоками?

• Що відбудеться, якщо властивості padding надати значення 0? Для чого призначено цю властивість?

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

ЗАПИТАННЯ-ВІДПОВІДІ

Якою є повна структура HTML-документа?

• Документ починається з тегу <html> і закінчується відповідним йому тегом </html>. Така пара тегів повідомляє браузеру, що це HTML-документ. Проте ці теги не обов'язкові, адже браузер інтерпретує файли як HTML-документи за умовчанням.

• Містить два розділи — заголовка (між тегами <head> і </head>) та тіла документа (між тегами <body> і </body>).

• Заголовок містить інформацію про документ загалом. Зокрема, він може містити теги <title> та </title>, між якими розміщено текст, що відображатиметься в заголовку вікна браузера, а також теги <style> і </style>, між якими розміщують означення стилів.

• Сам текст документа міститься в його тілі, яке розташоване між тегами <body> та </body>. Ці теги також необов'язкові, однак їх зручно використовувати, щоб, наприклад, задати стиль відразу для всього документа.

Що таке CSS?

CSS — це абревіатура від англ. Cascade Style Sheets (аркуші каскадних стилів). Основне призначення стилів подібне до призначення стилів у текстовому процесорі: однотипне й автоматизоване форматування документів. Коли якийсь елемент документа відформатовано за допомогою стилів, до нього застосовується набір стильових правил, що визначають колір елементів, розмір, відступи тощо. Правило — це список властивостей та їх значень у форматі

Значення властивостей в означеннях правил css не беруться в лапки, на відміну від значень атрибутів у тезах html.

Кожне стильове правило потрібно:

1) означити; 2) застосувати.

Як означити стилі?

Є три основних способи означити стильові правила.

1. Вбудовування (inline). Стильове правило можна означити всередині будь-якого html-тегу, як значення властивості style. Наприклад,

Тут у тегу <р> створено стиль, що полягає у встановленні червоного кольору тексту та сірого тла. Область дії правила буде тією самою, що і область дії тегу <р>. Вбудовані стилі можна замінити набором звичайних атрибутів html-тегів.

2. Вкладення (embeding). Стильові правила означують міжтегами <style> і </style> в заголовку вебдокумента. Кожне правило має вигляд на кшталт такого:

Тобто на початку правила записують певне ім'я — селектор, після якого у фігурних дужках перелічують властивості цього правила.

З Зв'язування (linking). Стильові правила означують так само, як і в разі вкладення, однак записують ці означення в окремому документі, що зберігається у файлі з розширенням css. Цей файл потрібно зв'язати з HTML-документом, додавши між тегами <head> і </head> тег <link> на кшталт

У цьому тегу є два атрибути, значення яких мають такий зміст:

• href="iM'fl файлу стилів". Якщо до цього файлу не вказано шляху, він має розміщуватися в тій самій папці, що і сам html-документ;

• rel="stylesheet" — тип документа, що прив'язується, — файл стилів.

Як застосовують стилі?

Стилі застосовують до тегів HTML. У вбудованих стилів означення і застосування не розрізняються, а спосіб застосування вкладених і зв'язаних стилів залежить від виду селектора. Є два основних різновиди селекторів.

Селектор тегу повинен мати таке саме ім'я, як і певний тег HTML. Правило, що позначається цим селектором, автоматично застосовується до всіх тегів, що мають таке ім'я.

До цього тексту правило {color: red; font-size: 20} застосовується автоматично, оскільки він міститься в тегу <р>...</р>

Селектор класу може мати ім'я, яке вигадає користувач. В означенні перед селектором класу ставлять крапку. Щоб застосувати правило, позначене селектором класу, до певного тегу, потрібно додати до нього атрибут class, значенням якого буде ім'я селектора.

У цьому означенні mystyle — це селектор класу. Позначене цим селектором правило застосовано до абзацу тексту, що міститься між тегами <р> і </р>, а також до одного слова тексту, що міститься міжтегами <font> і </font>.

Які теги ми сьогодні вивчили?

Тег

Призначення

Вказує браузеру на тип документа. Усередині цього тега розміщують весь html-документ

Заголовок html-документа. У цьому тегу вказують загальну інформацію про документ

Заголовок html-документа. У цьому тегу записують основний вміст документа. Розміщується після тегу <head>...</head>

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

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

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

Які атрибути ми сьогодні вивчили?

Атрибут

Призначення

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

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

Цей атрибут використовують у тегу <link> для зазначення типу документа, що зв'язується з вебсто-рінкою. Для прив'язки каскадного аркуша стилів вказують значення "stylesheet"

Які властивості стильових правил використовують найчастіше?

Атрибут

Призначення

Приклади значень

Назва шрифту

Times New Roman, Arial, Courier

Накреслення

шрифту

normal, italic

Жирність

шрифту

Число від 100 до 900 (100 — най-тонший, 900 — найгрубіший), значення normal (еквівалент 400), bold (еквівалент 700)

Розмір шрифту

10, Юрх, 50% (відсоток від розміру тексту навколо)

Колір елемента

#FF0000 (шістнадцяткове значення в моделі RGB), red, blue, green, gray, yellow, cyan, aqua, magenta тощо

Колір тла елемента або фонове зображення

Те саме, що і в атрибута color або игі("ім'я файлу^")

Вирівнювання тексту в абзаці

left (зліва), right (справа), center (по центру), justify (за шириною)

Висота рядка

1.5,150% (відносно розміру тексту)

Атрибут

Призначення

Приклади значень

Значення цього атрибута задає відступ елемента від меж батьківського елемента

20,20рх, 20 % (відсоток від розміру батьківського елемента)

Значення цього атрибута задає відступ елемента від сусідніх елементів

20,20рх, 20 % (відсоток від розміру елемента)

 

20,20рх, 20 % (відсоток від розміру батьківського елемента)

 

20,20рх, 20 % (відсоток від розміру батьківського елемента)

Спосіб розташування елемента відносно сусідніх елементів

left, right, bottom, top (елемент розташовується зліва, справа, знизу або зверху від наступного елемента)

Батьківським називається елемент вебсторінки, у якому розміщено поточний елемент. Наприклад, для тексту в клітинці таблиці батьківським елементом буде клітинка, для клітинки — рядок таблиці, для рядка таблиці — вся таблиця, а для таблиці батьківським елементом може бути вся вебсторінка.

У властивостей margin і padding є варіанти, які визначають розмір відступу елемента лише з одного боку: margin-top, margin-right, margin-bottom, margin-left та padding-top, padding-right, padding-bottom, padding-left.

ПЕРЕВІР СЕБЕ

1. Опиши крок за кроком алгоритм використання вкладених стилів на вебсторінці.

2. Поясни, коли найдоцільніше використовувати кожен із різновидів стилів: зв'язані, вкладені, вбудовані.

3. Поясни, у чому відмінність між властивостями margin та padding.

4. Оформи за допомогою стилів вебсторінку з інформацією про себе, створену на попередніх уроках.

5. Використання тегів <div> і форматування їх за допомогою стилів — це альтернатива таблицям на вебсторінках. Порівняй ці два способи розміщення інформації. Які переваги та недоліки кожного з них?

 

Це матеріал з підручника Інформатика 8 клас Коршунова (2021)

 



Попередня сторінка:  21. Таблиці на вебсторінках
Наступна сторінка:   23. Автоматизовані засоби для створенн...



^