1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Лекція 4 -СSS, комбіновані селектори та скорочення

Селектори нащадків
Селектори дітей
Селектори суміжних елементів (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;
}

Скорочені властивості CSS

Деякі властивості CSS прийнято називати скороченнями або скороченими властивостями (shorthand property). Вони надають короткий, компактний спосіб запису для декількох інших, вузькоспеціалізованих властивостей. Наприклад, скорочена властивість border управляє зовнішнім виглядом рамки навколо елементу, дозволяючи визначити в одному рядку відразу кілька атрибутів: колір, стиль і ширину рамки. Інакше для цього знадобилися б властивості border-width, border-style і border-color.
Список скорочених властивостей:

font - скорочена властивість для властивостей шрифта:
* font-style
* font-variant
* font-weight
* font-size
* line-height
* font-family

background - скорочений варіант запису для властивостей фону:
* background-color
* background-image
* background-repeat
* background-attachment
* background-position

margin - скорочена властивість для управління зовнішніми відступами:
* margin-top
* margin-right
* margin-bottom
* margin-left

padding - скорочена властивість для управління внутрішніми відступами:
* padding-top
* padding-right
* padding-bottom
* padding-left

border - скорочений варіант запису для властивостей бордюру:
* border-width
* border-style
* border-color

 

Додати коментар


Захисний код
Оновити

  •  Facebook 
  •  Vk 

Обрати мову

Хто на сайті

На сайті один гість та відсутні користувачі