Уроки CSS 6

Здравствуйте дорогие читатели, я Ферди Сефа Дюзгюн, сегодня мы продолжим с вами уроки css. Сегодня мы снова продолжим с так называемых классов.

:hover

Это тег still, с помощью которого мы можем задать визуальный эффект и свойства, возникающие при наведении курсора мыши на что-либо. Мы можем использовать функцию hover практически на всех тегах.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            p:hover {
                background-color: aqua;
            }

                button:hover + ul { 
                    display: none;
                }

                strong::selection{
                    color: brown;
                }

                strong:hover::selection{
                    color: tomato;
                }

                a::after{
                    content: '(' attr(href)')';
                }

                a:hover::after{
                    display: none;
                }

                

    </style>
</head>
<body>
    <p>burası bir paragraftır</p>

    <button> Üzerine gel ve Gizle</button>

    <ul>   
        <li>
            1.liste
        </li>
        <li>
            2.liste
        </li>
    </ul>

<strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, modi!</strong>
<br><br>

    <a href="https://duzguntrade.com">Duzgun Trade</a>

</body>
</html>

:checked

Это полезный псевдокласс для элементов формы. Inputs - это css-коды, которые охватывают операции, которые мы выполняем, когда тип - checkbox или radio - нажимается.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type="radio"]:checked + span {
            color: red;
        }

        input[type="checkbox"]:checked + .box{
                display: none;
        }

        .cbb::before{
            content: attr(data-hide);
        }

        .checkbox2:checked + .cbb::before{
            content: attr(data-show);
        }

        .checkbox2:checked + .cbb +.box2{
            display: none;
        }
    </style>
</head>
<body>
    
<label for="sefaa">
    <input type="radio" name="cinsiyet" value="kadin" id="sefaa">
    <span>KADIN</span>
</label>

<label for="sefaa2">
    <input type="radio" name="cinsiyet" value="erkek" id="sefaa2">
    <span>ERKEK</span>

    <hr>
    <br>

    <input type="checkbox" id="23" class="cb">
    <label for="23" class="box">Burası gizlenebilen bir alandır</label>

    <br>
    <br>

    <input type="checkbox" id="cbb" class="checkbox2">
    <label class="cbb" for="cbb" data-show="göster" data-hide="gizle"></label>

    <div class="box2">
        merhaba burası gizlenen alan 2
    </div>
</label>
</body>
</html>

:focus

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button:focus{
                background-color: lime;
                color: white;
            
        }

        input:focus{
            color: red;
            border-color: red;
        }

        a:focus{
                background-color: blue;

        }

    </style>
</head>
<body>
    <button>Button</button>

    <input type="text">
    <BR></BR>

    <a href="https://duzguntrade.com">duzguntrade</a>
    
</body>
</html>

Иногда мы не можем сосредоточиться на некоторых тегах и выделить их с помощью клавиши табуляции, например, нельзя выделить такие теги, как div, и применить действия. Конечно, для этого есть дополнительная возможность. Если вы добавите атрибут tabindex="x" к тегу и попробуете фокус, он сработает. Эта функция также определяет порядок действий. Порядок работы определяется путем указания числа вместо X.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button:focus{
                background-color: lime;
                color: white;
            
        }

        input:focus{
            color: red;
            border-color: red;
        }

        a:focus{
                background-color: blue;

        }

        div:focus{
            background-color: yellow;
        }
    </style>
</head>
<body>


    <button tabindex="4">Button</button>

    <input tabindex="3" type="text">
    <BR></BR>

    <a tabindex="2" href="https://duzguntrade.com">duzguntrade</a>

    <div tabindex="1">Burası div etiketi</div>
    
</body>
</html>

Теперь вы можете перемещаться вперед и назад с помощью клавиш tab и shift в соответствии с заданным порядком tabindex. Эта функция важна для устройств без мыши.

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

:focus{
    outline:none;
}

:focus-within

При использовании функции focus, то есть css, который мы можем обрабатывать после щелчка, мы используем :focus-within для обработки родительского тега, который мы используем. Это простой тег.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

            li:focus{
                background-color: yellow;
            }

            ul:focus-within{
                background-color: teal;
            }
    </style>
</head>
<body>
<ul>
    <li tabindex="1">LİSTE 1</li>
    <li tabindex="2">LİSTE 2</li>
    <li tabindex="3">LİSTE 3</li>
</ul>
</body>
</html>

:hover

:checked

:focus

:focus-within

Стоит ли изучать PHP в 2023-2024 годах?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

Приемы CSS-макетирования - floats и Flexbox

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

Концепция локализации и ее применение в приложениях React ⚡️

Пользовательский скаляр GraphQL