Моя таблица стилей внезапно не работает

#html #css

#HTML #css

Вопрос:

На днях я поцарапал страницу входа в систему для небольшого проекта, над которым я работаю. Я почти ничего из этого не делал, панель создавала фон и панель навигации. Когда я продолжил работу над ней, любые изменения, которые я внес в CSS, не сработали. Например, когда я попытался покрасить H1s в белый цвет. Я попытался очистить свой кеш для Mozilla на случай, если что-то было повреждено, но без надежды.

Кроме того, как ни странно, я думаю, что у меня возникает проблема с «таблицей стилей пользовательского агента» (замечена при открытии в Chrome). Есть предложения?

Вот HTML:

 <!DOCTYPE html>
<html>
 <head>
<title> BitStudy </title>  
<script src="man.js"></script> 
<link rel=styleSheet HREF="home.css" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
</head>
<body>
    
<ul class="topnav">
  <li><a class="active" href="#home">BitStudy</a></li>
  <li><a href="#news">About</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="right"><a href="#about">Log in</a></li>
</ul>


<h1>Testing</h1>
  
    
</body>
</html>

и css:

 body,html{
    width:100%;
    height: 100%;
    margin: 0 auto;
    background: url(images/back1.jpeg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: 'Roboto', sans-serif;
    font-size:80%;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #ff751a;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}

h1{color:white;}

1. «таблица стилей агента пользователя» не является ошибкой. Именно так браузер отображает страницу по умолчанию

2. Загружается ли ваша сетевая панель (инструменты разработчика браузера) home.css ?

3. Он был загружен!

4. Невозможно воспроизвести: jsfiddle.net/w93sh7aL — Должно быть, что-то с твоей установкой. На вкладке ответа сетевой панели вы можете увидеть CSS и является ли он допустимым CSS? У вас есть другая перезапись CSS home.css ?

Ответ №1:

Во-первых: убедитесь, что index.html и home.css находятся в той же папке. Затем измените HREF на href, как сказал Мандар Сант. Наконец, добавьте двойную строковую кавычку в таблицу стилей, как в rel=»stylesheet» . так что у вас есть что-то вроде

 <link rel="stylesheet" href="home.css" type="text/css" >

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

 <link rel=styleSheet HREF="home.css" type="text/css" >

Ответ №2:

Протестировано на локальном, и все выглядит нормально, убедитесь, что у вас есть правильные разрешения для файла .css, в этом случае проверьте на вкладке NET в инструментах разработчика (F12), правильно ли включен файл.