0

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

<!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>

Текст

4 ответа 4

0

<!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>

6
  • По какой-то причине результат не меняется. Полностью копировал код, но без результатно. Самое что смущает - на это сайте образец работает
    – user449287
    3 ноя 2021 в 17:47
  • Посмотрел я в код в браузере. В строке <a href = "file:home_page.html", target="_self">Главная</a> не пишет, что унаследовано от контейнера "a"
    – user449287
    3 ноя 2021 в 17:49
  • @АртемГолубев Очистите кэш обновлением странице нажав CNtRL+F5
    – Arcadiy
    3 ноя 2021 в 17:52
  • @АртемГолубев Исправил ответ
    – Arcadiy
    3 ноя 2021 в 17:57
  • Ваш код работает. Это у меня что-то произошло с сайтом.
    – user449287
    3 ноя 2021 в 18:00
0

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

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

li, li a {}

1
  • Можете пожалуйста показать на коде? Попробовал так, но не получилось li a{text-decoration: none;color: black;}
    – user449287
    3 ноя 2021 в 16:38
0

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

<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>
0

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.