Практична робота
Теорія до уроку розміщена після завдань для практичної роботи.
1) Використовуючи результати практичної роботи, де Ви створювали резюме
доповнити резюме учня наступним чином:
змінити зовнішній вигляд документа, використовуючи каскадні таблиці стилів:
змінити відступи між елементами, їхнє вирівнювання;
змінити колір, розмір та насиченість текстів заголовків всіх рівнів та основного тексту.
При виконанні цього завдання слід дотримуватись певного стилю, щоб створюваний документ виглядав професійно та зручно для читання. Наприклад, слід використовувати не більше двох шрифтів на одній сторінці (один для заголовків, інший для основного тексту), не більше 2-3 яскравих кольорів, не дуже маленький розмір літер, тощо;
2)додати до документа фон згідно з варіантом з додатку Б, використовуючи де можливо колір та повторювані зображення.
3)Змінити таблицю, створену при виконанні практичної роботи з додатку А наступним чином:
− призначити кожній комірці таблиці унікальний клас. Використовуючи псевдоселектори зробити так, щоб при наведенні та натисканні на комірку вона змінювала колір;
− зробити так, щоб комірки останнього рядка змінювали колір плавно протягом деякого часу (0,5 - 2с на вибір учня).
Додаток Б
Щоб побачити всі варіанти слід нажати стрілку вліво (вправо).
Номер вашого прізвища відповідає номеру варіанту, якщо ви знаходитесь під номером 17 або 18, додаєте ці цифри і виконуєте відповідно 8 (якщо 1+7=8) або 9 ), заповнивши її довільними даними. Заштриховані комірки вважати заголовками.
Теорія:
Підключення CSS
Для додавання стилів на web-сторінку існує кілька спосо-бів, які відрізняються своїми можливостями й призначенням.
1 Таблиця зв'язаних стилів
При використанні таблиці зв'язаних стилів опис селекторів та їхніх властивостей міститься в окремому файлі, як правило, з розширенням css, а для зв'язування документа із цим файлом за-стосовується тег <lіnk />. Даний тег розміщується в контейнері <head></head>.
<link rel="stylesheet" type="text/css" href="style.css"/>
Атрибут href задає шлях до CSS-файла, він може бути зада-ний як відносно, так і абсолютно. Використання таблиці зв'язаних стилів є найбільш універсальним і зручним методом додавання стилю на сайт, адже стилі зберігаються в одному файлі, а в HTML-документах вказується тільки посилання на нього.
2 Таблиця глобальних стилів
При використанні таблиці глобальних стилів властивості CSS описуються в самому документі й зазвичай розташовуються в заголовку web-сторінки. За своєю гнучкістю й можливостями цей спосіб додавання стилю поступається попередньому, але та-кож дозволяє розміщувати всі стилі в одному місці. У цьому ви-падку стилі розміщують прямо в тілі документа, за допомогою елемента <style></style>.
<style type="text/css"> ... </style>
Таблиця глобальних стилів може розміщуватися не тільки всередині контейнера <head></head>, але також у будь-якому місці коду HTML-документа.
3 Внутрішні стилі
Внутрішній стиль є розширенням для одиночного тега, що використовується на web-сторінці. Для визначення стилю використовується атрибут тега style, а його значення вказуються за допомогою синтаксису таблиці стилів.
<h1>Заголовок</h1>
В даному прикладі стиль тега <h1> задається за допомогою параметра style, у якому через крапку з комою перераховуються стильові атрибути. Внутрішні стилі рекомендується застосовувати на сайті обмежено або взагалі відмовитися від їхнього використання.
Базовий синтаксис. Селектори
CSS має власний стандартизований спосіб запису та у зага-льному виді має наступний синтаксис.
селектор {
властивість1:значення;
властивість2:значення;
...
}
Селектором називається ім'я стилю, в якому зазначені параметри форматування. Селектор дозволяє групувати властивості за певною ознакою. Селектори поділяються на декілька типів: селектори тегів, ідентифікатори й класи. Також існує таке поняття як псевдоселектори (псевдокласи).
Після вказівки селектора йдуть фігурні дужки, у яких записується необхідна стильова властивість, її значення вказується після двокрапки. Параметри розділяються між собою крапкою з комою, в кінці цей символ можна опустити. CSS не чутливий до регістру, переносу рядків, пробілів і символів табуляції. Імена селекторів обов'язково повинні починатися з латинського симво-лу (a-z, A-Z), можуть містити цифри, дефіс або знак підкреслен-ня.
Селектори тегів
Селектором може виступати будь-який тег HTML, для яко-го визначаються правила форматування. При цьому зазначені правила будує застосовано до всіх відповідних тегів у документі.
Правила задаються в наступному виді:
тег {
властивість1:значення;
властивість2:значення;
...
}
Наприклад:
В даному прикладі всі кнопки, визначені тегом button будуть мати білий фон (#fff), червону межу товщиною 2 пікселя, та жирний текст червоного кольору, розміром 18 пікселів де всі лі-тери прописні.
Класи
Класи застосовують, коли необхідно визначити стиль для групи елементів сторінки або задати різні стилі для одного тега. Ім'я класу в CSS починається з крапки. Базовий синтаксис для класів наступний:
.клас {
властивість1:значення;
властивість2:значення;
}
Щоб вказати в коді HTML, що тег повинен мати певний клас, до тега додається атрибут. Імена класів вибираються за бажанням розробника, і можуть відображати суть застосованого стилю, розташування або призначення елемента, тощо. Бажано, щоб вони були зрозумілі й відповідали їхньому використанню.
Класи зручно використовувати, коли потрібно застосувати стиль до різних тегів web-сторінки: комірок таблиці, посилань, параграфів.
Ідентифікатори
Ідентифікатор визначає унікальне ім'я елемента, та дозволяє однозначно ідентифікувати елемент на сторінці.
В CSS назва ідентифікатора починається зі знаку «решітка». Синтаксис використання ідентифікатора наступний.
#ідентифікатор {
властивість1:значення;
властивість2:значення;
}
Контекстні селектори
Одному і тому самому елементу сторінки можна призначити стилі багатьма способами: за іменем тега, за класом, за ідентифікатором. Також селектори можна групувати, визначаючи більш вузький перелік елементів, до яких буде застосовано стиль.
Наприклад можна одночасно встановити більш глобальний стиль для тега, стиль для цього ж тега, що має певний клас та окремий стиль для тега, що перебуває всередині іншого. При цьому стилі, які не було перепризначено, успадковуються від більш глобального стиля.
Контекстний селектор складається із простих селекторів, розділених пробілом. Так, для селектора тега синтаксис буде наступний:
тег1 тег2 {
...
}
В даному випадку стиль буде застосовуватися до тега2 тільки якщо він розміщується всередині тега1, як показано нижче:
<тег1>
<тег2> ... </тег2>
</тег1>
Не обов'язково контекстні селектори містять тільки один вкладений тег. Залежно від ситуації припустимо застосовувати два й більш послідовно вкладених один в інший тегів. Більш ши-рокі можливості контекстні селектори дають при використанні ідентифікаторів і класів. Це дозволяє встановлювати стиль тільки для того елемента, що знаходиться всередині певного класу.
При такому підході легко управляти стилем однакових елементів, оформлення яких повинне розрізнятися в різних областях web-сторінки.
Групування селекторів
При створенні стилю для сайта, коли одночасно використо-вується багато селекторів, можлива поява повторюваних параме-трів. Щоб не повторювати двічі однакові властивості, їх можна згрупувати для зручності подання й скорочення коду. Селекторигрупуються у вигляді списку тегів, розділених між собою кома-ми. У групу можуть входити не тільки селектори тегів, але також ідентифікатори й класи. Загальний синтаксис наступний.
селектор1,
селектор2,
...
селекторN {
властивість1:значення;
властивість2:значення;
}
Псевдоселектори
Псевдоселектори - це спеціальні ключові слова, що дозво-ляють описати стан елемента (найбільш актуально для посилань), положення в структурі сторінки, тощо. Псевдоселектор запису-ється через двокрапку після селектора елемента, до якого він від-носиться.
Для посилань використовують псевдоселектори :link, :hover, :visited та :active.
− :link - відповідає за початкові стилі посилання;
− :hover - стан об'єкта при наведенні на нього курсору;
− :active - стан активного об'єкта, наприклад, під час нати-скання мишкою;
− :visited - стан відвіданого посилання.
Псевдоселектор :hover можна застосувати до будь-якого елемента на сторінці. Наприклад фон кнопки при наведенні буде змінюватись на червоний:
Оскільки HTML є ієрархічною структурою, за допомогою псевдоселекторів можна звертатись до конкретних елементів відносно ієрархії:
− :first-child - перший дочірній елемент поточного елемента;
− :last-child - відповідно, останній дочірній елемент;
− :only-child - застосовує стиль до елемента, якщо він єдиний дочірній елемент;
− :nth-child() - конкретний за порядком дочірній елемент, рахуючи за початку (p:nth-child(4) - четвертий абзац);
− :nth-last-child() - конкретний за порядком елемент, рахуючи з кінця.
В селекторах :nth-child() та :nth-last-child() можна задавати не тільки конкретні цифри, але й ключові слова та лічильники, наприклад :nth-child(2n) та :nth-child(even) - всі парні елементи.
У даному прикладі кожен другий абзац буде мати світло-сірий фон, а у першого абзацу шрифт буде більший, ніж в інших.
