Практическая работа №6 (2). Практическая работа 6 Псевдоэлементы и псевдоклассы. Позиционирование Цели

• Название: Практическая работа 6 Псевдоэлементы и псевдоклассы. Позиционирование Цели
• Дата: 09.12.2022
• Размер: 5.38 Mb.
• Имя файла: Практическая работа №6 (2).docx
• Тип: Практическая работа; #835656

Практическая работа № 6

Псевдо-элементы и псевдо-классы. Позиционирование

Цели:

1. 
   Изучить псевдо-классы, их принцип работы;
   
2. 
   Изучить псевдо-элементы, их использование на практике.
   
3. 
   Поработать с позиционированием элементов.
   

Ход работы:

1. 
   Создаём новую папку, как всегда.
   
2. 
   В папке будет 2 файла: index.html, style.css.
   
3. 
   В index.html добавляю 2 параграфа с любым текстом.
   
4. 
   Есть такая задача: поставить на фон полупрозрачный текст, для каждого параграфа свой (да, нужно найти пару картинок). Через background-image прозрачность картинки регулировать нельзя. Поэтому сделаем это через псевдоэлементы:
   

5. 
   Теперь делаю псевдоэлементы полупрозрачными, чтобы текст стал читабелен:
   

6. 
   Ещё хочу скруглённые углы. Но это не работает, если просто дать border-radius. Ничего не изменится, хотя консоль показывает мне, что стиль применён:
   

7. 
   Решается это просто: надо указать, что весь контент, который вылезает за границы контейнера, должен быть скрыт:
   

Теперь добавляем несколько эффектов при наведении курсора на параграф, фон будет становиться непрозрачным, а текст менять свой цвет:

8. 
   И ещё добавлю небольшой эффект при нажатии на параграф: (кода уже много, поэтому не весь):
   

9. 
   Напоследок я уберу id элементов и заменю их на псевдоклассы:
   

10. 
    Визуально ничего не меняется, но работает теперь чуть по-другому.
    
11. 
    Вопросы:
    
    1. 
       
       Какие виды позиционирования элементов есть в CSS?
       
    2. 
       
       Как описываются псевдоэлементы?
       
    3. 
       
       Какие виды псевдоэлеметов есть?
       
    4. 
       
       Как описываются псевдоклассы?
       
    5. 
       
       Какие виды псевдоклассов есть?