Блог

Главная - Вопросы по программированию - Расширение кода Visual Studio: Предварительный просмотр HTML; Внешний CSS не работает

Расширение кода Visual Studio: Предварительный просмотр HTML; Внешний CSS не работает

#html #css #visual-studio-code

Вопрос:

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

Предварительный снимок экрана

Я попытался создать отдельный CSS-файл, а также встроил стиль CSS в страницу.

Вот мой код

Глава

 <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Ana Sayfa</title>

Тело

  <div id="sayfa">
    <header>
        <div id="banner">
            Banner
        </div>
        <div id="logo">
            Logo
        </div>
        <div id="sosyalmedya">
            Sosyal Medya
            <div class="face"></div>
            <div class="twit"></div>
            <div class="insta"></div>
        </div>

    </header>
    <nav>
        <div id="ana-menu">
            Ana Menü
        </div>
    </nav>
    <section>
        <div id="icerik">
            İçerik
        </div>
    </section>
    <aside>
        <div id="yan-menu">
            Yan Menü
        </div>
    </aside>
    <footer>
        <div id="alt-menu">
            Alt Menü
        </div>
    </footer>
</div>

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

1. находится ли файл css в той же папке, что и файл html?

2. да, оба файла находятся в одной папке.

3. хорошо, но почему у вас голова отделена от тела? и никакого контейнера для документов?

Ответ №1:

Есть пара вещей, на которые вам следует обратить внимание.

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

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

 </head>
  <body>

  </body>
</html>

Вы также хотите закрыть свои отдельные теги в голове. Большую часть времени мы открываем и закрываем тег вот так.

 <div></div>

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

 <img attr="..." />

Прямая косая черта закрывает этот единственный тег. Ваши мета-теги не закрыты.

Так и должно быть.

 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Я не уверен, что это решит вашу проблему, потому что это приблизит вас к стандартному html-документу.

Метки: