Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Знайомство з селекторами

Знайомство з селекторами

Frontend SELF UA
Рівень 2 , Лекція 4
Відкрита

1. Тег <style>

Якщо у HTML-елемента занадто багато стилів, то їх можна винести в спеціальний елемент — тег style. Його зазвичай розміщують у тегу <head> і виглядає він ось так:

CSS+HTML+JavaScript 
          
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Приклад CSS</title>
    <style>
        body {
            background-color: lightgray;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Це приклад використання стилів у тегу <style>.</p>
</body>
</html>
Telegram

Тепер можна не писати довгий рядок стилів для тегу <body> всередині його атрибута style, а перенести їх у тег style. Це дуже зручно.

Те ж саме стосується й тегу <p> (параграф). Більше того, стиль, прописаний у тегу <style> в <head>, буде застосовуватись взагалі до всіх параграфів у документі, навіть якщо їх буде кілька тисяч. А все тому, що в тегу <style> стилі описані всередині селекторів.

1.2 Селектори

Селектори — це спосіб вибору елементів HTML, до яких будуть застосовуватись CSS-властивості. Існують різні типи селекторів:

Селектор тегу

Застосовує стиль до всіх елементів певного типу. Ви просто вказуєте назву тегу і фігурні дужки після нього. 


tagname {
    // стилі
}

tagname може бути будь-яким: body, image, a, p, … будь-яким

Селектор класу

Також можна прив’язати CSS-властивості не до якогось тегу, а просто дати групі CSS-властивостей якусь назву. Така група в CSS називається класом. Застосовується такий стиль до всіх елементів із певним класом. Класи задаються атрибутом class у HTML.

CSS+HTML+JavaScript 
      
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.important {
            font-weight: bold;
        }
    </style>
</head>
<body>
<p class="important">Це важливий текст.</p>
<p>Це звичайний текст.</p>
</body>
</html>

У прикладі вище жирним буде виділений тільки текст першого параграфа, до якого застосували стиль/клас «important». У другого параграфа такого стилю немає.

При описі стилів у тегу <style> можна задати його 3 способами:

  • tagname { …}
  • tagname.classname { …}
  • .classname { …}

Детальніше тему з селекторами ми з вами розберемо, коли будемо вивчати CSS. Зараз же я вам про це розповідаю, оскільки в HTML-прикладах буде зустрічатися CSS, і я часто буду виносити його у тег style та використовувати селектори для призначення стилю певному HTML-елементу.

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ