6.1 псевдоклассы, анимации, единицы измерения

псевдоклассы

псевдоклассы определяют состояние элементов, которое изменяется с помощью действий пользователя. вот так выглядит их запись:

Селектор:Псевдокласс { Описание правил стиля }

:hover

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

:visited

данный псевдокласс применяется к посещённым ссылкам. обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   a:hover{
    color: red; /* Цвет ссылок при наведении куросром */
   }
   a:visited { 
    color: #606; /* Цвет посещенных ссылок */
   }
  </style>
 </head>
 <body>
   <a href="#">Ссылка</a> | 
 </body>
</html>

background

шпаргалка по свойствам

и вот ещё

сделать картинку задним фоном и по центру 👇

background: center url('xxx');

transition/анимация

отличная статья 👇😀 https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

читаем про единицы измерения

https://learn.javascript.ru/css-units

крутецкие ресурсы

Previous5.2 домашкаNext6.2 верстаем по макету

Last updated