Лекція 4. Знайомство з CSS. Селектори

1.     Введення в CSS

На попередніх лекціях Ви вже трохи познайомилися з CSS. В цій і наступних лекціях ми розберемо його детально.

Нагадаємо, що CSS розшифровується як «каскадні таблиці стилів». Ця мова відповідає за зовнішній вигляд HTML-сторінки. Синтаксис мови досить простий: він складається з селекторів і властивостей. За допомогою селекторів можна сказати браузеру які саме елементи ми хочемо оформити. Властивості описують як саме ми хочемо оформити ці елементи.

В лекції Структура HTML-документа були описані різні способи підключення стилів (через тег <style>, через атрибут style=”…” або через зовнішній файл <link href = "style.css" rel = "stylesheet">).

Весь CSS-код складається з повторюваних блоків такого вигляду:

селектор {

 властивість1: значення;

 властивість2: значення;

 }

Такий блок називається «CSS-правило». Кожне CSS-правило містить, хоча б, один селектор і властивість.

Найпростіші селектори - це селектори з іменами тегів. За їх допомогою можна задати стилі для всіх абзаців на сторінці, для всіх посилань, заголовків першого рівня і так далі. Такі селектори містять ім'я тега без символів < і >. Наприклад:

p {

 / * Стилі для абзаців * /

 }

h1 {

 / * Стилі для заголовків * /

 }

До більш складних селекторів можна віднести селектори з використанням класів і псевдокласів. Клас дозволяє об'єднувати різні елементи в смислові групи і застосовувати до них однакове оформлення. Наприклад, можна створити клас «елементи з помилкою» і задати йому червоний колір тексту. Потім можна додавати цей клас до будь-якого HTML-тегу: абзацу, заголовку, елементу списку і так далі.

Клас тега можна задати за допомогою атрибуту class, який містить ім'я класу (або імена класів через пробіл). Приклад:

 <p class = "help"> </ p>

 <p class = "help error"> </ p>

У прикладі, першому абзацу заданий клас help, другому – задані класи help і error.

Селектор з використанням класу задається так: .імя_класу. Наприклад:

 .help {...}

 .error {...}

Властивості для оформлення тексту

В CSS існує величезна кількість властивостей. Їх можна розбити на наступні групи:

•         оформлення тексту;

•         робота з розмірами і відступами;

•         позиціонування елементів;

•         створення сіток;

•         декоративні: кольори, фон, тіні;

•         інші.

Властивості для завдання розмірів і відступів

З допомогою CSS можна задавати ширину, висоту, зовнішні та внутрішні відступи елементів, мінімальну і максимальну ширину і висоту і так далі. Всі властивості, які так чи інакше впливають на розміри і відступи елементів, описуються в в так званій «Блочній моделі документа». Крім властивостей для відступів і розмірів в блокову модель входять властивості для опису меж, та дуже важлива властивість display, що визначає тип елемента (блочний, рядковий чи інший).

Позиціонування елементів

За допомогою позиціонування можна дуже точно і гнучко управляти розташуванням елементів. Позиціонування застосовують для створення складних «багатошарових» інтерфейсів, таких як спливаючі вікна чи галереї, а також для верстки дрібних декоративних елементів.

 Головною властивістю для роботи з позиціонуванням є position, що перемикає режими позиціювання елемента. Ще чотири властивості: top, right, bottom, left, управляють розташуванням елемента. І остання властивість z-index управляє порядком шарів (аналогічно до шарів у Photoshop).

Створення сітки сторінки

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

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

Декоративні властивості

Щоб зробити сторінку яскравою і красивою можна використовувати безліч властивостей: колір тексту, фон, тіні, рамки, закруглення й багато інших.

Каскадність

Нагадаємо, що CSS розшифровується як «каскадні таблиці стилів». Чому саме каскадні? Вся справа в тому, що стилі для елемента можуть бути визначені в декількох місцях. Браузер знаходить всі CSS-правила, що зачіпають даний елемент, а потім комбінує їх і отримує підсумковий список властивостей для цього елемента. Комбінування властивостей проводиться за чіткими правилам, які спираються на пріоритетність і специфічність. Назва «каскадні» з'явилась через описаний механізм комбінування стилів з різних CSS-правил для конкретного елемента (абзацу(ів), заголовку(ів) і т.д.). Наприклад, якщо для елемента вказано два стилі то вони комбінуються (накладаються один на одний), ось так:

 p {

 padding: 10px;

 }

 +

 .truth {

 background-color: # dff0d8;

 }

 =

 стилі абзацу в якого вказаний клас truth {

 padding: 10px;

 background-color: # dff0d8;

 }

Якщо в декількох стилях, що накладаються, є однакові властивості (наприклад background-color) то використовуються спеціальні пріоритети. В результаті властивість з стилю з вищим пріоритетом перекриває властивість з стилю з нижчим:

p {

 padding: 10px;

 background-color: # dff0d8;

 }

 +

.truth {

 background-color: #aaddff;

 }

 =

стилі абзацу в якого вказаний клас truth {

 padding: 10px;

 background-color: #aaddff;

 }

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

1.                CSS-правила в атрибуті style найбільш пріоритетні,

2.                за ними йде селектор з id,

3.                потім селектор з класом,

4.                потім селектор з ім'ям тега.

Коли до одного елементу застосовується кілька CSS-правил, то пріоритетність цих правил визначається за їх селектором. Якщо селектори однотипні, то більш пріоритетним є CSS-правило, яке розташоване нижче в коді. Отже, одному і тому ж елементу можна призначати декілька класів. Завдяки механізму каскадності, CSS-правила цих класів будуть комбінуватися, а при конфлікті властивостей буде застосовуватися механізм пріоритетів. Насправді, механізм визначення пріоритетів та специфічності більш складний. Детально він буде описаний у наступній лекції.

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

Наслідування

Інший важливий механізм CSS - це спадкування. Суть його полягає в тому, що частина стилів може передаватися від батьківського елемента до дочірнього (вкладеного в нього). Наприклад, всі елементи всередині тега <body> є дочірніми по відношенню до нього. Якщо для <body> в стилях задати колір тексту червоним, то колір всіх інших елементів теж стане червоним. Ще приклад: тег <ul> є батьківським по відношенню до вкладених в нього тегів <li>. Якщо задати для <ul> шрифт курсивом, то і всередині всіх <li> шрифт стане курсивним.

 Ненаслідувані властивості

 Наслідування працює не для всіх властивостей. Деякі властивості застосовуються тільки до самого елемента і НЕ переходять до його нащадків. До таких ненаслідуваних властивостей відносяться: ширина, висота, відступи, режим позиціонування та інші.

Погодьтеся, було б дивно задати відступи для <body> і виявити, що у всіх вкладених елементів теж з'явилися відступи. Більш докладно спадкування описано в наступній лекції.

2.     Селектори

Селектори дозволяють дуже точно вказувати до яких елементів застосовувати CSS-властивості. Селектори - це наш «снайперський приціл», ми будемо вчитися ним користуватися. Але для початку уявимо, що механізму селекторів не існує. Як в цьому випадку задавати CSS-властивості елементам? За допомогою атрибуту style. Наприклад:

 <p style = "color: red;"> ... </ p>

Задавати атрибут style для кожного тега незручно і довго. Особливо, якщо той же результат можна отримати за допомогою єдиного CSS-правила, що використовується для конкретного тега. За допомогою селекторів, по іменах тегів, можна задати стилі для всіх елементів списку, зображень, абзаців і так далі. Як зазначалось вище, ці селектори містять ім'я тега без символів < і >. Наприклад:

li {

 / * Стилі для елементів списку * /

 }

Селектори за класами

Клас - це один з атрибутів тега. Виглядає він ось так: <li class = "first"> </ li>.

Цей атрибут особливий, так як в CSS існує можливість вибирати елементи по класу. Робиться це за допомогою такого селектора: .ім'я_класу. Наприклад:

.first {

/ * Стилі для класу first * /

}

Імена класів можуть складатися з латинських символів, цифр, знаків, символів - і _. Ім'я класу має починатися з латинської літери.

Вкладені селектори

Селектор може складатися з декількох частин, розділених пробілом, наприклад:

p strong {...}

ul .hit {...}

.footer .menu a {...}

Такі селектори називають контекстними або вкладеними. Їх використовують для того, щоб застосувати стилі до елементу, тільки якщо він вкладений в інший потрібний елемент. Наприклад, селектор .menu a спрацює для посилання a тільки в тому випадку, якщо воно розташоване всередині елемента з класом .menu. Читати вкладені селектори найпростіше справа наліво:

/ * Вибрати всі теги strong всередині тегів p * /

p strong {...}

/ * Вибрати всі елементи з класом hit всередині тегів ul * /

ul .hit {...}

 / * Вибрати всі посилання всередині елементів з класом .menu,

 які лежать всередині елементів з класом .footer * /

 .footer .menu a {...}

Таким чином, можна задавати елементам різні стилі в залежності від їх контексту. Наприклад, посилання розташовані всередині меню зробити більшими.

Сусідні селектори

Вкладені селектори використовуються для вкладених один в одного елементів, а сусідні - для розташованих поруч. Наприклад, теги <li> в списку є сусідніми по відношенню один до одного і вкладеними в тег <ul>. Сусідні селектори записуються за допомогою знаку +, наприклад: селектор1 + селектор2. Стилі застосуються до елементу в якому є class=селектор2, тільки якщо відразу перед ним розташований елемент, що містить class=селектор1. Напрриклад, є два елементи списку:

<li class = "hit"> </ li>

<li class = "miss"> </ li>

Селектор .hit + .miss застосує стилі до елементу з класом miss, оскільки перед ним є елемент з класом hit.  Селектор .hit + li теж застосує стилі до елементу з класом miss, а селектор .miss + .hit не спрацює.

Вкладені і сусідні селектори

Селектори в CSS можна дуже гнучко комбінувати. Зокрема, можна комбінувати вкладені та сусідні селектори. Наприклад, селектор .player-1 .hit + .miss спрацює для тега з класом miss, якщо відразу перед ним розташований тег з класом hit і обидва тега розташовані всередині тега з класом player-1.

Дочірні селектори

Нащадком називаються будь-які елементи розташовані всередині батьківського елементу. А дочірніми елементами називаються найближчі нащадки (причому їх може бути декілька – вкладених в батьківський елемент, але не один в одного). Дочірнім називається елемент, який безпосередньо розташовується усередині батьківського елементу. Який елемент виступає батьком, а який його нащадком легко з'ясувати за допомогою дерева елементів - так називається структура відносин тегів документа між собою:

На малюнку в зручному вигляді представлена ​​вкладеність елементів та їх ієрархія. Тут дочірнім елементом по відношенню до тегу <div> виступає тег <p>. Разом з тим тег <strong> не є дочірнім для тега <div>, оскільки він розташований в контейнері <p>.

Погляньте ще на один приклад:

<ul>

<li> <span> ... </ span> </li>

<li> <span> ... </ span> </li>

</ul>

По відношенню до <ul> - дочірніми елементами (оскільки йдуть зразу наступними після відкриваючого тегу) і нащадками (оскільки вкладені в <ul>) є <li>. А <span> - нащадки, але не дочірні елементи. Вкладені селектори впливають на всіх нащадків, що не завжди зручно. Іноді необхідно задати стилі лише для дочірніх елементів. Особливо це корисно при роботі з багаторівневими списками.

 Для цього існує дочірній селектор, в якому використовується символ >. Наприклад: ul > li або ul > li > span.

Мультикласи

Іноді може знадобитися вибрати елементи, які одночасно задовольняють відразу декілька умов. У CSS є запис, яка фактично виконує операцію логічного множення ("І"). Селектори, застосовувані до одного елементу, в цьому випадку пишуться без пробілів. Наприклад:

.class1.class2 {}

Стилі будуть застосовуватися до всіх елементів, які одночасно мають клас .class1 і .class2. Наприклад в коді HTML використовується конструкція:

<р class = "class1 class2>.

За таким же принципом можна об'єднувати будь-яку кількість абсолютно різних селекторів. І чим більше селекторів ви поєднуєте, тим більше умов має збігтися для застосування стилів. До будь-якого тегу одночасно можна додати кілька класів, перераховуючи їх в атрибуті class через пробіл: <p class = "class1 class2 ...">. У цьому випадку до елементу застосовується стиль, описаний в правилах для кожного класу. Оскільки при додаванні декількох класів вони можуть містити однакові стильові властивості, але з різними значеннями, то береться значення з класу який описаний в коді нижче.

 Псевдокласи

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

Селектор: Псевдоклас {…}

Спочатку вказується селектор, до якого додається псевдоклас, потім слідує двокрапка, після якої йде ім'я псевдокласу. Наприклад:

a: visited {...}

li: last-child {...}

.alert: hover {...}

Допускається застосовувати псевдокласів до імен ідентифікаторів або класів: A.menu:hover {…}, а також до контекстних (вкладених) селекторів:

.menu A: hover {

background: # fc0

}

Якщо псевдоклас вказується без селектора попереду : hover, то він буде застосовуватися до всіх елементів документа.

Умовно всі псевдокласи діляться на три групи:

1.    визначають стан елементів (наприклад реакція на наведення мишки);

2.    мають відношення до дерева елементів (перший елемент, останній елемент і т.д.);

3.    вказують мову тексту (ми використовувати не будемо).

Псевдокласи first-child і last-child

Псевдоклас first-child дозволяє вибрати перший дочірній елемент батька, а last-child - останній дочірній елемент. Наприклад:  li: last-child {...}. Цей селектор вибере останній елемент списку. Псевдокласи first-child і last-child відносяться до сімействf псевдокласів, що допомагають вибирати елементи по їх розташуванню.

За допомогою псевдокласу nth-child можна вибирати теги по порядковому номеру елемента (тега) не використовуючи класи. Синтаксис псевдокласу:

селектор:nth-child(номер елемента){…}.

Номером елемента може бути число або формула. Наприклад:

 1. li: nth-child (2) {...}

 2. li: nth-child (4) {...}

 3. li: nth-child (2n) {...}

Перший селектор вибере другий елемент списку, другий селектор - четвертий елемент списку, третій селектор - всі парні елементи (2*1, 2*2, 2*3,…,2*n де n=1,2,3,…).

: nth-child і контекстні селектори

Селектори з псевдокласів добре поєднуються з контекстними (вкладеними) селекторами. Наприклад, селектор:

 .shooter-2 li: nth-child (3) {...}

Вибере третій тег <li> всередині блоку з класом shooter-2.

Псевдоклас : hover

Деякі псевдокласи дозволяють вибирати елементи, з якими взаємодіє користувач. Спочатку познайомимося з псевдокласом : hover.

Цей псевдоклас дозволяє вибрати елемент, коли на нього наведений курсор миші і кнопка миші не натиснута. Приклади:

 1. a: hover {...}

 2. tr: hover {...}

 3 .menu-item: hover {...}

Перший селектор вибирає посилання, другий – рядок таблиці, третій – елемент з класом menu-item, але лише в тому випадку, якщо на них наведений курсор миші. Завдяки псевдокласу : hover можна додавати в інтерфейс динаміку та інтерактивність, оскільки елементи починають реагувати на дії користувача, змінюючи свій зовнішній вигляд.

Левова частка динамічних ефектів, створюваних з допомогою CSS, спираються на кілька псевдокласів, головний з яких : hover. Весь секрет полягає в поєднанні контекстних (вкладених) селекторів і псевдокласів. Подивіться приклад:

li.top ul.submenu {

display: none;

}

li.top:hover ul.submenu {

display: block;

}

Перше правило ховає список-підменю. Друге правило говорить: «якщо на верхній пункт меню, в якому знаходиться підменю, наведуть курсор, то треба показати підменю». Загальний принцип такий: батьківський елемент реагує на наведення миші і змінює властивості елементів-нащадків. Це все працює на контекстних селекторах виду:

селектор1: hover селектор2.

Псевдокласи : link,: visited і: active

Познайомимося з псевдокласів для гіпертекстових посилань (ті що задаються тегом  <a href=”…”>):

·       : link вибирає ще не відвідані посилання.

·       : visited вибирає відвідані посилання – ті, по яких, користувач вже переходив..

·       : active вибирає активні посилання (кнопка миші затиснута на посиланні).

Приклад задання CSS-правил для посилань:

 a: link {...}

 a: visited {...}

 a: hover {...}

 a: active {...}

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

Псевдоклас : focus

Псевдоклас : focus дозволяє вибрати елемент, який в даний момент у фокусі. Наприклад, текстове поле в яке встановлено курсор знаходиться у фокусі.  У фокусі можуть бути не тільки текстові поля. Якщо Ви переходите між елементами веб-сторінки за допомогою клавіші tab, то в фокус потраплятимуть посилання.

Приклад використання псевдокласу:

input: focus {

 / * Стилі для поля у фокусі * /

 }

Псевдоклас : not

Псевдоклас : not (селектор) є заперечливим селектором. З його допомогою можна вибрати елементи, які НЕ містять вказаний селектор. Наприклад:

li: not (: last-child) {}

вибере всі теги <li>, що НЕ є останніми в їхніх батьків.

В якості селектора можуть зазначатися псевдокласи, теги, ідентифікатори, класи і селектори атрибутів. Не можна використовувати псевдоелементи і псевдоклас : not, тобто конструкція : not (: not (...)) заборонена.

Селектори атрибутів

Раніше ми познайомилися з атрибутом class і спеціальними селекторами для класів. Існують селектори, які дозволяють вибирати елементи по будь-яким атрибутам. Найчастіше такі селектори використовуються при роботі з формами, оскільки поля форм мають атрибут type з різними значеннями. Селектори атрибутів записуються з використанням квадратних дужок: елемент [атрибут]. Приклади селекторів:

 1. input [checked] {...}

 2. input [type = "text"] {...}

Перший селектор вибере поля форми, у яких є атрибут checked, другий селектор вибере поля форми, у яких атрибут type має значення text.

Шукаємо на початку рядка

У механізму селектору атрибутів є додаткові можливості: можна вибирати елементи по входженню підрядка в значення атрибута. Запис виду:

[Атрибут ^ = "початокЗначенняАтрибута"]

вибере всі елементи, у яких значення атрибута Атрибут починається з підрядка початокЗначенняАтрибута. Наприклад, уявіть, що у вас є три класи для завдання колонок різної ширини, наприклад: column-1, column-2 і column-3. У цих класів частина властивостей повторюється, а різною є тільки ширина. Щоб не дублювати CSS-код, ви можете винести загальні властивості колонок в правило з селектором [class ^ = "column-"], а в решті правил задати тільки ширину:

[class ^ = "column -"] {

 / * Загальні властивості: відступи, рамки, фон і т.д. * /

}

.column-1 {width: 100px; }

.column-2 {width: 200px; }

.column-3 {width: 300px; }

Тобто, перший селектор вибере всі елементи з класами, що починаються з column- :

<div class = "column-1"> </ div>

<div class = "column-2"> </ div>

<div class = "column-3"> </ div>

Зверніть увагу, що селектор чутливий до регістру.

Пошук слів всередині рядка

Наступний запис: [Атрибут ~ = "СловоЗЗначенняАтрибута"].

Такий селектор вибере всі елементи, у яких значення атрибута Атрибут містить слово СловоЗЗначенняАтрибута. Входити повинне саме ціле слово, а не просто підрядок. Тобто входження СловоЗЗначенняАтрибута повинно містити з обох сторін розділові знаки: пробіли або початок/кінець рядка.

Шукаємо в кінці рядка

Селектор виду [Атрибут $ = "кінецьЗначенняАтрибута"] вибирає всі елементи, значення атрибута Атрибут яких закінчується рядком кінецьЗначенняАтрибута. Уявіть, що у вас на сайті є розділ з файлами для скачування в різних форматах і вам потрібно для кожного типу файлів додати свою іконку. Приклад розмітки:

<a href="Веб_дизайн.pdf"> Завантажити </a>

<a href="Веб_дизайн.doc"> Завантажити </a>

У цьому випадку ви можете призначати іконки в CSS по розширенню файлів:

a [href $ = ". pdf"] {

 / * Іконка для PDF * /

}

a [href $ = ". doc"] {

 / * Іконка для DOC * /

}

І знову селектори чутливі до регістру.

Пошук підрядка скрізь

Наступний варіант запису [Атрибут * = "ЗначенняАтрибута"]. Будуть вибрані всі елементи, у яких значення атрибута Атрибут містить підрядок ЗначенняАтрибута на будь-якій позиції.  Серед трьох елементів:

<p class = "person-name"> </ p>

<div class = "some-person-info"> </ p>

<span class = "date-person"> </ span>

селектор [class * = "person"] вибере всі три. Зверніть увагу, що селектор чутливий до регістру.

Селектор по id

Існує ще один HTML-атрибут, для якого існує спеціальний селектор. Цей атрибут id (ідентифікатор), а селектор записується за допомогою символу #, наприклад: #some-id. На значення id поширюються ті ж обмеження, що і на ім'я класу. Також id повинен бути унікальним на кожній сторінці. Використання селектору по id при оформленні вважається поганою практикою. Існують рідкісні винятки з цього правила, наприклад, при створені деяких динамічних ефектів за допомогою CSS.