Блог

Главная - Вопросы по программированию - Файл CSS не загружается в базовом HTML

Файл CSS не загружается в базовом HTML

#html #css #loading

#HTML #css #Загрузка

Вопрос:

это очень простой код, поскольку я все еще новичок, у меня возникли проблемы с загрузкой его в Chrome через скобки в OSX.

Когда я загружаю файл локально, он отображает все, но CSS не загружается, все остальное функционирует должным образом.

Мое устранение неполадок до сих пор:

  1. index.html и мой tutoringservices.html находится в том же каталоге, что и style.css.
  2. Я сохранил и перезапустил свой компьютер, чтобы убедиться, что это не проблема с обновлением
  3. Очистил кэш Chrome, чтобы убедиться, что CSS загружается правильно
  4. Я скопировал CSS-код из w3schools.com и другие базовые веб-сайты, чтобы убедиться, что базовый код будет функционировать должным образом. Я удалил все, кроме стиля .button, поскольку это то, что я изначально пытался устранить, а не столько импорт шрифта.

Я не знаю, как открыть Firefox через скобки, поэтому я не загрузил Firebug.

Я еще не связал CSS с моим index.html как и в теории, это должно работать на tutoringservices.html в любом случае. Вот мой код:

tutoringservices.html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contact</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Amatic SCamp;display=swap" rel="stylesheet">
   
    <link href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
    
    
</head>

<body>
    
    <header>
      <a href="index.html">Home</a>

    </header>
  <main>
      <h1>Get in Touch</h1>
      <hr>
      <p>
          Thank you for your interest. Inquiries usually receive a response within 24 hours. 
          <br>If you do not receieve a timely response, please feel free to send another!</p>
      
    <form class="contact-form" action="contactform.php" method="post">
      <input type="text" name="name" placeholder="Full name">
        <br><br>
      <input type="text" name="mail" placeholder="Your E-Mail">
        <br><br>
      <input type="text" name="phone" placeholder="Phone Number (optional)">
        <br><br>
      <input type="text" name="subject" placeholder="Subject">
        <br><br>
      <textarea name="message" placeholder="Message"></textarea>
        <br><br>
      <button type="submit" name="submit">SEND</button>
    </form>
  </main>
</body>
</html>

style.css

 @charset "UTF-8";

.paragraph {
    font-size: 50px;
    line-height: 62px;
    font-family: 'Amatic SC', cursive;
}

font-family: 'Amatic SC', cursive;

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Будем рады ответить на любые дополнительные вопросы, спасибо за ваше время.

Комментарии:

1. вы можете узнать, загружается ли он и / или нацелен ли он не на правильный HTML, используя отладчик браузера (клавиша f12 в большинстве браузеров или щелкните правой кнопкой мыши и «проверьте» элемент на странице)

2. ./style.css это неправильная ссылка. так и должно быть style.css , если он находится внутри той же папки. если это одна папка ниже, то ее ../style.css . Но этого никогда не будет ./style.css . Кроме того, пропустите @charset UTF-8 . Вы уже объявили UTF-8 внутри заголовка HTML. .paragraph адресует class="paragraph" тег в HTML, который не существует. У семейства шрифтов нет подключенного к нему класса / идентификатора / селектора. .button это идентификатор класса, который также не существует. Если вы хотите адресовать теги кнопок; вы должны удалить точку.

3. ./style.css это не ошибка. Это необычно по отношению к CSS, но, безусловно, это не ошибка, и это не вызовет никаких проблем.

4. возможно, это просто плохая привычка писать ссылку подобным образом, но все еще не устраняет проблемы, связанные с тем, что почти весь css неправильно отформатирован с классами, которых не существует, строками кода вне каких-либо тегов…

Ответ №1:

.name в файле css указывает, что это стилизация класса, но классы не используются в файле HTML. Итак .button означает, что он стилизует класс button вместо элемента button. Два варианта:

  1. Оформите элемент вместо класса, удалив точку

  2. Добавьте класс в файл css, например, на кнопке:

       <button class="button" type="submit" name="submit">SEND</button>

Комментарии:

1. Простое удаление точки, чтобы код выглядел примерно так: button { }, похоже, не сработало. Что касается # 2, не могли бы вы, пожалуйста, немного уточнить? Добавление <button></button> в файл css будет считаться как html, нет?

2. РЕШЕНО! Спасибо всем за то, что вы отличное сообщество. Я неправильно понял, это для замены кода в строке 38 моего .html, мне просто нужно было втиснуть class=»button».

Ответ №2:

  1. Используйте классы в своем HTML-коде. В вашем CSS вы используете, например, .paragraph — так что используйте его и в HTML: <p class="paragraph"> , и то же самое для кнопки.

  2. Вторую проблему немного сложнее обнаружить, но ее легче исправить. У вас есть своенравное объявление CSS вне любого селектора в вашем файле style.css в строке 9. Просто удалите его:

    семейство шрифтов: ‘Amatic SC’, курсивный;

Исправьте эти два исправления, и вы будете в восторге.

Комментарии:

1. Потрясающе, спасибо. Это осталось от шрифта Google, который я пытался импортировать, но оставлю это, пока не решу эту проблему.

2. Вам нужно удалить его, чтобы ваш код заработал. Если вы действительно хотите сохранить его, то оберните его /* и */ , чтобы он был закомментирован: /* font-family: 'Amatic SC', cursive; */

Ответ №3:

Хорошо, проблема, на мой взгляд (при условии, что каталог файла css указан правильно), заключается в том, что вы ссылаетесь в своем css-коде на классы «.paragraph» и «.button», которые не существуют в вашем html-коде. Когда вы ссылаетесь в css на какую-либо часть html, вы делаете это следующим образом:

  • для идентификатора ex:

    HTML

    <div id="my_id">

    css

    #my_id{}

— «.» для класса

 html

`<div class="my_id">`

css

`.my_id{}`

— просто название тега для самого тега

 html

`<div>`

css

`div {}`

you must be careful when referring by tag names.

Ответ №4:

Вам не нужен ./ если он находится в том же каталоге в href="style.css" . Когда дело доходит до абзаца и кнопки, ваш css ссылается на них как на классы, добавляя перед ними «.». Если вы просто хотите вызвать их с помощью html-тега

 p {
 // put style for all paragraph tags here
}
 
button {
 // put styling for all buttons here
}