Уроки 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

Калькулятор CGPA 12 для семестра

Как собрать/развернуть часть вашего приложения Angular

Запуск PHP на IIS без использования программы установки веб-платформы

Оптимизация React Context шаг за шагом в 4 примерах

Библиотека для работы с мороженым

Настройка шаблона Metronic с помощью Webpack и Gulp