Как заставить CSS показывать в HTML - PullRequest
Новая
       4

Как заставить CSS показывать в HTML

0 голосов
/ 16 апреля 2020

У меня проблемы со связью CSS со страницей HTML. Оба файла находятся в одном каталоге, но я получаю это в терминале при запуске на локальном порту в Chrome ('test3' - это файл html): 

Not Found: /test3/sidebar.css
[15/Apr/2020 17:57:52] "GET /test3/sidebar.css HTTP/1.1" 404 8233

Независимо от того, как Я изменяю путь href, получая некоторые варианты решения этой проблемы, если только я не включаю имя каталога: css имя файла, но даже тогда файл HTML не наследует стиль CSS.

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

. html file: 

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Testang</title>
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="sidebar.css" rel="stylesheet" type="text/css">

</head>
<body>

<h1> Test </h1>

</body>
</html>

Если я ввожу href как 

<link href="requests:sidebar.css" rel="stylesheet" type="text/css">

Я не получаю сообщение об ошибке, но я все еще не вижу CSS изменений («запросы» - это имя каталога).

. css файл: 

h1 {
  color: red;
  font-size: 50px;
}

Я только что переключился с PyCharm. После настройки Atom я открыл проект в Atom из папок PyCharm. Все остальное работает нормально.

Ответы [ 4 ]

0 голосов
/ 16 апреля 2020

Я создал папку в главном каталоге проекта с именем «stati c», а затем создал каталог с именем «css». Затем, и это было для меня большим упущением, я зашел в файл settings.py проекта и создал путь STATICFILES_DIRS к этой новой папке.

Из того, что я прочитал, мне понадобится дополнительная работа, когда я отправлю sh в производство. 

# Static files (CSS, JavaScript, Images)
https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    "full folder path to static folder"
]

Затем в файле HTML я ввел: 

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>

Ключевыми частями являются load static вверху и ссылка на {% static 'css/sidebar.css' %}.

0 голосов
/ 16 апреля 2020

В самом начале вашего HTML файла добавьте: 

{% load static %}

и измените 

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

на что-то вроде этого: 

<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">
0 голосов
/ 16 апреля 2020

Поскольку файл CSS находится в той же папке, вы можете попробовать что-то вроде этого: 

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

Точка указывает браузеру искать в той же папке, что и HTML.

0 голосов
/ 16 апреля 2020

Код выглядит хорошо, в нем нет опечаток. Убедитесь, что у вас есть файл CSS и файл HTML в одной папке, и они не являются текстовыми файлами, имеют расширения и, конечно же, файлы сохраняются.

test3 является родительским каталогом?

Это просто HTML и CSS или это Django проект?

...