урок 3
Важливу роль у вивченні CSS складають псевдокласи і псевдоелементи. Вони використовуються при опрацюванні дизайну практично всіх сайтів, виключення можуть скласти тільки старі сайти. Псевдокласи і псевдоелементи дуже потрібні при складанні красивого оформлення.
Ви, напевно, звертали увагу на те, що на деяких сайтах при наведенні курсору на посилання вона, наприклад, змінює колір. Це можливо завдяки псевдоклас і псевдоелементи. Розглянемо приклад.
Вищевказаний код позначає, що при наведенні (hover) на посилання, тобто елемент a ( ) Колір тексту посилання (color) буде чорним.
Псевдокласи
Псевдокласи - це елементи, які вказують певний набір стилів, в разі різних подій і змін стану елемента. Наприклад, як зміняться стилі в разі наведення, кліка і тд на елемент.
Список найбільш використовуваних псевдокласів. які обов'язково знадобляться в роботі:
Псевдоелементи
Псевдоелементи - це елементи, які дозволяють генерувати вміст, не вказане в HTML документі. Наприклад, за допомогою псевдокласів можна будь-якої текст до або після елемента, або призначити стилі для виділеного тексту.
Список основних використовуваних псевдоелементів. які стануть в нагоді в роботі:
after - додавання контенту ПІСЛЯ зазначеного елемента
before - додавання контенту ДО зазначеного елемента
firstletter - стилі для першої літери в контенті елемента
firstline - стильове оформлення першого рядка тексту в елементі
selection - застосування стилів при виділенні тексту в елементі
Однією з найпоширеніших завдань є додавання фрази до або після елемента. Розглянемо на прикладі цитат. Припустимо для певного еелементи потрібно додати текст перед ним.
Обов'язково перевірте роботу псевдокласів і псевдоелементів! Це захоплююче)
Дякую за увагу!