Блог

Я новичок в интерфейсе, это будет мой первый веб-сайт. Я использую HTML, CSS, Bootstrap и Flask.

Проблема, с которой я сталкиваюсь, заключается в том, что следующий код оформляется как ссылка, когда он должен быть простым текстом. Он синий, когда я навожу на него курсор мыши, он становится синим и становится подчеркнутым.

 <div class="container col-md-6 col-lg-5">
    <hr>
    <p class="lead" id="repo-title">Welcome to the repository of my publications.</p>
    <p id="repo-intro">Introduction to repository. This is the sum of my work, from many different projects. It is listed in chronological order. Use the navigation on the left-side to filter through the repository by subject, project or publication format.</p>
</div> 
 

Я не верю, что я использовал какие-либо классы начальной загрузки, которые могли бы вызвать это.
Когда я использую режим разработчика в Firefox, я заметил, что он наследует следующий стиль:

 a:hover {
    color: #0056b3;
}
 

from _reboot.scss:13 , который, по-видимому, является файлом начальной загрузки. Хотя я не заметил ничего, что могло бы привести к подчеркиванию элементов или изменению курсора на маленькую руку.

Я попытался исправить это с помощью стиля CSS, такого как:

 #repo-title, #repo-intro
{
    color:black;
}

#repo-title:hover, #repo-intro:hover
{
    text-decoration:none;
}
 

Это изменило цвет шрифта, но не убрало подчеркивание и не изменило курсор при наведении курсора на текст.

Вот моя пользовательская таблица стилей CSS, на случай, если я неосознанно вызываю эту проблему:

 body
{
    margin:0;
}  

#headline 
{
    font-size: 64px;
    color:white;
}
#headline:link, #headline:visited
{
    text-decoration: none;
}

#headline:hover, #headline:active
{
    color:white;
}

#top-banner
{
    margin-bottom: 0px;
    padding-bottom: 20px;
}

/*NAVVY*/

.navvy
{
    text-align: center;
    padding: 30px;
    overflow: hidden;
}

.navvy li
{
    display: inline;
}

.navvy li a
{
    text-decoration: none;
    font-size: 16px;
    color: rgb(0,123,255);
    padding: 10px;
    border-radius: 10px;
    font-weight: 200;
}

.navvy-link a:hover
{
    color: rgba(0, 0, 0, 0.822);
    text-decoration:none;
}

.navvy li a.active
{
    background-color:rgb(0,123,255);
    color:white;
}

.navvy .icon {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .navvy-link, .active {display: none;}
    .navvy a.icon {
      float: right;
      display: block;
      font-size: 40px;
    }
    .navvy li a{width: 90%;}
  }

  @media screen and (max-width: 768px) {
    .navvy.responsive {position: relative;}
    .navvy.responsive .icon 
    {
        padding-top: 11px;
        padding-right: 4px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .navvy.responsive a {
      float: none;
      display: grid;
      justify-content: center;
      padding: 25px;
    }

    .navvy.responsive li
    {
        display: grid;
        justify-content: center;
    }
  }
hr
{
    margin-top: 0;
    margin-bottom: 30px;
}
/*HOME*/
img#bust
{
    width:75%;
    height: auto;
}



/*REPOSITORY*/


#main-content
{
    display:flex;
    padding:2rem;
}

#repo-nav
{
    order:1;
}

#repo-cards
{
    flex:1;
    order:2;
}



/*EVENTS*/
.container.news
{
   display: grid;
   justify-content:center;
}
.news
{
   justify-self:center;
}

 

Заранее спасибо.

1. используйте среду ide, такую как submlime text или webstorm, для проверки открытых тегов и ошибок кода, возможно, вы используете неправильную форму тегов или где-то отсутствуете.
2. создайте новую страницу с простой формой html для проверки, проблема возникает на всех страницах
3. используйте ctrl u в браузере для проверки ошибок (отсутствующие теги и ошибки отображаются красным текстом)
4. отключите все расширения браузера и используйте режим инкогнито
5. для переопределения кодов стиля начальной загрузки вы можете использовать !важно.

пример:

 #repo-title:hover, #repo-intro:hover
{
    text-decoration:none !important;
}