033.2 Урок 1

033.2 Урок 1

Сертифікат:

Основи веброзробки

Версія:

1.0

Розділ:

033 Дизайн контенту за допомогою CSS

Тема:

033.2 CSS-селектори та застосування стилів

Урок:

1 з 1

Вступ

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

Стилі, які поширюються на всю сторінку

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

* {
  color: purple;
  font-size: large;
}

Селектор * не є єдиним методом застосування правила стилю до всіх елементів сторінки. Селектор, який просто відповідає елементу за ім’ям тегу, називається селектором типу, тому будь-яке ім’я тегу HTML, як-от body, p, table, em тощо, може використовуватися як селектор. В CSS батьківський стиль успадковується його дочірніми елементами. Отже, на практиці використання селектора * має той самий ефект, що й застосування правила до елемента body:

body {
  color: purple;
  font-size: large;
}

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

Якщо один і той самий елемент відповідає двом або більше конфліктуючим правилам, браузер застосовує правило з найбільш конкретного селектора. Візьмемо для прикладу такі правила CSS:

body {
  color: purple;
  font-size: large;
}

li {
  font-size: small;
}

Браузер застосовуватиме стилі color: purple і font-size: large до всіх елементів всередині елемента body. Однак, якщо на сторінці є елементи li, браузер замінить стиль font-size: large на стиль font-size: small, оскільки селектор li має міцніший зв’язок із li, ніж селектор body.

CSS не обмежує кількість еквівалентних селекторів в одній таблиці стилів, тому ви можете мати два або більше правил, використовуючи той самий селектор:

li {
  font-size: small;
}

li {
  font-size: x-small;
}

У цьому випадку обидва правила однаково специфічні для елемента li. Браузер не може застосовувати конфліктуючі правила, тому він вибере правило, яке зустрічається пізніше у файлі CSS. Щоб уникнути плутанини, рекомендуємо згрупувати всі властивості, які використовують один і той же селектор.

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

li {
  font-size: small !important;
}

li {
  font-size: x-small;
}

Правила, позначені !important, слід використовувати з обережністю, оскільки вони порушують природню каскадність таблиць стилів і ускладнюють пошук і виправлення проблем у файлі CSS.

Обмежувальні селектори

Ми побачили, що можемо змінити певні успадковані властивості, використовуючи селектори, що відповідають конкретним тегам. Однак зазвичай нам потрібно використовувати різні стилі для елементів одного типу.

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS Basics</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

<div id="content">

<p>The three rocky planets of the solar system are:</p>

<ul>
  <li>Mercury</li>
  <li>Venus</li>
  <li>Earth</li>
  <li>Mars</li>
</ul>

<p>The outer giant planets made most of gas are:</p>

<ul>
  <li>Jupiter</li>
  <li>Saturn</li>
  <li>Uranus</li>
  <li>Neptune</li>
</ul>

</div><!-- #content -->


<div id="footer">

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

</div><!-- #footer -->

</body>
</html>

За замовчуванням кожен елемент списку помічений чорним колом зліва. Ви можете видалити ці кола зі списку верхнього меню, залишивши кола в іншому списку. Однак ви не можете просто використовувати селектор li, оскільки це також видалить кола зі списку в розділу основного тексту. Вам знадобиться спосіб вказати браузеру змінювати лише елементи списку, які використовуються в одному списку, але не в іншому.

Атрибут id призначає унікальний ідентифікатор відповідному елементу, який ми можемо використовувати як частину селектора CSS-правила. Перш ніж записати правило CSS, відредагуйте зразок файлу HTML і додайте id="topmenu" до елемента ul, який використовується для верхнього меню:

<ul id="topmenu">
  <li>Home</li>
  <li>Articles</li>
  <li>About</li>
</ul>

У розділі head документа HTML вже є елемент link, який вказує на файл таблиці стилів style.css у тій самій папці, тому ми можемо додати до нього наступні правила CSS:

ul#topmenu {
  list-style-type: none
}

Хеш-символ використовується в селекторе після елемента для позначення ID (без пробілів). Ім’я тегу ліворуч від хеш-символу є необов’язковим, оскільки іншого елемента з таким же ID не буде. Тому селектор можна записати як #topmenu.

Незважаючи на те, що властивість list-style-type не є безпосередньою властивістю елемента ul, властивості CSS батьківського елемента успадковуються його дочірніми елементами, тому стиль, призначений елементу ul, буде успадковано його дочірніми елементами li.

Не всі елементи мають ID, за яким їх можна вибрати. Дійсно, очікується, що лише кілька ключових елементів макета на сторінці мають ідентифікатори. Візьмемо, наприклад, списки планет, використані у зразку коду. Хоча можна призначити унікальні ідентифікатори для кожного окремого повторюваного елемента, подібних до цих, цей метод не є практичним для довших сторінок з великою кількістю вмісту. Натомість ми можемо використовувати ID батьківського елемента div як селектор, щоб змінити властивості його внутрішніх елементів.

Однак елемент div не пов’язаний безпосередньо зі списками HTML, тому додавання до нього властивості list-style-type не матиме впливу на його дочірні елементи. Таким чином, щоб змінити чорне коло у списках всередині вмісту div на порожнє коло, ми повинні використовувати селектор нащадок (descendant):

#topmenu {
  list-style-type: none
}

#content ul {
  list-style-type: circle
}

Селектор #content ul називається селектором-нащадком, оскільки він відповідає лише тим елементам ul, які є дочірніми від елементу, ID яких є content. Ми можемо використовувати стільки рівнів спадкування, скільки необхідно. Наприклад, використання #content ul li відповідатиме лише елементам li, які є нащадками елементів ul, які є нащадками елемента, ідентифікатор якого є content. Але в цьому прикладі довший селектор матиме той самий ефект, що й використання #content ul, оскільки елементи li успадковують властивості CSS, встановлені для їхнього батьківського ul. Селектори-нащадки є важливою технікою, оскільки макет сторінки стає все складнішим.

Скажімо, тепер ви хочете змінити властивість font-style елементів списку в списку topmenu і в списку в footer div, щоб вони відображались похилим шрифтом. Ви не можете просто написати правило CSS, використовуючи ul як селектор, оскільки це також змінить елементи списку в content div. Поки що ми змінювали властивості CSS, використовуючи один селектор за раз, і цей метод також можна використовувати для виконання цього завдання:

#topmenu {
  font-style: oblique
}

#footer ul {
  font-style: oblique
}

Однак окремі селектори – це не єдиний спосіб виконати задачу. CSS дає змогу згрупувати селектори, які мають спільні один або кілька стилів, використовуючи список селекторів, розділених комами:

#topmenu, #footer ul {
  font-style: oblique
}

Групування селекторів усуває зайву роботу щодо написання дублюючих стилів. Крім того, ви можете знову змінити властивість у майбутньому й не пам’ятати, що її також потрібно змінити у всіх цих різних місцях.

Класи

Якщо ви не хочете занадто турбуватися про ієрархію елементів, ви можете просто додати class до набору елементів, які ви хочете налаштувати. Класи подібні до ідентифікаторів, але замість того, щоб ідентифікувати лише один елемент на сторінці, вони можуть ідентифікувати групу елементів, що мають однакові характеристики.

Візьмемо, наприклад, зразок HTML-сторінки, над якою ми працюємо. Малоймовірно, що на реальних сторінках ми знайдемо такі прості структури, тому було б практичніше вибрати елемент, використовуючи лише класи або комбінацію класів і спадковості. Щоб застосувати властивість font-style: oblique до списків меню за допомогою класів, спочатку нам потрібно додати властивість class до елементів у файлі HTML. Ми зробимо це спочатку у верхньому меню:

<ul id="topmenu" class="menu">
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

А потім у меню нижнього колонтитула:

<div id="footer">

<ul class="menu">
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

</div><!-- #footer -->

Завдяки цьому ми можемо замінити групу селектора #topmenu, #footer ul на селектор .menu, який базується на класі:

.menu {
  font-style: oblique
}

Як і у випадку із селекторами на основі ID, додавання імені тегу ліворуч від крапки в селекторах на основі класу є необов’язковим. Однак, на відміну від ідентифікаторів, один і той самий клас повинен використовуватися більше ніж в одному елементі, і вони навіть не повинні бути одного типу. Тому, якщо клас menu використовується для різних типів елементів, використання селектора ul.menu відповідатиме лише елементам ul, які мають клас menu. Натомість використання .menu як селектора відповідатиме будь-якому елементу, що має клас menu, незалежно від його типу.

Крім того, елементи можуть бути пов’язані з більш ніж одним класом. Ми могли б розрізнити верхнє та нижнє меню, додавши додатковий клас до кожного з них:

<ul id="topmenu" class="menu top">

І в меню нижнього колонтитула:

<ul class="menu footer">

Якщо атрибут class містить більше одного класу, вони повинні бути розділені пробілами. Тепер, на додаток до правила CSS, спільного для елементів класу menu, ми можемо звертатися до верхнього і нижнього меню за допомогою відповідних класів:

.menu {
  font-style: oblique
}

.menu.top {
  font-size: large
}

.menu.footer {
  font-size: small
}

Майте на увазі, що написання .menu.top відрізняється від .menu .top (з пробілом між словами). Перший селектор буде відповідати елементам, які мають класи menu і top, тоді як другий буде відповідати елементам, які мають клас top і батьківський елемент із класом menu.

Спеціальні селектори

CSS-селектори також можуть відповідати динамічним станам елементів. Ці селектори особливо корисні для інтерактивних елементів, таких як гіперпокликання. Ви можете хотіти, щоб гіперпосилань з’являються, коли вказівник миші переміщується по них, щоб привернути увагу відвідувача.

Повернувшись до нашого зразка сторінки, ми могли б видалити підкреслення з посилань у верхньому меню та показати рядок лише тоді, коли вказівник миші переміститься на відповідне покликання. Для цього спочатку пишемо правило для видалення підкреслення з покликань у верхньому меню:

.menu.top a {
  text-decoration: none
}

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

.menu.top a:hover {
  text-decoration: underline
}

Селектор псевдокласу :hover приймає всі властивості CSS звичайних правил CSS. Інші псевдокласи- це :visited, який відповідає гіперпокликанням, які вже були відвідані, і :focus, який відповідає елементам форми, які отримали фокус.

Вправи до посібника

  1. Припустимо, що сторінка HTML має таблицю стилів, пов’язану з нею, яка містить два наступних правила:

    p {
  color: green;
}

p {
  color: red;
}

    Який колір браузер застосує до тексту всередині елементів p?

  2. Яка різниця між використанням ID-селектора div#main та #main?

  3. Який селектор відповідає всім елементам p, які використовуються всередині div з атрибутом ID #main?

  4. Яка різниця між використанням селекторів класів p.highlight і .highlight?

Дослідницькі вправи

  1. Напишіть одне правило CSS, яке змінює властивість font-style на oblique. Правило має відповідати лише елементам a, які знаходяться всередині <div id="sidebar"></div> або <ul class="links"></ul>.

  2. Припустимо, ви хочете змінити стиль елементів, для яких атрибут class встановлено в значення article reference, як у <p class="article reference">. Однак селектор .article .reference, схоже, не змінює їх вигляд. Чому селектор не зіставляється цим елементам, як очікувалося?

  3. Напишіть правило CSS для зміни властивості color всіх відвіданих посилань сторінки на red.

Підсумки

Цей урок розповідає про те, як використовувати селектори CSS і як браузер вирішує, які стилі застосовувати до кожного елемента. Будучи відокремленим від HTML-розмітки, CSS надає багато селекторів для відповідності окремим елементам або групам елементів сторінки. Урок розглядає такі поняття та процедури:

  • Стилі, які стосуються всієї сторінки і спадкування стилів.

  • Елементи стилізації за типом.

  • Використання ID-елемента та класу в якості селектора.

  • Складні селектори.

  • Використання псевдокласів для динамічної стилізації елементів.

Відповіді до вправ посібника

  1. Припустимо, що сторінка HTML має таблицю стилів, пов’язану з нею, яка містить два наступних правила:

    p {
  color: green;
}

p {
  color: red;
}

    Який колір браузер застосує до тексту всередині елементів p?

    Колір червоний. Якщо два або більше еквівалентних селектора мають конфліктуючі властивості, браузер вибере останній.

  2. Яка різниця між використанням ID-селектора div#main та #main?

    Селектор div#main відповідає елементу div з ID main, тоді як селектор #main відповідає елементу з ID main, незалежно від його типу.

  3. Який селектор відповідає всім елементам p, які використовуються всередині div з атрибутом ID #main?

    Селектор #main p або div#main p.

  4. Яка різниця між використанням селекторів класів p.highlight і .highlight?

    Селектор p.highlight відповідає лише елементам типу p, які мають клас highlight, тоді як селектор .highlight відповідає всім елементам, що мають клас highlight, незалежно від їх типу.

Відповіді до дослідницьких вправ

  1. Напишіть одне правило CSS, яке змінює властивість font-style на oblique. Правило має відповідати лише елементам a, які знаходяться всередині <div id="sidebar"></div> або <ul class="links"></ul>.

    #sidebar a, ul.links a {
  font-style: oblique
}

  2. Припустимо, ви хочете змінити стиль елементів, для яких атрибут class встановлено в значення article reference, як у <p class="article reference">. Однак селектор .article .reference, схоже, не змінює їх вигляд. Чому селектор не зіставляється цим елементам, як очікувалося?

    Селектор .article .reference відповідатиме елементам, що мають клас reference, які є нащадками елементів, що мають клас article. Щоб зіставлятись з елементами, які мають класи article і reference, селектор має бути .article.reference (без пробілу між ними).

  3. Напишіть правило CSS для зміни властивості color всіх відвіданих посилань сторінки на red.

    a:visited {
  color: red;
}

Linux Professional Institute Inc. Всі права захищені. Відвідайте веб-сайт навчальних матеріалів: https://learning.lpi.org
Ця робота ліцензована відповідно до міжнародної ліцензії Creative Commons Attribution-некомерційна-NoDerivatives 4.0.