---

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Задание 22.3.1</title>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<style>
#code{
    background-color:#fffDBD;
    margin:10px;
    padding:5px;
}
</style>

<script>
$(document).ready(function(){

    // 1
    $("#but1").click(function(){
        $("#par1").css("color","green")
                  .css("font-size","20px");
    });

    $("#but1").dblclick(function(){
        $("#par1").css("color","")
                  .css("font-size","");
    });

    // 2
    $("#href1").mouseover(function(){
        $(this).css("color","orange");
    });

    $("#href1").mouseout(function(){
        $(this).css("color","");
    });

    // 3
    $("#text1").focus(function(){
        $(this).css("color","red")
               .css("font-size","20px");
    });

    // 4
    $("#but2").click(function(){
        $("#par2").css("font-family","Arial")
                  .css("color","blue");
    });

});
</script>

</head>

<body>

<p><b>1. После одинарного нажатия на кнопку с id="but1" цвет текста абзаца с id="par1" должен измениться на зеленый, а размер его шрифта должен стать равным 20px. При двойном нажатии на кнопку с id="but1" оформление абзаца с id="par1" должно сбрасываться на стандартное.</b></p>

<div id="code">
    <h3>Я первый заголовок на странице.</h3>
    <p id="par1">Я первый абзац на странице.</p>
    <input id="but1" type="button" value="Нажмите на меня">
</div>

<p><b>2. При наведении указателя мыши на ссылку с id="href1" ее цвет должен измениться на оранжевый. При выведении указателя мыши за ее пределы оформление должно сброситься на стандартное.</b></p>

<div id="code">
    <a id="href1" href="http://www.wisdomweb.ru/">wisdomweb.ru</a>
</div>

<p><b>3. При выделении текста элемента с id="text1" его цвет должен измениться на красный, а размер шрифта должен стать равным 20px.</b></p>

<div id="code">
    <input type="text" id="text1" value="Выделите мой текст">
</div>

<p><b>4. При щелчке по кнопке с id="but2" оформление абзаца с id="par2" должно меняться следующим образом: текст должен быть отображен шрифтом Arial синего цвета.</b></p>

<div id="code">
    <p id="par2">Мое оформление будет меняться после каждого нажатия на кнопку ниже.</p>
    <input id="but2" type="button" value="Изменить оформление абзаца">
</div>

</body>
</html>