Каскадні таблиці стилів (CSS) Стилі є зручним, практичним і ефективним інструментом при верстці веб- сторінок і оформлення тексту, посилань, зображень. - презентация

1 Каскадні таблиці стилів (CSS) Стилі є зручним, практичним і ефективним інструментом при верстці веб- сторінок і оформлення тексту, посилань, зображень та інших елементів.

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

3 Способи додавання стилів на сторінку Зв'язані стилі При використанні зв'язаних стилів опис селекторів та їх значень розташовується в окремому файлі, як правило, з розширенням css, а для зв'язування документа з цим файлом застосовується тег. Даний тег поміщається в контейнер Значення атрибута тега - rel залишається незмінним незалежно від коду, як у цьому прикладі. Значення href задає шлях до CSS-файлу, він може бути заданий як відносно, так і абсолютно. Зауважте, що таким чином можна підключати таблицю стилів, яка знаходиться на іншому сайті.

4

5 Глобальні стилі При використанні глобальних стилів властивості CSS описуються в самому документі і розташовуються в заголовку веб-сторінки. За своєю гнучкості і можливостям цей спосіб додавання стилю поступається попередньому, але також дозволяє зберігати стилі в одному місці, в даному випадку прямо на тій же сторінці за допомогою контейнера

6 Внутрішні стилі Внутрішній або вбудований стиль є по суті розширенням для одиночного тега використовується на поточній веб-сторінці. Для визначення стилю використовується атрибут style, а його значенням виступає набір стильових правил. В даному прикладі стиль тега задається за допомогою атрибута style, в якому через крапку з комою перераховуються стильові властивості

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

8

9 Імпорт CSS У поточну стильову таблицю можна імпортувати вміст CSS-файлу за допомогою Цей метод допускається використовувати спільно зі зв'язаними або глобальними стилями, але ніяк не з внутрішніми стилями. url ("имя файлу") типи "имя файлу" типи носіїв; Після ключовими вказується шлях до стільового файлу одним з двох наведення способів - с помощью url або без него.

10

11 Базовий синтаксис CSS Стильові правила записуються в своєму форматі, відмінному від HTML. Основним поняттям виступає селектор - це деяке ім'я стилю, для якого додаються параметри форматування. Як селектори виступають теги, класи і ідентифікатори. Загальний спосіб запису має наступний вигляд. Спочатку пишеться ім'я селектора, наприклад, TABLE, це означає, що все стильові параметри будуть застосовуватися до тегу, потім йдуть фігурні дужки, в яких записується стильова властивість, а його значення вказується після двокрапки. Стильові властивості поділяються між собою крапкою з комою, в кінці цей символ можна опустити. CSS не чутливий до регістру, перенесення рядків, прогалин і символів табуляції, тому форма запису залежить від бажання розробника.

12 Правила застосування стилів Форма запису Для селектора допускається додавати кожного стильова властивість і його значення окремо Приклад. Розширена форма запису td {background: olive; } td {color: white; } td {border: 1px solid black; } Однак такий запис не дуже зручна. Доводиться повторювати кілька разів один і той же селектор, та й легко заплутатися в їх кількості. Тому пишіть все властивості для кожного селектора разом. Зазначений набір записів в такому випадку отримає наступний вигляд Приклад. Компактна форма запису td { background: olive; color: white; border: 1px solid black; }

13

14 Має пріоритет значення, вказане в коді нижче Якщо для селектора спочатку задається властивість з одним значенням, а потім той же властивість, але вже з іншим значенням, то застосовуватися буде те значення, яке в коді встановлено нижче Приклад. Різні значення у одного властивості p {color: green; } p {color: red; } В даному прикладі для селектора p колір тексту спочатку встановлений зеленим, а потім червоним. Оскільки значення red розташоване нижче, то воно в підсумку і буде застосовуватися до тексту. Насправді такого запису краще взагалі уникати і видаляти повторювані значення. Але подібне може статися випадково, наприклад, в разі підключення різних стильових файлів, в яких містяться однакові селектори. Значення У кожної властивості може бути тільки відповідне його функції значення. Наприклад, для color, який встановлює колір тексту, як значення неприпустимо використовувати числа.

15 Коментарі Коментарі потрібні, щоб робити пояснення з приводу використання тої чи іншої стильової властивості, виділяти розділи або писати свої нотатки. Коментарі дозволяють легко згадувати логіку і структуру селектор, і підвищують розбірливість коду. Разом з тим, додавання тексту збільшує обсяг документів, що негативно позначається на часі їх завантаження. Тому коментарі зазвичай застосовують в налагоджувальних або навчальних цілях, а при викладанні сайту в мережу їх видаляють. Щоб позначити, що текст є коментарем, застосовують наступну конструкцію / *... * / Вкладені коментарі неприпустимі.

16 Значення стильових властивостей Все різноманіття значень стильових властивостей може бути зведене до певного типу: рядок, число, відсотки, розмір, колір, адреса або ключове слово. Рядки Будь-які рядки необхідно брати в подвійні або одинарні лапки. Якщо всередині рядка потрібно залишити одну або кілька лапок, то можна комбінувати типи лапок або додати перед лапками слеш 'Готель "Турист"' "Готель 'Турист'" «Готель \"Турист\"" В даному прикладі в першому рядку застосовуються одинарні лапки, а слово «Турист» взято в подвійні лапки. У другому рядку все з точністю до навпаки, в третій же рядку використовуються тільки подвійні лапки, але внутрішні екрановані за допомогою слеша.

17 Числа Значним може виступати ціле число, що містить цифри від 0 до 9 і десяткова дріб, в якій ціла. Якщо в десяткового дробу ціла частина дорівнює нулю, то її дозволяється не писати. Запис.7 і 0.7 рівнозначна.і десяткова частина розділяються крапкою

18 Відсотки Відсотковий запис зазвичай застосовується в тих випадках, коли треба змінити значення щодо батьківського елементу або коли розміри залежать від зовнішніх умов. Так, ширина таблиці 100% означає, що вона буде підлаштовуватися під розміри вікна браузера і змінюватися разом з шириною вікна. Відсотки не обов'язково повинні бути цілим числом, допускається використовувати десяткові дроби, на кшталт значення 56.8%.

19 Розміри Для завдання розмірів різних елементів, в CSS використовуються абсолютні і відносні одиниці виміру. Абсолютні одиниці не залежать від пристрою виводу, а відносні одиниці визначають розмір елементу щодо значення іншого розміру. Відносні одиниці Відносні одиниці зазвичай використовують для роботи з текстом, або коли треба обчислити процентне співвідношення між елементами. У табл. 6.1 перераховані основні відносні одиниці. Одиниця em це змінне значення, яке залежить від розміру шрифту поточного елементу (розмір встановлюється через стильову властивість font-size). В кожному браузері закладений розмір тексту, який застосовується в тому випадку, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за замовчуванням або розміром шрифту батьківського елементу. Відсоткова запис ідентична em, в тому сенсі, що значення 1em і 100% рівні. Одиниця ex визначається як висота символу «x» в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за замовчуванням, або до розміру шрифту батьківського елементу. Піксель це елементарна точка, яка відображається монітором або іншим подібним пристроєм, наприклад, смартфоном. Розмір пікселя залежить від дозволу пристрою і його технічних характеристик.

20 ЕдиницаОписание emРазмер шрифта текущего элемента exВысота символа x pxПиксел %Процент При установці розмірів обов'язково вказуйте одиниці виміру, наприклад width: 30px. В іншому випадку браузер не зможе показати бажаний результат, оскільки не розуміє, який розмір вам потрібно. Одиниці не додаються тільки при нульовому значенні (margin: 0).

21 Абсолютні одиниці Абсолютні одиниці застосовуються рідше, ніж відносні і зазвичай при роботі з текстом. Найбільш, мабуть, найпоширенішою одиницею є пункт, який використовується для вказівки розміру шрифту. ЕдиницаОписание inДюйм (1 дюйм равен 2,54 см) cmСантиметр mmМиллиметр ptПункт (1 пункт равен 1/72 дюйма) pcПика (1 пика равна 12 пунктам)

22 Колір Колір в стилях можна задавати трьома способами: по шістнадцятиричним значенням, за назвою і в форматі RGB. За шістнадцятиричним значенням Для завдання квітів використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифри від 10 до 15 замінені латинськими буквами. Числа більше 15 в шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятковій системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ решітки #, наприклад # Кожен з трьох кольорів - червоний, зелений і синій - може набувати значень від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb. Допускається використовувати скорочену форму виду #rgb, де кожен символ слід подвоювати (#rrggbb). Наприклад, запис # fe0 розцінюється як # ffee00. за назвою Браузери підтримують деякі кольори по їх назві.

23 ИмяЦветКодОписание white #ffffff или #fffБелый silver #c0c0c0Серый gray #808080Тёмно-серый black # или #000Чёрный maroon #800000Тёмно-красный red #ff0000 или #f00Красный orange #ffa500Оранжевый yellow #ffff00 или #ff0Жёлтый olive #808000Оливковый lime #00ff00 или #0f0Светло-зелёный green #008000Зелёный aqua #00ffff или #0ffГолубой blue #0000ff или #00fСиний navy #000080Тёмно-синий teal #008080Сине-зелёный fuchsia #ff00ff или #f0fРозовый purple #800080Фиолетовый

24 За допомогою RGB Можна визначити колір, використовуючи значення червоної, зеленої та синьої компоненти в десятковому численні. Значення кожного з трьох кольорів може набувати значень від 0 до 255. Також можна задавати колір у відсотковому відношенні. Спочатку вказується ключове слово rgb, а потім в дужках, через кому вказуються компоненти кольору, наприклад rgb (255, 0, 0) або rgb (100%, 20%, 20%).

25 Адреси Адреси (URI, Uniform Resource Identifiers, уніфікований ідентифікатор ресурсів) застосовуються для вказівки шляху до файлу, наприклад, для установки фонової картинки на сторінці. Для цього застосовується ключове слово url(), всередині дужок пишеться відносний або абсолютний адресу файлу. При цьому адресу можна задавати в необов'язкових одинарних або подвійних лапках В даному прикладі в селекторі body використовується абсолютна адреса до графічного файлу, а в селекторі div - відносна.

26 background Універсальна властивість background дозволяє встановити одночасно до п'яти характеристик фону. Значення можуть йти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібному властивості. В CSS3 допустимо вказувати параметри відразу декількох фонів, перераховуючи їх через кому. Синтаксис CSS2.1background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit CSS3background: [, ]* Будь-які комбінації п'яти значень, поділюваних між собою пропуском, що визначають стиль фону, в довільному порядку. Жодне значення не є обов'язковим, тому невикористовувані можна опустити. inherit успадковує значення у батьківського елементу.

27

28

29 background-attachment Властивість background-attachment встановлює, чи буде прокручуватися фонове зображення разом з вмістом елементу. Зображення може бути зафіксовано і залишатися нерухомим, або переміщатися разом з документом. В CSS3 можна вказати кілька значень для ряду фонових зображень, перераховуючи значення через кому. Не наслідується Синтаксис CSS2.1background-attachment: fixed | scroll | inherit CSS3background-attachment: fixed | scroll | local[, fixed | scroll | local]* Значення fixed - Робить фонове зображення елемента нерухомим. scroll - Дозволяє переміщатися фону разом з вмістом; за замовчуванням inherit - Успадковує значення батька. local - Фон фіксується з урахуванням поведінки елемента. Якщо елемент має прокрутку, то фон буде прокручуватися разом з вмістом, але фон виходить за рамки елемента залишається на місці.

30

31

32 background-color Визначає колір фону елемента. Хоча це властивість не буде наслідувати властивості свого батька, через те, що початкове значення встановлюється прозорим, колір фону дочірніх елементів збігається з кольором фону батьківського елементу. Синтаксис background-color: | transparent | inherit Значення: transparent - прозорий фон. inherit - наслідує значення батька

33

34 background-image Встановлює фонове зображення для елемента. Якщо одночасно для елемента задано колір фону, він буде показаний, поки фонова картинка не завантажиться повністю. Те ж відбудеться, якщо зображення не доступні або їх показ в браузері відключений. У разі наявності в малюнку прозорих областей, через них буде проглядатися фоновий колір. В CSS3 допустимо вказувати кілька фонових зображень, перераховуючи їх параметри через кому. Синтаксис CSS2.1background-image: url(путь к файлу) | none | inherit CSS3background-image: url(путь к файлу) | none[, url(путь к файлу) | none]* Значення url - Як значення використовується шлях до графічного файлу, який вказується всередині конструкції url(). Шлях до файлу при цьому можна писати як в лапках (подвійних або одинарних), так і без них. none - Скасовує фонове зображення для елемента. inherit - Успадковує значення батька

35

36 background-position Задає початкове положення фонового зображення, встановленого за допомогою властивості background-image. В CSS3 допустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому. Синтаксис CSS2.1 background-position: [left | center | right | | ] || [top | center | bottom | | ] | inherit CSS3 background-position: [, ]*

37 Значення У властивості background-position два значення, положення по горизонталі (може бути - left, center, right) і вертикалі (може бути - top, center, bottom). Крім використання ключових слів положення також можна задавати у відсотках, пікселах або інших одиницях. Якщо застосовуються ключові слова, то порядок їх прямування не має значення, при процентній записи спочатку задається положення малюнка по горизонталі, а потім, через пробіл, положення по вертикалі. top left = left top = 0% 0% (в лівому верхньому кутку) top = top center = center top = 50% 0% (по центру вгорі) right top = top right = 100% 0% (у правому верхньому куті) left = left center = center left = 0% 50% (по лівому краю і по центру) center = center center = 50% 50% (по центру) right = right center = center right = 100% 50% (по правому краю і по центру) bottom left = left bottom = 0% 100% (в лівому нижньому кутку) bottom = bottom center = center bottom = 50% 100% (по центру внизу) bottom right = right bottom = 100% 100% (в правому нижньому кутку) В дужках вказано, де розташовується фоновий малюнок щодо контейнера.

38

39

40 background-repeat Визначає, як буде повторюватися фонове зображення, встановлене за допомогою властивості background-image. Можна встановити повторення малюнка тільки по горизонталі, по вертикалі або в обидві сторони. В CSS3 допустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому. Синтаксис CSS2.1 background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit CSS3 background-repeat: [, ]*

41 Значення no-repeat - встановлює одне фонове зображення в елементі без його повторень, положення якого визначається властивістю background- position (за замовчуванням в лівому верхньому куті). Аналогічно no- repeat no-repeat. repeat - фонове зображення повторюється по горизонталі і вертикалі. Аналогічно repeat repeat. repeat-x - фоновий малюнок повторюється тільки по горизонталі. Аналогічно repeat no-repeat. repeat-y - фоновий малюнок повторюється тільки по вертикалі. Аналогічно no-repeat repeat. inherit - успадковує значення батька. space - зображення повторюється стільки раз, щоб повністю заповнити область; якщо це не вдається, між картинками додається порожній простір. round - зображення повторюється так, щоб в області помістилося ціле число малюнків; якщо це не вдається зробити, то фонові малюнки масштабируются.

42

43 border Універсальна властивість border дозволяє одночасно встановити товщину, стиль і колір границі навколо елемента. Значення можуть йти в будь-якому порядку, розділяючись пробілом, браузер сам визначить, яке з них відповідає потрібному властивості. Для установки границі тільки на певних сторонах елементу, скористайтеся властивостями border-top, border-bottom, border-left, border-right. Синтаксис border: [border-width || border-style || border-color] | inheritborder-widthborder-styleborder-color Значення border-width визначає товщину границі. Для управління її видом надається кілька значень border-style. border-color встановлює колір границі, значення може бути в будь- якому допустимому для CSS форматі. inherit успадковує значення батька.

44

45 border-width Задає товщину кордону одночасно на всіх сторонах елементу або індивідуально для кожної сторони. Спосіб зміни товщини залежить від числа значень. Синтаксис border-width: [значение | thin | medium | thick] {1,4} | inherit Значення Три змінні - thin (2 пікселя), medium (4 пікселі) і thick (6 пікселів) задають товщину кордону. Для більш точного значення, товщину можна вказувати в пікселях або інших одиницях. inherit успадковує значення батька. Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості Число значений Результат 1Толщина границы будет установлена для всех сторон элемента. 2 Первое значение устанавливает толщину верхней и нижней границы, второе левой и правой. 3 Первое значение задает толщину верхней границы, второе одновременно левой и правой границы, а третье нижней границы. 4Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

46

47 border-style Встановлює стиль кордону навколо елемента. Припустимо задавати індивідуальні стилі для різних сторін елемента. Синтаксис border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit Для управління видом границі надається кілька значень властивості border-style. Вид залежить від використовуваного браузера і заданої товщини кордону. У табл. наведені назви стилів і отримується рамка при різних значеннях товщини - 1, 3, 5 і 7 пікселів.

48

49 none - чи не відображає кордон і її товщина (border-width) задається нульовий. hidden - має той же ефект, що і none за винятком застосування border- style до елементів таблиці, у якій значення властивості border-collapse встановлено як collapse - в цьому випадку навколо осередку кордон не буде відображатися взагалі. inherit - успадковує значення батька. Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості

50

51 border-color Встановлює колір кордону на різних сторонах елементу. Властивість дозволяє задати колір кордону відразу для всіх сторін елемента або тільки для зазначених. Синтаксис border-color: [колір | transparent] {1,4} | inherit transparent - встановлює прозорий колір. inherit - успадковує значення батька. Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Результат залежить від кількості Число значений Результат 1 Цвет границы будет установлен для всех сторон элемента. 2 Первое значение устанавливает цвет верхней и нижней границы, второе левой и правой. 3 Первое значение задает цвет верхней границы, второе одновременно левой и правой границы, а третье нижней границы. 4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

52

53 ПСЕВДОКЛАСИ

54 Псевдоклас :invalid Застосовується до полів форми, вміст яких не відповідає вказаному типу. Наприклад, для type = "number" має бути введено число, а не букви, для type = " " коректну адресу електронної пошти. Синтаксис: input:invalid {... }

55 Псевдоклас :read-only Засосовуэться до полів форми, у яких заданий атрибут readonly. Таке поле не може бути модифіковано і отримати фокус. Синтаксис: input: read-only {...}

56 Псевдоклас :active Псевдоклас: active визначає стиль для активного посилання. Активним посилання стає при натисненні на нього. Синтаксис: A: active {...}

57 Псевдоклас :checked Псевдоклас: checked застосовується до елементів інтерфейсу, таких як перемикачі (checkbox) і прапорці (radio), коли вони знаходяться в положення «включено». Перемикання елементів в такий стан відбувається за допомогою атрибута checked тега або користувачем. Синтаксис елемент: checked {...}

58 Псевдоклас :default Псевдоклас: default застосовує стиль до елементів форм, які встановлені за замовчуванням в групі схожих елементів. Синтаксис: елемент: default {...}

59 Псевдоклас :disabled Псевдоклас: disabled використовується для застосування стилю до заблокованих елементів форм. Такі елементи не можуть отримати фокус, бути натисненими або активовані, в текстових полях можна набирати текст. Синтаксис: селектор: disabled {...}

60 Псевдокласс :empty Псевдоклас: empty представляє порожні елементи, іншими словами такі, які не містять дочірніх елементів, тексту або прогалин. Наприклад, є порожнім елементом, а, & nbsp; або еге вже немає. Синтаксис: елемент: empty {...}

61 Псевдоклас :enabled Псевдоклас: enabled використовується для застосування стилю до доступних (не заблокованх) елементів форм. За замовчуванням, всі елементи форм є доступними, якщо в коді HTML до них не додається атрибут disabled. Синтаксис: елемент: enabled {...}

62 Псевдоклас :first-child Псевдоклас: first-child застосовує стильове оформлення до першого дочірньому елементу свого батька. Синтаксис: елемент: first-child {...}

63

64 Псевдоклас :first-of-type Псевдоклас: first-of-type задає правила стилів для першого елемента в списку дочірніх елементів свого батька. Наприклад, додавання: first-of-type до селектора TD встановлює стиль для всіх перших осередків, оскільки батьком для тега виступає тег. Синтаксис: елемент: first-of-type {...}

65 Псевдоклас: focus визначає стиль для елемента отримує фокус. Наприклад, їм може бути текстове поле форми, в яке встановлюється курсор. Синтаксис: елемент: focus {...} Псевдоклас :focus

66 Псевдоклас :hover Визначає стиль елементу при наведенні на нього курсора миші, але при цьому елемент ще не активовано, іншими словами кнопка миші не було натиснуто Синтаксис: елемент:hover {... }

67

68 Псевдоклас :lang Опис Визначає мову, яка використовується в документі або його фрагменті. За допомогою псевдокласу: lang можна задавати певні настройки, характерні для різних мов, наприклад, вид лапок в цитатах. Синтаксис елемент: lang ( ) {...} Значення Як мова можуть виступати наступні значення: ru - російська; en - англійська; de - німецький; fr - французький; it - італійський і ін.

69 Для відображення типових лапок в прикладі використовується стильова властивість quotes, а саме перемикання мови і відповідного виду лапок відбувається через атрибут lang, що додається до тегу.

70 Псевдоклас :optional Застосовує стильові правила до тегу, у якого не заданий атрибут required. Він дозволяє виділяти поля обов'язкові до заповнення перед відправкою форми. Таким чином: optional застосовується до необов'язкових полів форми. Синтаксис: input: optional {...}

71 Псевдоклас :read-write Застосовується до полів форми, доступних для зміни. Псевдоклас: read-write є протилежним за своєю дією: read-only, який застосовується до полів з атрибутом readonly (тільки для читання). Синтаксис: input: read-write {...}

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

73

74 Псевдоклас :root Псевдоклас: root визначає кореневий елемент документа. В HTML цей селектор завжди відповідає елементу. Синтаксис: root {...}

75 Псевдоклас :target Для переходу до вибраного фрагменту документа, в адресі пишеться символ # і вказується ім'я ідентифікатора. Наприклад, в адресі відбувається перехід до елементу, атрибут id якого заданий як target- pseudo. Такий запис адреси називається «цільовий елемент». Псевдоклас: target застосовується до цільового елементу, іншими словами, до ідентифікатора, який вказаний в адресному рядку браузера. Синтаксис: елемент: target {...}

76

77 Псевдоклас :valid Застосовується до полів форми, вміст яких проходить перевірку в браузері на відповідність зазначеного типу. Наприклад, для type = "number" вводиться число, а не букви, для type = " " коректну адресу електронної пошти. Синтаксис: input: valid {...}

78 Псевдоклас :visited Псевдоклас: visited застосовується до посилань, вже відвіданих користувачем, і задає для них стильове оформлення. Синтаксис: a: visited {...}

79 Псевдоклас :nth-of-type Псевдоклас: nth-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів. Синтаксис елемент: nth-of-type (odd | even | | ) {...} Значення оdd - всі непарні номери елементів. еven - всі парні номери елементів. число - порядковий номер зазначеного елемента. Нумерація починається з 1, це буде перший елемент у списку. вираз - здається у вигляді an + b, де a і b цілі числа, а n - лічильник, який автоматично приймає значення 0, 1, 2...

80 Якщо a дорівнює нулю, то воно не пишеться і запис скорочується до b. Якщо b дорівнює нулю, то воно також не вказується і вираз записується в формі an. a і b можуть бути відємними числами, в цьому випадку знак плюс змінюється на мінус, наприклад: 5n-1. За рахунок використання від'ємних значень a і b деякі результати можуть також вийти негативними або рівними нулю. Однак на елементи впливають тільки позитивні значення через те, що нумерація елементів починається з 1. ЗначениеНомера элементовОписание 11Первый элемент. 55Пятый элемент. 2n2, 4, 6, 8, 10Все четные элементы, аналог значения even. 2n+11, 3, 5, 7, 9Все нечетные элементы, аналог значения odd. 3n+22, 5, 8, 11, 14 -n+33, 2, 1 5n-23, 8, 13, 18, 23 even2, 4, 6, 8, 10Все четные элементы. odd1, 3, 5, 7, 9Все нечетные элементы.

81 В даному прикладі непарні картинки вирівнюються по лівому краю вікна, а парні картинки по правому