> For the complete documentation index, see [llms.txt](https://vik-coder.gitbook.io/html-css-course-with-sh/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vik-coder.gitbook.io/html-css-course-with-sh/urok-6/6.1-blochnye-i-strokovye-elementy.md).
# 6.1 псевдоклассы, анимации, единицы измерения
## псевдоклассы
псевдоклассы определяют состояние элементов, которое изменяется с помощью действий пользователя. вот так выглядит их запись:
`Селектор:Псевдокласс { Описание правил стиля }`
### :hover
стиль применяется при наведении на элемент. например для ссылки у нас установлен **синий цвет по умолчанию**, когда юзер **наведет на ссылку курсор**, то он станет **красным**.
### :visited
данный псевдокласс применяется к посещённым ссылкам. обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
```markup
Псевдоклассы
Ссылка |
```
* [хочу больше псевдоклассов](https://developer.mozilla.org/ru/docs/Web/CSS/Pseudo-classes#%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D1%85_%D0%BF%D1%81%D0%B5%D0%B2%D0%B4%D0%BE%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2)
* [основные псевдоклассы с хорошими примерами :)](https://webref.ru/course/css-advanced/pseudo-classes)
* [**примеры для всех псевдоклассов**](https://webref.ru/css/type/pseudoclass)
* [крутые примеры использования этих штук](https://freefrontend.com/css-text-effects/)
## background
[шпаргалка по свойствам](https://ruseller.com/shporacss.php?id=12)
[и вот ещё](https://www.w3schools.com/cssref/pr_background-image.asp)
сделать картинку задним фоном и по центру :point\_down:
`background: center url('xxx');`
## transition/анимация
отличная статья :point\_down::grinning: [https://developer.mozilla.org/ru/docs/Web/CSS/CSS\_Transitions/Using\_CSS\_transitions](https://html5book.ru/css3-transition/)
## читаем про единицы измерения
## крутецкие ресурсы
* [много бесплатных фоток](https://www.pexels.com/ru-ru/)
* [и иллюстраций ](https://undraw.co/illustrations)
* [вот ещё иллюстрации](https://weareskribbl.com/)
