Блог

Главная - Вопросы по программированию - Мой внешний CSS не влияет на мой index.html

Мой внешний CSS не влияет на мой index.html

#html #css

#HTML #css — код

Вопрос:

Я создал внешнюю таблицу стилей с помощью CSS, и предполагается, что это повлияло на мои HTML-файлы, но когда я запустил их на atom. Однако, похоже, это никак не влияет на мое index.html . Я предполагаю, что мои данные верны, но я не понимаю, по какой причине они не работают. В данный момент я создаю свой веб-сайт на практике, и я надеюсь, что есть кто-то, кто мог бы оказать мне надлежащую поддержку.

Имя файла с помощью CSS: css/styles.css

 body{
  background-color:#dbf6e9;
}

hr{
  border-style: none;
  border-top-style: dotted;
  border-color: grey;
  border-width: 5px;
  width:30%;
}


File name: index.html 
 <!DOCTYPE html>
<html lang="en" dir="ltr">

  <meta charset="utf-8">
  <title>Peter Stinson's Personal Site</title>
  <link rel="stylesheet" href="css/styles.css">
</html>

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

1. Нажмите клавишу F12, затем перейдите на вкладку сеть и перезагрузите страницу, чтобы узнать, найден ли css

2. Обычно вам может потребоваться жесткое обновление Ctrl F5 .

3. Да, я видел, что это находится в элементе, когда я нажал F12

4. костапарас — я нажал Ctrl F5, но все то же самое.

5. @anpanman можете ли вы предоставить нам структуру вашего рабочего дерева?

Ответ №1:

Ваш HTML-файл неверен, он должен быть:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Peter Stinson's Personal Site</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
</html> <!-- you put 'head' here... -->

Если это не было проблемой, убедитесь, что структура вашего проекта:

 Project (folder)
|-- index.html (HTML file)
|-- css (folder)
    |-- styles.css (CSS file)

Если ваш проект не очень большой, я бы посоветовал вам объединить ваши файлы следующим образом:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Peter Stinson's Personal Site</title>
    <style>
        body {
          background-color:#dbf6e9;
        }
        
        hr {
          border-style: none;
          border-top-style: dotted;
          border-color: grey;
          border-width: 5px;
          width:30%;
        }
    </style>
  </head>
  <body>
  </body>
</html>

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

1. вы имеете в виду, что мне нужно добавить <head> рядом с </html> ? Я мог бы попробовать, но мне любопытно…..

2. user11350388 Я знаю, что мог бы объединить все файлы, но я практикуюсь в создании внешнего css.

3. Нет, я думаю, вы, возможно, забыли тег ‘/ html’ и вместо этого поставили тег ‘head’ (см. Код в вашем вопросительном сообщении).

4. Вы назвали свой css-файл «css / styles.css» или вы назвали его «styles.css» и поместили его в папку с именем «css»? Это единственная проблема, о которой я могу думать, из-за которой файл css не будет стилизовать ваш файл веб-страницы…

5. Да, я знаю- </body> </html>

Ответ №2:

Теперь я нашел решение.

То, что я сделал, было совершенно правильно.

Я создал папку под названием web-development, а также создал 2 подпапки, одна из которых называется Personal-site, а другая называется css.

Я не виноват, что создал styles.css в своей подпапке под названием css. Однако, когда я добавил в свои файлы: index.html под подпапкой od Personal-site и нет никакого ответа, когда я нажимаю и проверяю свой конец шрифта.

После моего расследования я, наконец, выяснил проблему.

  1. Я щелкаю правой кнопкой мыши на своей странице, затем я нажал для проверки.
  2. Я выбрал для консоли — тогда я мог бы увидеть, где находится ошибка.
  3. Я закрыл проверку и нажал ctrl U.
  4. Я нажал на кнопку <link rel="stylesheet" href="css/styles.css">
  5. Я понял, что нет ответа с отображением ошибки. Моя подпапка- Personal-Site не обнаруживает ни одного файла css/styles.css .
  6. Из-за этого я переместил всю свою подпапку- css внутрь моей 1-й подпапки-personal-site.
  7. Затем я нажал на свою index.html страницу и нажал ctrl R.
  8. Это работает!!!

Ответ №3:

братан, сначала проверьте свой HTML-файл и проверьте, где начинается и заканчивается тег «», также проверьте тег «» и имейте в виду, что вам нужно связать файл css с макетом (основным файлом вашей страницы, который затем будет расширен) вашего сайта, а затем расширить его. В моем случае я использую движок просмотра pug, поэтому мой выглядит так: (слева — основной макет, а справа — основной макет, расширяющий индекс) введите описание изображения здесь