Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

Как работать с псевдоклассами css

Наша Команда техподдержки рада представить Вам новый туториал, который покажет, как работать с псевдоклассами в правилах css. Псевдокласс используется для того, чтобы определить определённое состояние элемента, например, ‘hover’ (состояние для наведения мышкой), ‘focus’ или ‘active’. Вы можете ознакомиться с этой ссылкой для получения более детального описания. Для того чтобы работать с псевдоклассами, ознакомьтесь с инструкциями ниже:

  1. Откройте страницу и нажмите на клавишу F12, для того чтобы открыть инструмент Firebug (или другой инструмент исследования). Вы можете узнать больше о том, как использовать инструменты исследования на следующей странице.

  2. Найдите элемент, для которого Вы хотите задать стили. Для того чтобы это сделать, активируйте инспектор, нажав на значок слева вверху в окне Firebug (1) и нажмите на элемент на странице, для того чтобы его использовать (2):

    62.General.How_to_work_with_pseudo_classes_1

    В качестве альтернативы, Вы можете нажать на нужный элемент правой кнопкой мышки и выбрать ‘Исследовать с Firebug’ (или ‘Исследовать’ для других инструментов).

  3. Справа Вы увидите стили, которые применяются к элементу в обычном состоянии. Выберите псевдокласс, нажав на маленькую стрелку вверху списка Стили (Styles), для того чтобы сделать так, чтобы применённые к элементу стили с псевдоклассами отобразились:

    62.General.How_to_work_with_pseudo_classes_2
  4. Теперь Вы можете видеть все элементы, которые влияют на элемент в остальных состояниях, например, при наведении мышкой. Это позволит Вам задать новый цвет для кнопок, изменить масштабирование и т.д. Измените значение свойства в коде, например, цвет или фон, и добавьте !important перед символом ; в конце строки со свойством. Обратите внимание на пример ниже:

    Исходное правило (определяет белый цвет ссылки при наведении мышкой):

    			.entry-content a:hover {
    				color: #ffffff;
    			}
    		

    Правило с изменениями (теперь цвет ссылки меняется на #123456 при наведении мышкой):

    			.entry-content a:hover {
    				color: #123456 !important;
    			}			
    		
  5. Вы можете задать определение любому свойству css таким способом. Закончив редактирование правила, скопируйте это новое (изменённое) правило в конец вашего файла .css (он может называться style.css, template.css, global.css и т.д.) Проверьте ваш сайт после применения изменений. В некоторых случаях Вы можете внести изменения непосредственно в код, в этом случае добавление ‘!important’ не обязательно.

Это конец данного туториала. Теперь Вы знаете, как работать с псевдоклассами в CSS.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Как работать с псевдоклассами css
 
Чат
We help you to choose the right product.
Начать чат