< Return to Video

Вибір за ID в мові CSS

  • 0:00 - 0:02
    На цій сторінці ми використали CSS,
  • 0:02 - 0:05
    щоб оформити заголовки h2 і деякі абзаци,
  • 0:05 - 0:09
    тому зараз заголовки зелені,
    а абзаци фіолетові.
  • 0:10 - 0:13
    Але що, якщо ми хочемо вибрати
    лише перший заголовок h2
  • 0:13 - 0:16
    або оформити лише другий абзац?
  • 0:17 - 0:20
    Ми маємо знайти спосіб
    сказати браузеру, який саме
  • 0:20 - 0:22
    з елементів ми обираємо,
  • 0:22 - 0:25
    щоб він не застосував стиль
    до всіх елементів, як зараз.
  • 0:25 - 0:28
    Один зі спосіб зробити це – це вибір за ID.
  • 0:28 - 0:31
    Ми можемо надати тегу на сторінці
    унікальний ID,
  • 0:31 - 0:32
    і потім сказати CSS:
  • 0:32 - 0:36
    "Послухай, я хочу застосовувати
    ці стилі лише для елементів з таким ID,
  • 0:36 - 0:38
    а не для всіх інших".
  • 0:38 - 0:41
    Першим кроком,
    буде зміна HTML,
  • 0:41 - 0:45
    додавши атрибути ID до тегів, які ми
    хочемо обрати окремо.
  • 0:46 - 0:48
    Почнімо з другого абзаца.
  • 0:49 - 0:51
    Щоб додати атрибут ID,
    ми ставимо курсор
  • 0:51 - 0:53
    на початок тега
    відразу після літери "р",
  • 0:53 - 0:58
    потім ставимо пробіл і далі
    пишемо id = "
  • 0:59 - 1:03
    Тепер нам потрібно надати цьому
    атрибуту "id" значення.
  • 1:03 - 1:04
    Яке значення я маю надати?
  • 1:04 - 1:06
    Воно має бути змістовним і унікальним.
  • 1:07 - 1:09
    Ніщо інше на цій сторінці не має
    мати такий самий ID.
  • 1:09 - 1:15
    Оскільки це пісенька про кроликів,
    я назву її "пісня-кроликів".
  • 1:15 - 1:20
    В ID не можна використовувати пробілів,
    тому якщо він містить декілька слів,
  • 1:20 - 1:22
    ви маєте використовувати дефіс
    або знак підкреслення.
  • 1:23 - 1:25
    Я справді люблю дефіси.
  • 1:26 - 1:29
    Тепер ми вже знаємо спосіб зробити
    цей абзац унікальним
  • 1:29 - 1:32
    і можемо додати правило CSS,
    яке застосуємо для нього.
  • 1:32 - 1:35
    Повернімося до тега ,
    це буде нашим другим кроком.
  • 1:36 - 1:38
    Ми додамо новий рядок
    після останнього правила.
  • 1:39 - 1:43
    Запам'ятайте, перша частина
    правила CSS – це селектор:
  • 1:43 - 1:46
    частина, яка каже браузеру,
    що ж обирати.
  • 1:46 - 1:51
    В минулих правилах ми використовували
    селектори "h2" чи "p",
  • 1:51 - 1:54
    щоб обрати усі теги чи
    на нашій сторінці.
  • 1:55 - 1:57
    Тепер, щоб задати селектор,
    який вибирає елементи
  • 1:57 - 1:59
    з конкретним ID,
  • 1:59 - 2:01
    ми маємо на початку селектора
    поставити знак решітки "#".
  • 2:01 - 2:05
    Таким чином браузер зрозуміє, що все,
    що буде йти далі – це ID.
  • 2:05 - 2:09
    Тепер ми пишемо ID: пісня-кроликів.
  • 2:10 - 2:12
    Решта правила така сама, як і раніше.
  • 2:12 - 2:14
    Ми відкриваємо і закриваємо
    фігурні діжки,
  • 2:14 - 2:18
    пишемо властивість,
    наприклад, колір фону (англ. background color)...
  • 2:18 - 2:21
    ... і та-дам! Це спрацювало!
  • 2:21 - 2:24
    Тільки абзац пісні має
    жовтий колір фону,
  • 2:24 - 2:26
    а перший абзац
    залишився таким самим.
  • 2:27 - 2:31
    Повторимо це знову,
    і вибиремо перший заголовок .
  • 2:31 - 2:33
    Пам'ятаєте перший крок?
  • 2:34 - 2:37
    Правильно. Ми маємо
    змінити код HTML,
  • 2:37 - 2:38
    додавши атрибут "ID".
  • 2:38 - 2:41
    Отже, ми ставимо курсор
    на початок тега,
  • 2:41 - 2:44
    додаємо пробіл,
    пишемо "id ="
  • 2:44 - 2:47
    і потім додаємо змістовний
    і унікальний ID.
  • 2:47 - 2:50
    "Заголовок-інформації-про-кроликів".
  • 2:51 - 2:54
    Добре, тепер другий крок.
    В тезі
  • 2:54 - 2:57
    ми додаємо новий рядок,
    ставимо знак решітки "#",
  • 2:57 - 3:02
    потім ID,
    "Заголовок-інформації-про-кроликів",
  • 3:02 - 3:05
    і далі пишемо властивість у
    фігурних дужках:
  • 3:05 - 3:09
    {колір фону: фіолетовий;}.
  • 3:09 - 3:13
    О-о! Добре, не спрацювало.
    Хммм... Ви бачите, що пішло не так?
  • 3:13 - 3:15
    Може я... неправильно щось написала?
  • 3:15 - 3:18
    заголовок-інформації-про-кроликів,
    Заголовок-інформації-про-кроликів...
  • 3:18 - 3:21
    Хмм... виглядають майже однаково.
  • 3:21 - 3:23
    Тепер я можу порівняти їх
    літера за літерою,
  • 3:23 - 3:25
    щоб з'ясувати, що пішло не так.
  • 3:25 - 3:30
    Але що мені краще зробити, це піти вниз
    і вибрати ID в HTML,
  • 3:30 - 3:34
    скопіювати його і вставити його тут,
    щоб точно знати, що він такий самий.
  • 3:34 - 3:35
    І... вдалось!
  • 3:36 - 3:40
    Мій заголовок має фон.
    Ви помітили, що змінилось?
  • 3:40 - 3:44
    Можливо, побачили. Справа була літера "H".
    Вона була великою,
  • 3:44 - 3:47
    а браузер знає, що велика та
    маленька літери – це різні речі.
  • 3:47 - 3:50
    Вона мала бути маленькою,
    щоб відповідати HTML.
  • 3:50 - 3:53
    Це тому, що для ID розмір літер
    має значення.
  • 3:53 - 3:57
    Тому ви маєте писати їх
    всюди однаково.
  • 3:58 - 4:02
    Як на мене, найкраще просто завжди
    використовувати маленькі літери в ID,
  • 4:02 - 4:05
    тоді не доводиться згадувати,
    де і які літери я використовувала.
  • 4:05 - 4:08
    Гаразд, дозвольте ще додати
    одне попередження:
  • 4:08 - 4:11
    ID мусить бути унікальним!
  • 4:11 - 4:13
    Якщо ви матимете два теги на сторінці
    з одинаковим ID,
  • 4:13 - 4:18
    браузер, можливо, оформить обидва,
    а, може, лише один.
  • 4:18 - 4:20
    А ви ж не хочете, щоб це вирішувалось
    долею випадку.
  • 4:20 - 4:24
    Гарні, унікальні, змістовні ID.
  • 4:24 - 4:29
    Переклад на українську: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
Title:
Вибір за ID в мові CSS
Video Language:
English
Duration:
04:25

Ukrainian subtitles

Revisions

Our website uses cookies for analysis purposes.