1. Каскадні таблиці стилів (CSS)
Стилі є зручним, практичним і ефективним інструментом при верстці веб-
сторінок і оформлення тексту, посилань, зображень та інших елементів.
2. Переваги стилів
Розмежування коду і оформлення - в ідеалі, веб-сторінка повинна містити тільки теги
логічного форматування, а вигляд елементів задається через стилі. При подібному поділі
робота над дизайном і версткою сайту може вестися паралельно.
Різне оформлення для різних пристроїв - за допомогою стилів можна визначити вид веб-
сторінки для різних пристроїв виводу: монітора, принтера, смартфона, планшета і ін. Ця
можливість також дозволяє приховувати або показувати деякі елементи документа при
відображенні на різних пристроях.
Розширені в порівнянні з HTML способи оформлення елементів - простими засобами
можна змінити колір фону елемента, додати рамку, встановити шрифт, визначити розміри,
положення і багато іншого.
Прискорення завантаження сайту - за рахунок кешування і того, що стилі зберігаються в
окремому файлі, зменшується код веб-сторінок і знижується час завантаження документів.
Єдине стильове оформлення безлічі документів - застосування однакового оформлення
заголовків, основного тексту та інших елементів створює спадкоємність між сторінками і
полегшує користувачам роботу з сайтом і його сприйняття в цілому. Розробникам ж
використання стилів істотно спрощує проектування дизайну.
Централізоване зберігання - стилі, як правило, зберігаються в одному або декількох
спеціальних файлах, посилання на які вказується в усіх документах сайту. Завдяки цьому
зручно правити стиль в одному місці, при цьому оформлення елементів автоматично
змінюється на всіх сторінках, які пов'язані із зазначеним файлом.
3. Способи додавання стилів на сторінку
Зв'язані стилі
При використанні зв'язаних стилів опис селекторів та їх
значень розташовується в окремому файлі, як правило, з
розширенням css, а для зв'язування документа з цим
файлом застосовується тег <link>. Даний тег поміщається в
контейнер <head>
Значення атрибута тега <link> - rel залишається незмінним
незалежно від коду, як у цьому прикладі.
Значення href задає шлях до CSS-файлу, він може бути
заданий як відносно, так і абсолютно. Зауважте, що таким
чином можна підключати таблицю стилів, яка знаходиться
на іншому сайті.
4.
5. Глобальні стилі
При використанні глобальних стилів властивості CSS описуються в
самому документі і розташовуються в заголовку веб-сторінки. За своєю
гнучкості і можливостям цей спосіб додавання стилю поступається
попередньому, але також дозволяє зберігати стилі в одному місці, в
даному випадку прямо на тій же сторінці за допомогою контейнера
<style>
6. Внутрішні стилі
Внутрішній або вбудований стиль є по суті розширенням для одиночного
тега використовується на поточній веб-сторінці. Для визначення стилю
використовується атрибут style, а його значенням виступає набір
стильових правил.
В даному прикладі стиль тега <p> задається за допомогою атрибута style,
в якому через крапку з комою перераховуються стильові властивості
7. Внутрішні стилі рекомендується застосовувати на
сайті обмежено або взагалі відмовитися від їх
використання.
Справа в тому, що додавання таких стилів збільшує
загальний обсяг файлів, що веде до підвищення часу
їх завантаження в браузері, і ускладнює редагування
документів для розробників.
Всі описані методи використання CSS можуть
застосовуватися як самостійно, так і в поєднанні
один з одним. В цьому випадку необхідно пам'ятати
про їх ієрархії.
Першим має пріоритет внутрішній стиль, потім
глобальний стиль і в останню чергу пов'язаний
стиль.
8.
9. Імпорт CSS
У поточну стильову таблицю можна імпортувати вміст
CSS-файлу за допомогою команди @import. Цей метод
допускається використовувати спільно зі зв'язаними або
глобальними стилями, але ніяк не з внутрішніми
стилями.
Синтаксис
@import url ("имя файлу") типи носіїв;
@import "имя файлу" типи носіїв;
Після ключовими словами @import вказується шлях до
стільового файлу одним з двох наведення способів - с
помощью url або без него.
10.
11. Базовий синтаксис CSS
Стильові правила записуються в своєму форматі, відмінному від HTML.
Основним поняттям виступає селектор - це деяке ім'я стилю, для якого
додаються параметри форматування. Як селектори виступають теги,
класи і ідентифікатори. Загальний спосіб запису має наступний вигляд.
Спочатку пишеться ім'я селектора, наприклад, TABLE, це означає, що все
стильові параметри будуть застосовуватися до тегу <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 в
шістнадцятковій системі.
Щоб не виникало плутанини у визначенні системи числення, перед
шістнадцятковим числом ставлять символ решітки #, наприклад #666999.
Кожен з трьох кольорів - червоний, зелений і синій - може набувати значень від 00
до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb.
Допускається використовувати скорочену форму виду #rgb, де кожен символ слід
подвоювати (#rrggbb). Наприклад, запис # fe0 розцінюється як # ffee00.
за назвою
Браузери підтримують деякі кольори по їх назві.
23. Имя Цвет Код Описание
white #ffffff или #fff Белый
silver #c0c0c0 Серый
gray #808080 Тёмно-серый
black #000000 или #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] | inherit
Значення
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 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.
54. Псевдоклас :invalid
Застосовується до полів форми, вміст яких не відповідає вказаному типу.
Наприклад, для type = "number" має бути введено число, а не букви, для type =
"email" коректну адресу електронної пошти.
Синтаксис: input:invalid { ... }
55. Псевдоклас :read-only
Засосовуэться до полів форми, у яких заданий атрибут readonly.
Таке поле не може бути модифіковано і отримати фокус.
Синтаксис: input: read-only {...}
56. Псевдоклас :active
Псевдоклас: active визначає стиль для активного посилання.
Активним посилання стає при натисненні на нього.
Синтаксис: A: active {...}
57. Псевдоклас :checked
Псевдоклас: checked застосовується до елементів інтерфейсу, таких як
перемикачі (checkbox) і прапорці (radio), коли вони знаходяться в положення
«включено».
Перемикання елементів в такий стан відбувається за допомогою атрибута
checked тега <input> або користувачем.
Синтаксис елемент: checked {...}
58. Псевдоклас :default
Псевдоклас: default застосовує стиль до елементів форм, які встановлені
за замовчуванням в групі схожих елементів.
Синтаксис: елемент: default {...}
59. Псевдоклас :disabled
Псевдоклас: disabled використовується для застосування стилю до
заблокованих елементів форм.
Такі елементи не можуть отримати фокус, бути натисненими або активовані, в
текстових полях можна набирати текст.
Синтаксис: селектор: disabled {...}
60. Псевдокласс :empty
Псевдоклас: empty представляє порожні елементи, іншими словами такі, які не
містять дочірніх елементів, тексту або прогалин.
Наприклад, <p> </ p> є порожнім елементом, а <p> </ p>, <p> & nbsp; </ p> або
<p> еге </ p> вже немає.
Синтаксис: елемент: 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 встановлює стиль для всіх перших осередків, оскільки батьком
для тега <td> виступає тег <tr>.
Синтаксис: елемент: first-of-type {...}
65. Псевдоклас: focus визначає стиль для елемента
отримує фокус. Наприклад, їм може бути
текстове поле форми, в яке встановлюється
курсор.
Синтаксис: елемент: focus {...}
Псевдоклас :focus
66. Псевдоклас :hover
Визначає стиль елементу при наведенні на нього курсора миші, але при
цьому елемент ще не активовано, іншими словами кнопка миші не
було натиснуто
Синтаксис: елемент:hover { ... }
67.
68. Псевдоклас :lang
Опис
Визначає мову, яка використовується в документі або
його фрагменті.
За допомогою псевдокласу: lang можна задавати певні
настройки, характерні для різних мов, наприклад, вид
лапок в цитатах.
Синтаксис
елемент: lang (<мова>) {...}
Значення
Як мова можуть виступати наступні значення: ru -
російська; en - англійська; de - німецький; fr -
французький; it - італійський і ін.
69. Для відображення типових лапок в прикладі використовується стильова властивість
quotes, а саме перемикання мови і відповідного виду лапок відбувається через атрибут
lang, що додається до тегу <q>.
70. Псевдоклас :optional
Застосовує стильові правила до тегу <input>, у якого не заданий атрибут
required.
Він дозволяє виділяти поля обов'язкові до заповнення перед відправкою
форми.
Таким чином: optional застосовується до необов'язкових полів форми.
Синтаксис: input: optional {...}
71. Псевдоклас :read-write
Застосовується до полів форми, доступних для зміни. Псевдоклас:
read-write є протилежним за своєю дією: read-only, який застосовується
до полів з атрибутом readonly (тільки для читання).
Синтаксис: input: read-write {...}
72. Псевдоклас :required
Застосовує стильові правила до тегу <input>, у якого встановлений
атрибут required. Він дозволяє виділяти поля обов'язкові до заповнення
перед відправкою форми.
Синтаксис: input: required {...}
В даному прикладі обов'язковим вважається поле для введення імені, воно
виділяється червоною рамкою за рахунок застосування псевдокласу:
required.
73.
74. Псевдоклас :root
Псевдоклас: root визначає кореневий елемент
документа.
В HTML цей селектор завжди відповідає елементу
<html>.
Синтаксис: root {...}
75. Псевдоклас :target
Для переходу до вибраного фрагменту документа, в адресі пишеться
символ # і вказується ім'я ідентифікатора.
Наприклад, в адресі http://www.w3.org/TR/css3-selectors/#target-pseudo
відбувається перехід до елементу, атрибут id якого заданий як target-
pseudo.
Такий запис адреси називається «цільовий елемент».
Псевдоклас: target застосовується до цільового елементу, іншими
словами, до ідентифікатора, який вказаний в адресному рядку
браузера.
Синтаксис: елемент: target {...}
76.
77. Псевдоклас :valid
Застосовується до полів форми, вміст яких проходить перевірку в браузері на
відповідність зазначеного типу. Наприклад, для type = "number" вводиться
число, а не букви, для type = "email" коректну адресу електронної пошти.
Синтаксис: 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.
Значение Номера элементов Описание
1 1 Первый элемент.
5 5 Пятый элемент.
2n 2, 4, 6, 8, 10 Все четные элементы, аналог значения even.
2n+1 1, 3, 5, 7, 9 Все нечетные элементы, аналог значения odd.
3n+2 2, 5, 8, 11, 14 —
-n+3 3, 2, 1 —
5n-2 3, 8, 13, 18, 23 —
even 2, 4, 6, 8, 10 Все четные элементы.
odd 1, 3, 5, 7, 9 Все нечетные элементы.
81. В даному прикладі непарні картинки вирівнюються по лівому краю вікна,
а парні картинки по правому
