Лекція 4 -СSS, комбіновані селектори та скорочення
- Деталі
- Перегляди: 7893
Селектори нащадків
Селектори дітей
Селектори суміжних елементів (Adjacent Sibling Selectors)
Псевдокласи CSS - link, visited, active, hover
Скорочені властивості CSS
Селектори нащадків
«Нащадками» елемента HTML називаються будь-які вкладені в нього елементи: це його «діти» (тобто безпосередньо вкладені), діти його дітей, і так далі, углиб ієрархії тегів. Правильно використовуючи селектори, ми можемо варіативно застосувати CSS стилі до потрібних елементів, пославшись на їх батьківський елемент. Для цього перед селектором шуканого елемента треба вставити селектори його «предків», розділивши їх пробілом.
#foter li a {font-weight:bold; }
У наведеному прикладі селектор нащадків вказує на всі гіперпосилання (елементи A) вкладені в списки (елементи LI), у свою чергу знаходяться всередині елемента з ідентифікатором footer. У всіх таких гіперпосилань ми міняємо товщину шрифту на bold (напівжирний шрифт).
Селектори дітей
«Дітьми» або «дочірніми елементами» елемента HTML називаються безпосередньо вкладені в нього елементи, він для них є «батьківським» елементом. Елементи, що знаходяться на 2-му і глибших рівнях вкладеності, «дітьми» не є - це діти дітей, тобто «нащадки».
CSS дозволяє нам створити селектор для вибору дочірніх елементів будь-якого елементу і змінити їх властивості, застосувавши CSS стилі. Для цього перед селектором шуканого елемента треба вставити селектори його «предків», розділивши їх знаком >.
i > b {font-weight:normal; }
В наведеному прикладі ми знаходимо всі елементи b, вкладені безпосередньо в елементи i, та вимикаємо для них напівжирний шрифт. Всі інші елементи B в документі залишаться без змін.
Селектори суміжних елементів (Adjacent Sibling Selectors)
Іноді потрібно вибрати елемент, розташований в HTML-документі безпосередньо за певним елементом. Так, наприклад, щоб вибрати всі заголовки H1, наступні за параграфами P, і змінити їхній верхній відступ, ми напишемо наступне правило CSS:
p + h1 {margin-top: 20px; }
Буде обраний тільки перший заголовок H1, розташований безпосередньо після P. Якщо між елементами P і H1 зустрінеться хоча б один елемент то селектор не спрацює і правило не таким чином, застосовується. Селектори суміжних елементів з'явилися в CSS v2 і підтримуються, на жаль, не у всіх браузерах. В Internet Explorer вони з'явилися тільки з 7-ї версії, в Opera - з 5-ї версії.
Псевдокласи CSS - link, visited, active, hover
Псевдоклас дозволяє враховувати різні умови або події при визначенні властивостей HTML тэгу. Наприклад посилання специфікуються в HTML тегом <a>, який, можна розглядати як селектор CSS а:
a { color: blue; }
Посилання може мати різні стани. Для цих станів існують відповідні псевдокласи.
Псевдоклас :link використовується для посилань на сторінки, які користувач ще не відвідував.
Псевдоклас :visited використовується для посилань на сторінки, які користувач відвідав.
Псевдоклас :active використовується для активних посилань.
Псевдоклас :hover використовується для посилань, над якими знаходиться покажчик миші.
Це можна використовувати для створення цікавих ефектів. Наприклад, якщо ми хочемо, щоб посилання ставали помаранчевими і курсивними при проходженні покажчика миші над ними, то наш CSS правило повинно виглядати так:
a: hover {
color: orange;
font - style: italic;
}