Как убрать подсветку текста?

Question

Я сделал кнопки, которые переносят на другую страницу. Проблема заключается в том, что ВЕСЬ текст фиолетовый и с подчёркиванием. Ниже прикреплю скриншот, чтобы было понятно, о чём я. Как можно исправить эту проблему? Чтоб не было не одной фиолетовой ссылки

<!DOCTYPE html>

<html>
    <head>
        <title>Титул</title>
        <meta charset = "utf-8">
        <style type="text/css">
            ul {
                display: block;
                text-align: center;
                background: grey;
            } 
            li{
                width: 60px;
                height: 50px;
                display: inline-block;
                font-size: 150%;
                background-color: grey;
                padding: 0.5rem 5rem; /* Поля вокруг текста */
                margin-right: 50px;
                text-decoration: none;
            }
            li:hover{
                background-color: darkgrey;
                box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            }
            body{
                background-color: lightgrey;
            }
            p{
                font-size: 110%;
                font-family: Helvetica;
                text-indent: 2em;
                margin-left: 100px;
            }
            div{
                width: 50000px;
                margin: -10;
                background-color: grey;
                height: 70px
            }
            z{
                text-shadow: 0 0 3px black;
                font-size: 200%;
                font-family: Helvetica;
            }
        </style>

    </head>
    <body>
        <z style="margin-left: 1000px;">
            Компания
        </z>
        <br>
        <br>
        <ul>
            <li>
                <a href = "file:home_page.html", target="_self">Главная
            </li>
            <li>
                <a href = "file:about.html", target="_self">О нас
            </li>
            <li>
                Услуги
            </li>
            <li>
                Контакты
            </li>
        </ul>
        <br>
        <br><br><br>
        <p id = "Test">
            Текст главной страницы
        </p>
    
    </body>


</html>

Answer 1

text-decoration: none; и т.п. вещи вы должны применить к тегу a, а не к его родителю, аналогично и цвет

или переносите свойства с родителя на дочерний:

li, li a {}

Answer 2

<!DOCTYPE html>

<html>
    <head>
        <title>Титул</title>
        <meta charset = "utf-8">
        <style type="text/css">
        li a {
    color: blue;
    text-decoration: none;
}
            ul {
                display: block;
                text-align: center;
                background: grey;
            } 
            a{text-decoration: none;color:blue;}
            li{
                width: 60px;
                height: 50px;
                display: inline-block;
                font-size: 150%;
                background-color: grey;
                padding: 0.5rem 5rem; /* Поля вокруг текста */
                margin-right: 50px;
                text-decoration: none;
            }
            li:hover{
                background-color: darkgrey;
                box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            }
            body{
                background-color: lightgrey;
            }
            p{
                font-size: 110%;
                font-family: Helvetica;
                text-indent: 2em;
                margin-left: 100px;
            }
            div{
                width: 50000px;
                margin: -10;
                background-color: grey;
                height: 70px
            }
            z{
                text-shadow: 0 0 3px black;
                font-size: 200%;
                font-family: Helvetica;
            }
        </style>

    </head>
    <body>
        <z style="margin-left: 1000px;">
            Компания
        </z>
        <br>
        <br>
        <ul>
            <li>
                <a href = "/home_page.html", target="_self">Главная</a>
            </li>
            <li>
                <a href = "/about.html", target="_self">О нас</a>
            </li>
            <li>
                Услуги
            </li>
            <li>
                Контакты
            </li>
        </ul>
        <br>
        <br><br><br>
        <p id = "Test">
            Текст главной страницы
        </p>
    
    </body>


</html>

Answer 3

Задайте стиль для всех ссылок:

<style type="text/css">
    A
    {
        color: red;
        text-decoration: none;
    }
    A:hover
    {
        text-decoration: underline;
    }
</style>

Или для всех ссылок в списках:

<style type="text/css">
    UL > LI > A,
    OL > LI > A
    {
        color: red;
        text-decoration: none;
    }
    UL > LI > A:hover,
    OL > LI > A:hover
    {
        text-decoration: underline;
    }
</style>

Или для всех ссылок с CSS классом:

<style type="text/css">
    A.class-name
    {
        color: red;
        text-decoration: none;
    }
    A.class-name:hover
    {
        text-decoration: underline;
    }
</style>

Answer 4

Эту проблему можно исправить изменением цвета для разных состояний ссылки. a:visited - ссылка с псевдоклассом visited дает возможность задать стили для посещенных ссылок. a:focus - ссылка с псевдоклассом focus дает возможность задать стили для ссылок, которые были кликнуты. a.hover - ссылка с псевдоклассом hover дает возможность задать стили при наведении на ссылку.

Так же можно при помощи css изменять стили ссылки:

a {
    color: #ffffff; /* Цвет текста ссылки стане белым */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
}

Так же можно нагуглить интересные примеры ссылок с кодом или без.

БЛОГ НА HUSL

Как убрать подсветку текста?

Ответы (4 шт):