20.1. Таблиці та списки на веб-сторінках
Таблиці
Таблиця створюється за допомогою парного тегу <table></table>. Даний тег є контейнером для елементів таблиці і всі елементи повинні знаходитися всередині нього.
|
<table border="1">
<tbody>
<tr><th>текст заголовка 1</th><th>текст заголовка 2</th></tr> <tr><td>дані 1</td><td>дані 2</td></tr> </tbody> </table> |
Списки
1. Маркований список <ul>
|
<ul>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ul>
|
2. Нумерований список <ol>
3. Список визначень <dl>
4. Вкладений список
5. Багаторівневий нумерований список
|
<ol>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ol>
|
3. Список визначень <dl>
| <dl> <dt>Клас</dt> <dd>5</dd> <dt>Предмети</dt> <dd>Укр мова</dd> <dd>Матем</dd> <dd>Англ мова</dd> <dd>Природозн</dd> </dl> |
4. Вкладений список
| <ul> <li>Пункт 1.</li> <li>Пункт 2. <ul> <li>Підпункт 2.1.</li> <li>Підпункт 2.2. <ul> <li>Підпункт 2.2.1.</li> <li>Підпункт 2.2.2.</li> </ul> </li> <li>Підпункт 2.3.</li> </ul> </li> <li>Пункт 3.</li> </ul> |
5. Багаторівневий нумерований список
| <HTML> <HEAD> <STYLE> ol { list-style: none; counter-reset: li; } li:before { counter-increment: li; content: counters(li,".") ". "; } </STYLE> </HEAD> <BODY> <ol> <li>пункт</li> <!-1.-> <li>пункт <ol> <li>пункт</li> <!-2.1.-> <li>пункт</li> <!-2.2.-> <li>пункт <ol> <li>пункт</li> <!-2.3.1.-> <li>пункт</li> <!-2.3.2.-> <li>пункт</li> <!-2.3.3.-> </ol> </li> <!-2.3.-> <li>пункт</li> <!-2.4.-> </ol> </li> <!-2.-> <li>пункт</li> <!-3.-> <li>пункт</li> <!-4.-> </ol> </BODY> </HTML> |
20.2. Каскадні таблиці стилів
Каскадні таблиці стилів (англійською Cascading Style Sheets, CSS) — спеціальна мова, яку використовують для запису оформлення сторінок, написаних мовами розмітки даних.
Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їх зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яку реалізовано в сучасних текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
Таблиці стилів зазвичай створюють окремо від html-файлу. Під час створення html-файлу увагу концентрують на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів - навпаки. Отже, стилі дають змогу розділити етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.
Cпособи взаємодії таблиці стилів з html-файлом:
- зв'язування;
- імпортування;
- вбудовування (використання стильових класів).
Зв'язування
Таблицю стилів створюють і зберігають в окремому файлі з розширенням css. Таку таблицю називають зовнішньою. Щоб зв'язати основний файл з такою таблицею стилів, у середині тегу <head> застосовують одинарний тег <link> з інформацією про таблицю.
<head>
<link href="адреса таблиці стилів"
type="text/css"
rel="stylesheet">
</head>
Тут
href="адреса таблиці стилів" — адреса розташування файлу,
type="text/css" — опис типу файлу,
rel="stylesheet" — вказівка на відношення основного файлу з файлом таблиці стилю.
Імпорт
Це те саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <style> і такої вказівки: @import URL(адреса таблиці стилів)
Вбудовування (використання стильових класів)
Якщо таблицю створено лише для деякого конкретного html-файлу, то її розташовують у цьому файлі в контейнері <style>. Таку таблицю стилів називають внутрішньою або вбудованою. Також стиль можна вбудувати безпосередньо в html-тег за допомогою атрибуту <style>. Наприклад, контейнер <span style="color: blue">Blue </span> створює блок з текстом синього кольору: Blue.
Таблиця стилів складається з правил, а правило — з назви тегу (селектора) чи списку назв тегів і описів стилів, які діятимуть у межах деякого html-файлу.
Відображення конкретних елементів визначалося їх атрибутами і багато в чому покладалось на спроможність браузера показувати ті чи інші елементи. Оскільки керувати зовнішнім виглядом все ж таки хотілося, стали з'являтися теги оформлення, такі, наприклад, як font або center. У результаті вміст документа і його оформлення тісно переплелися між собою. Код став громіздким, не гнучким, не читабельним.
Недоліки:
Переваги використання CSS:
- велика кількість зайвих конструкцій, що не відносяться безпосередньо до розмітки вмісту – великий розмір файлу, підвищується трафік і час завантаження;
- утруднено зміну дизайну. Наприклад, якщо потрібно поміняти колір, доведеться шукати всі атрибути color;
- істотні обмеження можливостей форматування. Більшість тегів просто неможливо налаштувати належним чином за допомогою одних тільки атрибутів;
- відсутня можливість підлаштовувати оформлення під різні типи пристроїв (монітор ПК, принтер, екран КПК, голосовий браузер і т.д.);
- код втрачає свою логічну розмітку (семантику), і як наслідок: погано індексується пошуковими роботами, адже їм доводиться обробляти купу «сміття»;
- значно погіршується доступність для користувачів, які використовують невізуальні браузери.
Виділення всіх правил для оформлення в окремий блок (файл), дозволяє вирішити ці проблеми. Код стає простішим, працювати з ним значно легше. Мова HTML стає такою, якою вона задумувалась розробниками – мовою смислової розмітки документа:
- код розмітки розділений на вміст і оформлення. Отримуємо більш легкий і зрозумілий код;
- файл з оформленням завантажується тільки один раз і кешується – зменшується трафік та час завантаження сторінок і навантаження на сервер;
- простота самої мови CSS + принцип відділення оформлення від змісту – скорочується час на розробку і підтримку сайту;
- один файл CSS управляє дизайном великої кількості HTML-сторінок. Зміна дизайну робляться швидше;
- CSS надає додаткові можливості форматування, які в атрибутах HTML відсутні;
- реалізований механізм підключення різних CSS для різних типів пристроїв;
- підвищення сумісності з різними платформами за рахунок використання веб-стандартів.
Правила в CSS працюють по каскаду ( пріоритету, вазі). Це дозволяє отримати передбачуваний результат у випадку, коли до одного елемента, одночасно, застосовуються декілька стильових правил. Правило має наступну структуру:
Всі CSS-правила складаються з селектора і блоку оголошень (укладеного у фігурні дужки). Всередині блоку оголошень може знаходитися одне або кілька оголошень, розділених крапкою з комою. Оголошення - це рядок, складений з css- властивості та її значення.
Кожне правило починається з селектора (покажчика), що вказує на ті html-елементи, до яких ми будемо застосувати css-правило. У блоці оголошень відбувається найцікавіше - ми встановлюємо правила відображення обраних нами елементів, визначаємо їх властивості - розмір, колір, грані, поля, положення на екрані і т.д.
Отже, CSS – це загальновизнаний міжнародний стандарт. CSS - це найпотужніший інструмент, один з найосновніших складових практично будь-якої веб-сторінки, без якої неможливо уявити сучасну веб-розробку.
20.3. Стильове оформлення сторінок
I. Опис каскадних таблиць стилів в розділі заголовка HTML-документа
В цьому випадку вміст каскадних таблиць стилів має бути розташований між тегами
<style type="text/css"> і </style> у заголовку HTML-документа.
Наприклад
Понеділок
1 математика
2 математика
3 математика
4 математика
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Розклад уроків</title>
<style type="text/css">
body { color:red; }
</style>
</head>
<body>
<h1>Понеділок</h1>
<p> 1 математика<br>
<p> 2 математика<br>
<p> 3 математика<br>
<p> 4 математика<br>
</body>
</html>
|
або
або
Понеділок
1 математика
2 математика
3 математика
4 математика
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Розклад уроків</title>
<style type="text/css">
body { color:red;}
p{ color:black;}
</style>
</head>
<body>
<h1>Понеділок</h1>
<p> 1 математика<br>
<p> 2 математика<br>
<p> 3 математика<br>
<p> 4 математика<br>
</body>
</html>
|
Понеділок
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <head> <title>Розклад уроків</title> <style type="text/css"> body { color:red; } h1 { color:blue; } p { color:yellow; } </style> </head> <body> <h1>Понеділок</h1> <p> 1 математика<br> <p> 2 математика<br> <p> 3 математика<br> <p> 4 математика<br> <h1>Вівторок</h1> <p> <p> 1 математика<br> <p> 2 математика<br> <p> 3 математика<br> <p> 4 математика<br> </p> </body> </html> |
II. Опис каскадних таблиць стилів у зовнішньому файлі
При використанні даного варіанту досягається максимальна гнучкість створення і зміни сайту. Вся інформація каскадних таблиць стилів зберігається в окремому файлі, а потім підключається до потрібного HTML-документу. При цьому з'являється можливість використовувати опис оформлення зовнішнього вигляду, виконаного одним файлом каскадних таблиць стилів, декількома або всіма сторінками сайту. І, відповідно, якщо потрібно буде змінити зовнішній вигляд всього сайту, то потрібно буде змінити один файл CSS, а не файли всіх сторінок сайту, як при використанні вище описаного методу.
Підключити файл CSS (наприклад, назвемо його mystyle.css) можна за допомогою тегу <link> таким чином: <link rel="stylesheet" type="text/css" href="mystyle.css">. Цей тег повинен знаходитися в заголовку HTML-документа.
Сам файл CSS містить лише список правил каскадних таблиць стилів необхідних для даного сайту.
Наприклад
Понеділок
|
1.css
body { color:red; } h1.zagol_ponedilok { color:blue; background-color:#00FF80; } p.ponedilok { color:black; } h1.zagol_vivtorok {color: #B5930B; background-color:#00FFFF;} p.vivtorok {color: #408080; } inddex.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Розклад уроків</title> <link rel="stylesheet" type="text/css" href="1.css" > </head> <body> <h1 class="zagol_ponedilok">Понеділок</h1> <p class="zagol_vivtorok"> 1 математика<br> <p> 2 математика<br> <p> 3 математика<br> <p> 4 математика<br> <h1 class="zagol_vivtorok">Вівторок</h1> <p> 1 математика<br> <p> 2 математика<br> <p> 3 математика<br> <p> 4 математика<br> </body> </html> |
ІІІ. Вбудовування (inline-опис) стилів
Задати певний зовнішній вигляд за допомогою стилів окремому елементу HTML-кода можна атрибутом style. Тегу style потрібно буде привласнити список необхідних правил CSS,
Використовувати даний варіант підключення каскадних таблиць стилів має сенс, коли потрібно надати певний зовнішній вигляд лише небагатьом елементам HTML-документа або змінити деякі властивості відображення елементу, властивості якого вже описані або в заголовку HTML-документа, або в зовнішньому файлі стилів.
Наприклад
Понеділок
|
1.css
body { color:red; } h1.zagol_ponedilok { color:blue; background-color:#00FF80; } p.ponedilok { color:black; } h1.zagol_vivtorok {color: #B5930B; background-color:#00FFFF;} p.vivtorok {color: #408080; } inddex.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Розклад уроків</title> <link rel="stylesheet" type="text/css" href="1.css" > </head> <body> <h1 class="zagol_ponedilok">Понеділок</h1> <p class="zagol_vivtorok"> 1 математика<br> <p> 2 математика<br> <p> 3 математика<br> <p> 4 математика<br> <h1 class="zagol_vivtorok">Вівторок</h1> <p> 1 математика<br> <p> 2 математика<br> <p> 3 математика<br> <p> 4 математика<br> <p style=" color:blue; background-color:white; "> Заголовок</p> <div style="background:#808080;">Вміст блоку div</div> </body> </html> |
Всі ці 3 способи використання каскадних таблиць стилів можна одночасно використовувати в одному HTML-документі.
Градієнти
За допомогою стилів CSS можна створювати градієнти, це атрибут linear-gradient, у якому слід вказати напрямок градієнта та назви кольорів (два і більше).
Наприклад, background: linear-gradient(red, yellow, green); - лінійний градієнт з трьох кольорів.
Варіанти градієнта: to right (зліва направо), to bottom right, (кутовий - до правого нижнього кута), або за допомогою вказання кута повороту градієнта, наприклад -90deg.
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); - горизонтальна веселка
background: radial-gradient(red, yellow, green); - радіальний градієнт
Наприклад, стиль
.content {background: linear-gradient(orange, yellow);}
створює градієнт на всю висоту сторінки (чи блоку) - вгорі буде оранжевий колір, внизу - жовтий.
Задавши додаткову властивість background-attachment: fixed; отримаємо зафіксований градієнт тла, яке не рухається при прокручуванні сторінки.
У стилі можна вказати адресу зображення властивістю background: url(header.jpg). У такому разі за умовчанням це зображення замостить простір по горизонталі та вертикалі. Якщо потрібно розмістити зображення лише по горизонталі, задають атрибут repeat-x (repeat-y - відповідно, по вертикалі). Зверніть увагу на скорочений запис того факту, що цей атрибут стосується властивості background, тому перед repeat-x НЕМАЄ крапки з комою.
.header {background: url(header.jpg) repeat-x; }
Можна, наприклад, вказати відсутність замощення і розташувати зображення по центру блоку no-repeat center;
Якщо ж додамо background-attachment: fixed; зображення тла буде зафіксоване при прокручуванні (щоправда, поки відвідувач не прокрутить вміст сторінки до наступного блоку).
Наприклад, body { background: url(background.jpg) fixed no-repeat center;} розміщує нерухоме зображення по центру сторінки.
Немає коментарів:
Дописати коментар
Примітка: лише член цього блогу може опублікувати коментар.